react-native-windows 0.81.0-preview.1 → 0.81.0-preview.4

package/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -1,178 +1,179 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-#include "NamespaceRedirect.h"
 #include "DocString.h"
+#include "NamespaceRedirect.h"
 import "Composition.Input.idl";
 
-namespace Microsoft.ReactNative.Composition.Experimental
+namespace Microsoft.ReactNative.Composition.Experimental {
+enum CompositionStretch {
+  None,
+  Fill,
+  Uniform,
+  UniformToFill,
+};
+
+enum BackfaceVisibility { Inherit, Visible, Hidden };
+
+enum AnimationClass {
+  None = 0,
+  ScrollBar,
+  ScrollBarThumbHorizontal,
+  ScrollBarThumbVertical,
+  SwitchThumb,
+};
+
+enum SnapPointsAlignment {
+  Near = 0, // Start alignment (left/top)
+  Center = 1, // Center alignment
+  Far = 2, // End alignment (right/bottom)
+};
+
+[webhosthidden][uuid("172def51-9e1a-4e3c-841a-e5a470065acc")] // uuid needed for empty interfaces
+               [version(0)][experimental] interface IBrush {}
+
+                   [webhosthidden][experimental] interface IDrawingSurfaceBrush
+  requires IBrush
+{
+  void HorizontalAlignmentRatio(Single value);
+  void VerticalAlignmentRatio(Single value);
+  void Stretch(CompositionStretch value);
+}
+
+[webhosthidden][experimental] interface IDropShadow {
+  void Offset(Windows.Foundation.Numerics.Vector3 value);
+  void Opacity(Single value);
+  void BlurRadius(Single value);
+  void Color(Windows.UI.Color value);
+}
+
+    [webhosthidden][experimental] interface IVisual {
+  void InsertAt(IVisual visual, Int32 index);
+  void Remove(IVisual visual);
+  IVisual GetAt(UInt32 index);
+  void Opacity(Single opacity);
+  void Scale(Windows.Foundation.Numerics.Vector3 scale);
+  void TransformMatrix(Windows.Foundation.Numerics.Matrix4x4 transform);
+  void RotationAngle(Single angle);
+  void IsVisible(Boolean isVisible);
+  void Size(Windows.Foundation.Numerics.Vector2 size);
+  void Offset(Windows.Foundation.Numerics.Vector3 offset);
+  void Offset(Windows.Foundation.Numerics.Vector3 offset, Windows.Foundation.Numerics.Vector3 relativeAdjustment);
+  void RelativeSizeWithOffset(
+      Windows.Foundation.Numerics.Vector2 size, Windows.Foundation.Numerics.Vector2 relativeSizeAdjustment);
+  BackfaceVisibility BackfaceVisibility {
+    get;
+    set;
+  };
+  String Comment {
+    get;
+    set;
+  };
+  void AnimationClass(AnimationClass value);
+}
+
+[webhosthidden][experimental] interface ISpriteVisual
+  requires IVisual
+{
+  void Brush(IBrush brush);
+  void Shadow(IDropShadow shadow);
+}
+
+    [webhosthidden][experimental] interface IRoundedRectangleVisual
+  requires IVisual
 {
-  enum CompositionStretch
-  {
-    None,
-    Fill,
-    Uniform,
-    UniformToFill,
+  void Brush(IBrush brush);
+  void CornerRadius(Windows.Foundation.Numerics.Vector2 value);
+  void StrokeBrush(IBrush brush);
+  void StrokeThickness(Single value);
+}
+
+[webhosthidden][experimental] interface IScrollPositionChangedArgs {
+  Windows.Foundation.Numerics.Vector2 Position {
+    get;
   };
+}
 
-  enum BackfaceVisibility
-  {
-    Inherit,
-    Visible,
-    Hidden
+    [webhosthidden][experimental] interface IScrollVisual
+  requires IVisual
+{
+  void Brush(IBrush brush);
+  void ScrollEnabled(Boolean isScrollEnabled);
+  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;
+  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollBeginDrag;
+  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollEndDrag;
+  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollMomentumBegin;
+  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollMomentumEnd;
+  void ContentSize(Windows.Foundation.Numerics.Vector2 size);
+  Windows.Foundation.Numerics.Vector3 ScrollPosition {
+    get;
+  };
+  void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
+  void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
+  void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
+  void SetDecelerationRate(Windows.Foundation.Numerics.Vector3 decelerationRate);
+  void SetMaximumZoomScale(Single maximumZoomScale);
+  void SetMinimumZoomScale(Single minimumZoomScale);
+  Boolean Horizontal;
+  void SetSnapPoints(
+      Boolean snapToStart, Boolean snapToEnd, Windows.Foundation.Collections.IVectorView<Single> offsets);
+  void PagingEnabled(Boolean pagingEnabled);
+  void SnapToInterval(Single interval);
+  void SnapToAlignment(SnapPointsAlignment alignment);
+}
+
+[webhosthidden][experimental] interface IActivityVisual
+  requires IVisual
+{
+  void Size(Single value);
+  void Brush(IBrush brush);
+  void StartAnimation();
+  void StopAnimation();
+}
+
+    [webhosthidden][experimental] interface ICaretVisual {
+  IVisual InnerVisual {
+    get;
   };
-  
-  enum AnimationClass
-  {
-    None = 0,
-    ScrollBar,
-    ScrollBarThumbHorizontal,
-    ScrollBarThumbVertical,
-    SwitchThumb,
+  void Size(Windows.Foundation.Numerics.Vector2 size);
+  void Position(Windows.Foundation.Numerics.Vector2 position);
+  Boolean IsVisible {
+    get;
+    set;
   };
+  void Brush(IBrush brush);
+}
 
-  [webhosthidden]
-  [uuid("172def51-9e1a-4e3c-841a-e5a470065acc")] // uuid needed for empty interfaces
-  [version(0)]
-  [experimental]
-  interface IBrush {
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IDrawingSurfaceBrush requires IBrush
-  {
-    void HorizontalAlignmentRatio(Single value);
-    void VerticalAlignmentRatio(Single value);
-    void Stretch(CompositionStretch value);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IDropShadow {
-    void Offset(Windows.Foundation.Numerics.Vector3 value);
-    void Opacity(Single value);
-    void BlurRadius(Single value);
-    void Color(Windows.UI.Color value);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IVisual
-  {
-    void InsertAt(IVisual visual, Int32 index);
-    void Remove(IVisual visual);
-    IVisual GetAt(UInt32 index);
-    void Opacity(Single opacity);
-    void Scale(Windows.Foundation.Numerics.Vector3 scale);
-    void TransformMatrix(Windows.Foundation.Numerics.Matrix4x4 transform);
-    void RotationAngle(Single angle);
-    void IsVisible(Boolean isVisible);
-    void Size(Windows.Foundation.Numerics.Vector2 size);
-    void Offset(Windows.Foundation.Numerics.Vector3 offset);
-    void Offset(Windows.Foundation.Numerics.Vector3 offset, Windows.Foundation.Numerics.Vector3 relativeAdjustment);
-    void RelativeSizeWithOffset(Windows.Foundation.Numerics.Vector2 size, Windows.Foundation.Numerics.Vector2 relativeSizeAdjustment);
-    BackfaceVisibility BackfaceVisibility{ get; set; };
-    String Comment { get; set; };
-    void AnimationClass(AnimationClass value);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface ISpriteVisual requires IVisual
-  {
-    void Brush(IBrush brush);
-    void Shadow(IDropShadow shadow);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IRoundedRectangleVisual requires IVisual
-  {
-    void Brush(IBrush brush);
-    void CornerRadius(Windows.Foundation.Numerics.Vector2 value);
-    void StrokeBrush(IBrush brush);
-    void StrokeThickness(Single value);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IScrollPositionChangedArgs
-  {
-    Windows.Foundation.Numerics.Vector2 Position { get; };
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IScrollVisual requires IVisual
-  {
-    void Brush(IBrush brush);
-    void ScrollEnabled(Boolean isScrollEnabled);
-    event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;
-    event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollBeginDrag;
-	  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollEndDrag;
-    event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollMomentumBegin;
-    event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollMomentumEnd;
-    void ContentSize(Windows.Foundation.Numerics.Vector2 size);
-    Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
-    void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
-    void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
-    void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
-    void SetDecelerationRate(Windows.Foundation.Numerics.Vector3 decelerationRate);
-    void SetMaximumZoomScale(Single maximumZoomScale);
-    void SetMinimumZoomScale(Single minimumZoomScale);
-    Boolean Horizontal;
-    void SetSnapPoints(Boolean snapToStart, Boolean snapToEnd, Windows.Foundation.Collections.IVectorView<Single> offsets);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IActivityVisual requires IVisual
-  {
-    void Size(Single value);
-    void Brush(IBrush brush);
-    void StartAnimation();
-    void StopAnimation();
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface ICaretVisual
-  {
-    IVisual InnerVisual { get; };
-    void Size(Windows.Foundation.Numerics.Vector2 size);
-    void Position(Windows.Foundation.Numerics.Vector2 position);
-    Boolean IsVisible { get; set; };
-    void Brush(IBrush brush);
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface IFocusVisual
-  {
-    IVisual InnerVisual { get; };
-    Boolean IsFocused { get; set; };
-    Single ScaleFactor { get; set; };
-  }
-
-  [webhosthidden]
-  [experimental]
-  interface ICompositionContext
-  {
-    ISpriteVisual CreateSpriteVisual();
-    IScrollVisual CreateScrollerVisual();
-    IRoundedRectangleVisual CreateRoundedRectangleVisual();
-    IActivityVisual CreateActivityVisual();
-    ICaretVisual CreateCaretVisual();
-    IFocusVisual CreateFocusVisual();
-    IDropShadow CreateDropShadow();
-    IBrush CreateColorBrush(Windows.UI.Color color);
-    IDrawingSurfaceBrush CreateDrawingSurfaceBrush(Windows.Foundation.Size surfaceSize,
+[webhosthidden][experimental] interface IFocusVisual {
+  IVisual InnerVisual {
+    get;
+  };
+  Boolean IsFocused {
+    get;
+    set;
+  };
+  Single ScaleFactor {
+    get;
+    set;
+  };
+}
+
+    [webhosthidden][experimental] interface ICompositionContext {
+  ISpriteVisual CreateSpriteVisual();
+  IScrollVisual CreateScrollerVisual();
+  IRoundedRectangleVisual CreateRoundedRectangleVisual();
+  IActivityVisual CreateActivityVisual();
+  ICaretVisual CreateCaretVisual();
+  IFocusVisual CreateFocusVisual();
+  IDropShadow CreateDropShadow();
+  IBrush CreateColorBrush(Windows.UI.Color color);
+  IDrawingSurfaceBrush CreateDrawingSurfaceBrush(
+      Windows.Foundation.Size surfaceSize,
       Windows.Graphics.DirectX.DirectXPixelFormat pixelFormat,
       Windows.Graphics.DirectX.DirectXAlphaMode alphaMode);
 
-    // TODO Add and hook up to rootnode - to notify the tree
-    // event Windows.Foundation.EventHandler<RenderingDeviceReplacedArgs> RenderingDeviceReplaced;
-  }
+  // TODO Add and hook up to rootnode - to notify the tree
+  // event Windows.Foundation.EventHandler<RenderingDeviceReplacedArgs> RenderingDeviceReplaced;
+}
 
-} // namespace Microsoft.ReactNative.Composition.Experimental
+} // namespace Microsoft.ReactNative.Composition. Experimental

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

@@ -910,6 +910,31 @@ struct CompScrollerVisual : winrt::implements<
         m_snapToOffsets.push_back(offset);
       }
     }
+    // Match Paper behavior: snapToOffsets disables pagingEnabled and snapToInterval
+    if (!m_snapToOffsets.empty()) {
+      m_pagingEnabled = false;
+      m_snapToInterval = 0.0f;
+    }
+    ConfigureSnapInertiaModifiers();
+  }
+
+  void PagingEnabled(bool pagingEnabled) noexcept {
+    m_pagingEnabled = pagingEnabled;
+    ConfigureSnapInertiaModifiers();
+  }
+
+  void SnapToInterval(float interval) noexcept {
+    m_snapToInterval = interval;
+    // Match Paper behavior: snapToOffsets disables snapToInterval
+    if (!m_snapToOffsets.empty()) {
+      m_snapToInterval = 0.0f;
+    }
+    ConfigureSnapInertiaModifiers();
+  }
+
+  void SnapToAlignment(
+      winrt::Microsoft::ReactNative::Composition::Experimental::SnapPointsAlignment alignment) noexcept {
+    m_snapToAlignment = alignment;
     ConfigureSnapInertiaModifiers();
   }
 
@@ -934,9 +959,13 @@ struct CompScrollerVisual : winrt::implements<
   }
 
   void Size(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
+    bool sizeChanged = (m_visualSize.x != size.x || m_visualSize.y != size.y);
     m_visualSize = size;
     m_visual.Size(size);
     UpdateMaxPosition();
+    if (sizeChanged && m_pagingEnabled) {
+      ConfigureSnapInertiaModifiers();
+    }
   }
 
   void Offset(winrt::Windows::Foundation::Numerics::float3 const &offset) noexcept {
@@ -1046,9 +1075,13 @@ struct CompScrollerVisual : winrt::implements<
   }
 
   void ContentSize(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
+    bool sizeChanged = (m_contentSize.x != size.x || m_contentSize.y != size.y);
     m_contentSize = size;
     m_contentVisual.Size(size);
     UpdateMaxPosition();
+    if (sizeChanged && m_pagingEnabled) {
+      ConfigureSnapInertiaModifiers();
+    }
   }
 
   winrt::Windows::Foundation::Numerics::float3 ScrollPosition() const noexcept {
@@ -1155,11 +1188,73 @@ struct CompScrollerVisual : winrt::implements<
     // Collect and deduplicate all snap positions
     std::vector<float> snapPositions;
 
-    if (m_snapToStart) {
-      snapPositions.push_back(0.0f);
+    // Priority: snapToOffsets > snapToInterval > pagingEnabled
+    if (!m_snapToOffsets.empty()) {
+      // Use explicit snap points when snapToOffsets is set (highest priority)
+      if (m_snapToStart) {
+        snapPositions.push_back(0.0f);
+      }
+      snapPositions.insert(snapPositions.end(), m_snapToOffsets.begin(), m_snapToOffsets.end());
+    } else if (m_snapToInterval > 0.0f) {
+      // Generate snap points at interval positions
+      float viewportSize = m_horizontal ? visualSize.x : visualSize.y;
+      float maxScroll =
+          m_horizontal ? std::max(contentSize.x - visualSize.x, 0.0f) : std::max(contentSize.y - visualSize.y, 0.0f);
+
+      // Calculate alignment offset based on snapToAlignment
+      float alignmentOffset = 0.0f;
+      using SnapPointsAlignment = winrt::Microsoft::ReactNative::Composition::Experimental::SnapPointsAlignment;
+      if (m_snapToAlignment == SnapPointsAlignment::Center) {
+        alignmentOffset = -viewportSize / 2.0f;
+      } else if (m_snapToAlignment == SnapPointsAlignment::Far) {
+        alignmentOffset = -viewportSize;
+      }
+      // Near (start) alignment has no offset (alignmentOffset = 0)
+
+      // Generate snap points at interval positions with alignment offset
+      for (float position = alignmentOffset; position <= maxScroll; position += m_snapToInterval) {
+        if (position >= 0.0f) { // Only include positions >= 0
+          snapPositions.push_back(position);
+        }
+      }
+
+      // Ensure we have at least the start position
+      if (snapPositions.empty() || snapPositions.front() > 0.0f) {
+        snapPositions.insert(snapPositions.begin(), 0.0f);
+      }
+
+      // Ensure the end position is included if not already
+      if (!snapPositions.empty() && snapPositions.back() < maxScroll) {
+        snapPositions.push_back(maxScroll);
+      }
+    } else if (m_pagingEnabled) {
+      // Generate snap points at viewport intervals (paging)
+      float viewportSize = m_horizontal ? visualSize.x : visualSize.y;
+      float maxScroll =
+          m_horizontal ? std::max(contentSize.x - visualSize.x, 0.0f) : std::max(contentSize.y - visualSize.y, 0.0f);
+
+      // Only generate paging snap points if viewport size is valid
+      if (viewportSize > 0 && maxScroll > 0) {
+        // Add snap points at each page (viewport size) interval
+        for (float position = 0.0f; position <= maxScroll; position += viewportSize) {
+          snapPositions.push_back(position);
+        }
+
+        // Ensure the end position is included if not already
+        if (!snapPositions.empty() && snapPositions.back() < maxScroll) {
+          snapPositions.push_back(maxScroll);
+        }
+      } else {
+        // If content fits in viewport or invalid size, just snap to start
+        snapPositions.push_back(0.0f);
+      }
+    } else {
+      // No interval or paging - use explicit snap points only
+      if (m_snapToStart) {
+        snapPositions.push_back(0.0f);
+      }
     }
 
-    snapPositions.insert(snapPositions.end(), m_snapToOffsets.begin(), m_snapToOffsets.end());
     std::sort(snapPositions.begin(), snapPositions.end());
     snapPositions.erase(std::unique(snapPositions.begin(), snapPositions.end()), snapPositions.end());
 
@@ -1222,7 +1317,8 @@ struct CompScrollerVisual : winrt::implements<
       restingValues.push_back(restingValue);
     }
 
-    if (m_snapToEnd) {
+    // Only add snapToEnd handling when NOT using pagingEnabled or snapToInterval (they already include end position)
+    if (m_snapToEnd && !m_pagingEnabled && m_snapToInterval <= 0.0f) {
       auto endRestingValue = TTypeRedirects::InteractionTrackerInertiaRestingValue::Create(compositor);
 
       // Create property sets to dynamically compute content - visual size
@@ -1286,6 +1382,10 @@ struct CompScrollerVisual : winrt::implements<
   bool m_horizontal{false};
   bool m_snapToStart{true};
   bool m_snapToEnd{true};
+  bool m_pagingEnabled{false};
+  float m_snapToInterval{0.0f};
+  winrt::Microsoft::ReactNative::Composition::Experimental::SnapPointsAlignment m_snapToAlignment{
+      winrt::Microsoft::ReactNative::Composition::Experimental::SnapPointsAlignment::Near};
   std::vector<float> m_snapToOffsets;
   bool m_inertia{false};
   bool m_custom{false};

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

@@ -35,26 +35,38 @@ struct ModalHostState
 struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::Foundation::IInspectable>,
                        ::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView> {
   ~ModalHostView() {
-    if (m_reactNativeIsland) {
-      m_reactNativeIsland.Island().Close();
-    }
+    if (m_popUp) {
+      // Unregister closing event handler
+      if (m_appWindow && m_appWindowClosingToken) {
+        m_appWindow.Closing(m_appWindowClosingToken);
+        m_appWindowClosingToken.value = 0;
+      }
 
-    // Add AppWindow closing token cleanup
-    if (m_appWindow && m_appWindowClosingToken) {
-      m_appWindow.Closing(m_appWindowClosingToken);
-      m_appWindowClosingToken.value = 0;
-    }
+      // Reset topWindowID before destroying
+      if (m_prevWindowID) {
+        winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+            m_reactContext.Properties().Handle(), m_prevWindowID);
+        m_prevWindowID = 0;
+      }
 
-    if (m_popUp) {
-      if (m_departFocusToken && !m_popUp.IsClosed()) {
-        // WASDK BUG: InputFocusNavigationHost::GetForSiteBridge fails on a DesktopPopupSiteBridge
-        // https://github.com/microsoft/react-native-windows/issues/14604
-        /*
-        auto navHost =
-        winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(m_popUp.as<winrt::Microsoft::UI::Content::IContentSiteBridge>());
-        navHost.DepartFocusRequested(m_departFocusToken);
-        */
+      // Close island
+      if (m_reactNativeIsland) {
+        m_reactNativeIsland.Island().Close();
+        m_reactNativeIsland = nullptr;
+      }
+
+      // Hide popup
+      if (m_popUp.IsVisible()) {
+        m_popUp.Hide();
+      }
+
+      // Destroy AppWindow this automatically resumes parent window to receive inputs
+      if (m_appWindow) {
+        m_appWindow.Destroy();
+        m_appWindow = nullptr;
       }
+
+      // Close bridge
       m_popUp.Close();
       m_popUp = nullptr;
     }
@@ -88,7 +100,7 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
         QueueShow(view);
       } else {
         m_visible = false;
-        CloseWindow();
+        HideWindow();
       }
     }
 
@@ -219,31 +231,27 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     }
   }
 
-  void CloseWindow() noexcept {
-    // enable input to parent before closing the modal window, so focus can return back to the parent window
-    EnableWindow(m_parentHwnd, true);
+  /*
+  HideWindow called on visible=false
+  unmounts the modal window using onDismiss event
+  */
+  void HideWindow() noexcept {
+    // Hide popup
     if (m_popUp) {
       m_popUp.Hide();
     }
 
-    // Unregister closing event handler
-    if (m_appWindow && m_appWindowClosingToken) {
-      m_appWindow.Closing(m_appWindowClosingToken);
-      m_appWindowClosingToken.value = 0;
+    // Restore message routing to parent
+    if (m_prevWindowID) {
+      winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+          m_reactContext.Properties().Handle(), m_prevWindowID);
     }
 
-    // dispatch onDismiss event
+    // Dispatch onDismiss event
     if (auto eventEmitter = EventEmitter()) {
       ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnDismiss eventArgs;
       eventEmitter->onDismiss(eventArgs);
     }
-
-    // reset the topWindowID
-    if (m_prevWindowID) {
-      winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
-          m_reactContext.Properties().Handle(), m_prevWindowID);
-      m_prevWindowID = 0;
-    }
   }
 
   // creates a new modal window

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

@@ -814,6 +814,25 @@ void ScrollViewComponentView::updateProps(
     }
     m_scrollVisual.SetSnapPoints(newViewProps.snapToStart, newViewProps.snapToEnd, snapToOffsets.GetView());
   }
+
+  if (!oldProps || oldViewProps.pagingEnabled != newViewProps.pagingEnabled) {
+    m_scrollVisual.PagingEnabled(newViewProps.pagingEnabled);
+  }
+
+  if (!oldProps || oldViewProps.snapToInterval != newViewProps.snapToInterval) {
+    m_scrollVisual.SnapToInterval(static_cast<float>(newViewProps.snapToInterval));
+  }
+
+  if (!oldProps || oldViewProps.snapToAlignment != newViewProps.snapToAlignment) {
+    using SnapPointsAlignment = winrt::Microsoft::ReactNative::Composition::Experimental::SnapPointsAlignment;
+    SnapPointsAlignment alignment = SnapPointsAlignment::Near; // default is "start"
+    if (newViewProps.snapToAlignment == facebook::react::ScrollViewSnapToAlignment::Center) {
+      alignment = SnapPointsAlignment::Center;
+    } else if (newViewProps.snapToAlignment == facebook::react::ScrollViewSnapToAlignment::End) {
+      alignment = SnapPointsAlignment::Far;
+    }
+    m_scrollVisual.SnapToAlignment(alignment);
+  }
 }
 
 void ScrollViewComponentView::updateState(

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

@@ -697,10 +697,17 @@ void WindowsTextInputComponentView::OnPointerPressed(
   }
 
   if (m_textServices && msg) {
-    LRESULT lresult;
-    DrawBlock db(*this);
-    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
-    args.Handled(hr != S_FALSE);
+    if (msg == WM_RBUTTONUP && !windowsTextInputProps().contextMenuHidden) {
+      ShowContextMenu(position);
+      args.Handled(true);
+    } else if (msg == WM_RBUTTONUP && windowsTextInputProps().contextMenuHidden) {
+      args.Handled(true);
+    } else {
+      LRESULT lresult;
+      DrawBlock db(*this);
+      auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
+      args.Handled(hr != S_FALSE);
+    }
   }
 
   // Emits the OnPressIn event
@@ -844,8 +851,8 @@ void WindowsTextInputComponentView::OnPointerWheelChanged(
 }
 void WindowsTextInputComponentView::OnKeyDown(
     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
-  // behavior We do forward Ctrl+Tab to the textinput.
+  // 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.Key() != winrt::Windows::System::VirtualKey::Tab ||
       (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down) {
@@ -872,8 +879,8 @@ void WindowsTextInputComponentView::OnKeyDown(
 
 void WindowsTextInputComponentView::OnKeyUp(
     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
-  // behavior We do forward Ctrl+Tab to the textinput.
+  // 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.Key() != winrt::Windows::System::VirtualKey::Tab ||
       (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down) {
@@ -943,8 +950,8 @@ bool WindowsTextInputComponentView::ShouldSubmit(
 
 void WindowsTextInputComponentView::OnCharacterReceived(
     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.
+  // 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') &&
       ((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
         winrt::Microsoft::UI::Input::VirtualKeyStates::Down) != winrt::Microsoft::UI::Input::VirtualKeyStates::Down)) {
@@ -1547,25 +1554,59 @@ void WindowsTextInputComponentView::UpdateParaFormat() noexcept {
   m_pf.dwMask = PFM_ALL;
 
   auto &textAlign = windowsTextInputProps().textAlign;
+  auto &baseWritingDirection = windowsTextInputProps().textAttributes.baseWritingDirection;
+
+  // Handle writingDirection (baseWritingDirection)
+  // For WritingDirection::Natural, use the computed layout direction from the layout tree
+  // since direction can be overridden at any point in the tree
+  bool isRTL = false;
+  if (baseWritingDirection.has_value()) {
+    if (*baseWritingDirection == facebook::react::WritingDirection::RightToLeft) {
+      isRTL = true;
+      m_pf.dwMask |= PFM_RTLPARA;
+      m_pf.wEffects |= PFE_RTLPARA;
+    } else if (*baseWritingDirection == facebook::react::WritingDirection::LeftToRight) {
+      isRTL = false;
+      // Ensure RTL flag is not set
+      m_pf.wEffects &= ~PFE_RTLPARA;
+    } else if (*baseWritingDirection == facebook::react::WritingDirection::Natural) {
+      // Natural uses the layout direction computed from the tree
+      isRTL = (layoutMetrics().layoutDirection == facebook::react::LayoutDirection::RightToLeft);
+      if (isRTL) {
+        m_pf.dwMask |= PFM_RTLPARA;
+        m_pf.wEffects |= PFE_RTLPARA;
+      } else {
+        m_pf.wEffects &= ~PFE_RTLPARA;
+      }
+    }
+  } else {
+    // No explicit writing direction set - use layout direction from tree
+    isRTL = (layoutMetrics().layoutDirection == facebook::react::LayoutDirection::RightToLeft);
+    if (isRTL) {
+      m_pf.dwMask |= PFM_RTLPARA;
+      m_pf.wEffects |= PFE_RTLPARA;
+    } else {
+      m_pf.wEffects &= ~PFE_RTLPARA;
+    }
+  }
 
+  // Handle textAlign
   if (textAlign == facebook::react::TextAlignment::Center) {
     m_pf.wAlignment = PFA_CENTER;
   } else if (textAlign == facebook::react::TextAlignment::Right) {
     m_pf.wAlignment = PFA_RIGHT;
+  } else if (textAlign == facebook::react::TextAlignment::Justified) {
+    m_pf.wAlignment = PFA_JUSTIFY;
+  } else if (textAlign == facebook::react::TextAlignment::Natural) {
+    // Natural alignment respects writing direction
+    m_pf.wAlignment = isRTL ? PFA_RIGHT : PFA_LEFT;
   } else {
+    // Default to left alignment
     m_pf.wAlignment = PFA_LEFT;
   }
 
   m_pf.cTabCount = 1;
   m_pf.rgxTabs[0] = lDefaultTab;
-
-  /*
-        if (m_spcontroller->IsCurrentReadingOrderRTL())
-        {
-                m_pf.dwMask |= PFM_RTLPARA;
-                m_pf.wEffects |= PFE_RTLPARA;
-        }
-  */
 }
 
 void WindowsTextInputComponentView::OnRenderingDeviceLost() noexcept {
@@ -1826,4 +1867,47 @@ void WindowsTextInputComponentView::updateSpellCheck(bool enable) noexcept {
   winrt::check_hresult(
       m_textServices->TxSendMessage(EM_SETLANGOPTIONS, IMF_SPELLCHECKING, enable ? newLangOptions : 0, &lresult));
 }
+
+void WindowsTextInputComponentView::ShowContextMenu(const winrt::Windows::Foundation::Point &position) noexcept {
+  HMENU menu = CreatePopupMenu();
+  if (!menu)
+    return;
+
+  CHARRANGE selection;
+  LRESULT res;
+  m_textServices->TxSendMessage(EM_EXGETSEL, 0, reinterpret_cast<LPARAM>(&selection), &res);
+
+  bool hasSelection = selection.cpMin != selection.cpMax;
+  bool isEmpty = GetTextFromRichEdit().empty();
+  bool isReadOnly = windowsTextInputProps().editable == false;
+  bool canPaste = !isReadOnly && IsClipboardFormatAvailable(CF_UNICODETEXT);
+
+  AppendMenuW(menu, MF_STRING | (hasSelection && !isReadOnly ? 0 : MF_GRAYED), 1, L"Cut");
+  AppendMenuW(menu, MF_STRING | (hasSelection ? 0 : MF_GRAYED), 2, L"Copy");
+  AppendMenuW(menu, MF_STRING | (canPaste ? 0 : MF_GRAYED), 3, L"Paste");
+  AppendMenuW(menu, MF_STRING | (!isEmpty && !isReadOnly ? 0 : MF_GRAYED), 4, L"Select All");
+
+  POINT cursorPos;
+  GetCursorPos(&cursorPos);
+
+  HWND hwnd = GetActiveWindow();
+
+  int cmd = TrackPopupMenu(
+      menu, TPM_LEFTALIGN | TPM_TOPALIGN | TPM_RETURNCMD | TPM_NONOTIFY, cursorPos.x, cursorPos.y, 0, hwnd, NULL);
+
+  if (cmd == 1) { // Cut
+    m_textServices->TxSendMessage(WM_CUT, 0, 0, &res);
+    OnTextUpdated();
+  } else if (cmd == 2) { // Copy
+    m_textServices->TxSendMessage(WM_COPY, 0, 0, &res);
+  } else if (cmd == 3) { // Paste
+    m_textServices->TxSendMessage(WM_PASTE, 0, 0, &res);
+    OnTextUpdated();
+  } else if (cmd == 4) { // Select All
+    m_textServices->TxSendMessage(EM_SETSEL, 0, -1, &res);
+  }
+
+  DestroyMenu(menu);
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -118,6 +118,7 @@ struct WindowsTextInputComponentView
   void updateLetterSpacing(float letterSpacing) noexcept;
   void updateAutoCorrect(bool value) noexcept;
   void updateSpellCheck(bool value) noexcept;
+  void ShowContextMenu(const winrt::Windows::Foundation::Point &position) noexcept;
 
   winrt::Windows::UI::Composition::CompositionSurfaceBrush m_brush{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::ICaretVisual m_caretVisual{nullptr};

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp

@@ -136,6 +136,25 @@ void WindowsTextLayoutManager::GetTextLayout(
         outerFragment.textAttributes.lineHeight * 0.8f));
   }
 
+  // Set reading direction (RTL/LTR) based on baseWritingDirection
+  // Only set reading direction if explicitly specified to avoid breaking existing layouts
+  bool isRTL = false;
+  if (outerFragment.textAttributes.baseWritingDirection.has_value()) {
+    DWRITE_READING_DIRECTION readingDirection = DWRITE_READING_DIRECTION_LEFT_TO_RIGHT;
+    if (*outerFragment.textAttributes.baseWritingDirection == facebook::react::WritingDirection::RightToLeft) {
+      readingDirection = DWRITE_READING_DIRECTION_RIGHT_TO_LEFT;
+      isRTL = true;
+    } else if (*outerFragment.textAttributes.baseWritingDirection == facebook::react::WritingDirection::LeftToRight) {
+      readingDirection = DWRITE_READING_DIRECTION_LEFT_TO_RIGHT;
+      isRTL = false;
+    } else if (*outerFragment.textAttributes.baseWritingDirection == facebook::react::WritingDirection::Natural) {
+      // Natural uses the layout direction from textAttributes
+      isRTL = (outerFragment.textAttributes.layoutDirection == facebook::react::LayoutDirection::RightToLeft);
+      readingDirection = isRTL ? DWRITE_READING_DIRECTION_RIGHT_TO_LEFT : DWRITE_READING_DIRECTION_LEFT_TO_RIGHT;
+    }
+    winrt::check_hresult(spTextFormat->SetReadingDirection(readingDirection));
+  }
+
   // Set text alignment
   DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
   if (outerFragment.textAttributes.alignment) {
@@ -152,9 +171,9 @@ void WindowsTextLayoutManager::GetTextLayout(
       case facebook::react::TextAlignment::Right:
         alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
         break;
-      // TODO use LTR values
       case facebook::react::TextAlignment::Natural:
-        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        // Natural alignment respects reading direction if baseWritingDirection was set
+        alignment = isRTL ? DWRITE_TEXT_ALIGNMENT_TRAILING : DWRITE_TEXT_ALIGNMENT_LEADING;
         break;
       default:
         assert(false);

package/Microsoft.ReactNative/ReactHost/ReactHost.cpp

@@ -326,10 +326,32 @@ class ReactInspectorHostTargetDelegate : public jsinspector_modern::HostTargetDe
   ReactInspectorHostTargetDelegate(Mso::WeakPtr<ReactHost> &&reactHost) noexcept : m_reactHost(std::move(reactHost)) {}
 
   jsinspector_modern::HostTargetMetadata getMetadata() override {
-    // TODO: (vmoroz) provide more info
-    return {
-        .integrationName = "React Native Windows (Host)",
-    };
+    jsinspector_modern::HostTargetMetadata metadata{};
+    metadata.integrationName = "React Native Windows (Host)";
+    metadata.platform = "windows";
+
+    if (Mso::CntPtr<ReactHost> reactHost = m_reactHost.GetStrongPtr()) {
+      const ReactOptions &options = reactHost->Options();
+      if (!options.Identity.empty()) {
+        std::string identity = options.Identity;
+        // Replace illegal characters with underscore
+        for (char &c : identity) {
+          if (c == '\\' || c == '/' || c == ':' || c == '*' || c == '?' || c == '"' || c == '<' || c == '>' ||
+              c == '|') {
+            c = '_';
+          }
+        }
+        metadata.appDisplayName = identity;
+      }
+    }
+
+    wchar_t computerName[MAX_COMPUTERNAME_LENGTH + 1];
+    DWORD size = MAX_COMPUTERNAME_LENGTH + 1;
+    if (GetComputerNameW(computerName, &size)) {
+      metadata.deviceName = winrt::to_string(computerName);
+    }
+
+    return metadata;
   }
 
   void onReload(jsinspector_modern::HostTargetDelegate::PageReloadRequest const &request) override {
@@ -630,9 +652,20 @@ void ReactHost::AddInspectorPage() noexcept {
   jsinspector_modern::InspectorTargetCapabilities capabilities;
   capabilities.nativePageReloads = true;
   capabilities.prefersFuseboxFrontend = true;
-  // TODO: (vmoroz) improve the page name
+
+  auto metadata = m_inspectorHostTargetDelegate->getMetadata();
+  std::string pageName;
+  if (metadata.appDisplayName.has_value() && !metadata.appDisplayName.value().empty()) {
+    pageName = metadata.appDisplayName.value();
+  } else {
+    pageName = "React Native Windows (Experimental)";
+  }
+  if (metadata.deviceName.has_value() && !metadata.deviceName.value().empty()) {
+    pageName += " (" + metadata.deviceName.value() + ")";
+  }
+
   inspectorPageId = jsinspector_modern::getInspectorInstance().addPage(
-      "React Native Windows (Experimental)",
+      pageName,
       "Hermes",
       [weakInspectorHostTarget =
            std::weak_ptr(m_inspectorHostTarget)](std::unique_ptr<jsinspector_modern::IRemoteConnection> remote)

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.81.0-preview.1</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.81.0-preview.4</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>81</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>
     <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>c90943314678ce91d624ceba523e50f8d35a5ea5</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCommitId>a999c767d29d998a9b7792f8dd1b28242f1395dc</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.81.0-preview.1",
+  "version": "0.81.0-preview.4",
   "license": "MIT",
   "repository": {
     "type": "git",

package/template/metro.config.js

@@ -2,8 +2,6 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
 const fs = require('fs');
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
@@ -25,7 +23,7 @@ const config = {
   watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
   // devMode]{{/devMode}}
   resolver: {
-    blockList: exclusionList([
+    blockList: [
       // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
@@ -34,7 +32,7 @@ const config = {
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,
-    ]),
+    ],
     //{{#devMode}} [devMode
     extraNodeModules: {
       'react-native-windows': rnwPath,

package/templates/cpp-app/metro.config.js

@@ -2,8 +2,6 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
 const fs = require('fs');
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
@@ -25,7 +23,7 @@ const config = {
   watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
   // devMode]{{/devMode}}
   resolver: {
-    blockList: exclusionList([
+    blockList: [
       // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
@@ -34,7 +32,7 @@ const config = {
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,
-    ]),
+    ],
     //{{#devMode}} [devMode
     extraNodeModules: {
       'react-native-windows': rnwPath,

package/templates/cpp-lib/example/metro.config.js

@@ -2,7 +2,6 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const fs = require('fs');
 const path = require('path');
 const escape = require('escape-string-regexp');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
 const pack = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
@@ -33,7 +32,7 @@ const config = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we block them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blockList: exclusionList(
+    blockList: 
       modules.map(
         (m) =>
           new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
@@ -47,7 +46,7 @@ const config = {
         new RegExp(`${rnwPath}/target/.*`),
         /.*\.ProjectImports\.zip/,
       ])
-    ),
+    ,
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);