react-native-windows 0.76.8 → 0.76.9

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -235,6 +235,13 @@ class TouchableOpacity extends React.Component<Props, State> {
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+      readOnly:
+        this.props['aria-readonly'] ?? this.props.accessibilityState?.readOnly, // Windows
+      multiselectable:
+        this.props['aria-multiselectable'] ??
+        this.props.accessibilityState?.multiselectable, // Windows
+      required:
+        this.props['aria-required'] ?? this.props.accessibilityState?.required, // Windows
     };
 
     _accessibilityState =

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -59,6 +59,9 @@ type Props = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
+  'aria-multiselectable'?: ?boolean, // Windows
+  'aria-required'?: ?boolean, // Windows
   'aria-hidden'?: ?boolean,
   'aria-live'?: ?('polite' | 'assertive' | 'off'),
   'aria-label'?: ?Stringish,
@@ -221,6 +224,11 @@ const TouchableWithoutFeedback: React.AbstractComponent<
     disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
     expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
     selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+    readonly: props['aria-readonly'] ?? props.accessibilityState?.readOnly, // Windows
+    multiselectable:
+      props['aria-multiselectable'] ??
+      props.accessibilityState?.multiselectable, // Windows
+    required: props['aria-required'] ?? props.accessibilityState?.required, // Windows
   };
 
   // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before

package/Libraries/Components/View/View.windows.js

@@ -76,12 +76,15 @@ const View: React.AbstractComponent<
       'aria-checked': ariaChecked,
       'aria-disabled': ariaDisabled,
       'aria-expanded': ariaExpanded,
+      'aria-multiselectable': ariaMultiselectable, // Windows
+      'aria-required': ariaRequired, // Windows
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
       'aria-level': ariaLevel,
       'aria-live': ariaLive,
       'aria-posinset': ariaPosinset, // Windows
+      'aria-readonly': ariaReadOnly, // Windows
       'aria-selected': ariaSelected,
       'aria-setsize': ariaSetsize, // Windows
       'aria-valuemax': ariaValueMax,
@@ -108,7 +111,10 @@ const View: React.AbstractComponent<
       ariaChecked != null ||
       ariaDisabled != null ||
       ariaExpanded != null ||
-      ariaSelected != null
+      ariaSelected != null ||
+      ariaReadOnly != null || // Windows
+      ariaMultiselectable != null || // Windows
+      ariaRequired != null // Windows
     ) {
       _accessibilityState = {
         busy: ariaBusy ?? accessibilityState?.busy,
@@ -116,6 +122,10 @@ const View: React.AbstractComponent<
         disabled: ariaDisabled ?? accessibilityState?.disabled,
         expanded: ariaExpanded ?? accessibilityState?.expanded,
         selected: ariaSelected ?? accessibilityState?.selected,
+        readOnly: ariaReadOnly ?? accessibilityState?.readOnly, // Windows
+        multiselectable:
+          ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
+        required: ariaRequired ?? accessibilityState?.required, // Windows
       };
     }
     let _accessibilityValue;

package/Libraries/Components/View/ViewAccessibility.d.ts

@@ -183,6 +183,21 @@ export interface AccessibilityState {
    *  When present, informs accessible tools the element is expanded or collapsed
    */
   expanded?: boolean | undefined;
+  /**
+   *  When present, informs accessible tools the element is read only
+   *  @platform windows
+   */
+  readOnly?: boolean | undefined;
+  /**
+   *  When present, informs accessible tools the element can have multiple items selected
+   *  @platform windows
+   */
+  multiselectable?: boolean | undefined;
+  /**
+   *  When present, informs accessible tools the element requires selection
+   *  @platform windows
+   */
+  required?: boolean | undefined;
 }
 
 export interface AccessibilityValue {

package/Libraries/Components/View/ViewAccessibility.windows.js

@@ -181,6 +181,9 @@ export type AccessibilityState = {
   checked?: ?boolean | 'mixed',
   busy?: ?boolean,
   expanded?: ?boolean,
+  readOnly?: ?boolean, // Windows
+  multiselectable?: ?boolean, // Windows
+  required?: ?boolean, // Windows
   ...
 };
 

package/Libraries/Components/View/ViewPropTypes.windows.js

@@ -620,12 +620,15 @@ export type ViewProps = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
   /** A value indicating whether the accessibility elements contained within
    * this accessibility element are hidden.
    *
    * See https://reactnative.dev/docs/view#aria-hidden
    */
   'aria-hidden'?: ?boolean,
+  'aria-multiselectable'?: ?boolean, // Windows
+  'aria-required'?: ?boolean, // Windows
 
   /**
    * Views that are only used to layout their children or otherwise don't draw

package/Libraries/Image/Image.windows.js

@@ -147,6 +147,9 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-readonly': ariaReadOnly, // Windows
+    'aria-multiselectable': ariaMultiselectable, // Windows
+    'aria-required': ariaRequired, // Windows
     height,
     src,
     width,
@@ -159,6 +162,10 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     disabled: ariaDisabled ?? props.accessibilityState?.disabled,
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
     selected: ariaSelected ?? props.accessibilityState?.selected,
+    readOnly: ariaReadOnly ?? props.accessibilityState?.readOnly, // Windows
+    multiselectable:
+      ariaMultiselectable ?? props.accessibilityState?.multiselectable, // Windows
+    required: ariaRequired ?? props.accessibilityState?.required, // Windows
   };
   const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 

package/Libraries/Modal/Modal.windows.js

@@ -274,8 +274,11 @@ class Modal extends React.Component<Props, State> {
       }
     }
 
+    // [Windows] - apply empty rootViewStyle to AppContainer to prevent modal from always expanding to fill available space
     const innerChildren = __DEV__ ? (
-      <AppContainer rootTag={this.context}>{this.props.children}</AppContainer>
+      <AppContainer rootTag={this.context} rootViewStyle={{}}>
+        {this.props.children}
+      </AppContainer>
     ) : (
       this.props.children
     );

package/Libraries/Text/Text.windows.js

@@ -51,11 +51,14 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
         'aria-checked': ariaChecked,
         'aria-disabled': ariaDisabled,
         'aria-expanded': ariaExpanded,
+        'aria-multiselectable': ariaMultiselectable, // Windows
+        'aria-required': ariaRequired, // Windows
         'aria-label': ariaLabel,
         'aria-level': ariaLevel, // Windows
         'aria-posinset': ariaPosinset, // Windows
         'aria-setsize': ariaSetsize, // Windows
         'aria-selected': ariaSelected,
+        'aria-readonly': ariaReadOnly, //Windows
         children,
         ellipsizeMode,
         disabled,
@@ -93,7 +96,10 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
         ariaChecked != null ||
         ariaDisabled != null ||
         ariaExpanded != null ||
-        ariaSelected != null
+        ariaSelected != null ||
+        ariaReadOnly != null || // Windows
+        ariaMultiselectable != null || // Windows
+        ariaRequired != null // Windows
       ) {
         if (_accessibilityState != null) {
           _accessibilityState = {
@@ -102,6 +108,10 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             disabled: ariaDisabled ?? _accessibilityState.disabled,
             expanded: ariaExpanded ?? _accessibilityState.expanded,
             selected: ariaSelected ?? _accessibilityState.selected,
+            readOnly: ariaReadOnly ?? _accessibilityState.readOnly, // Windows
+            multiselectable:
+              ariaMultiselectable ?? _accessibilityState.multiselectable, // Windows
+            required: ariaRequired ?? _accessibilityState.required, // Windows
           };
         } else {
           _accessibilityState = {
@@ -110,6 +120,9 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             disabled: ariaDisabled,
             expanded: ariaExpanded,
             selected: ariaSelected,
+            readOnly: ariaReadOnly, // Windows
+            multiselectable: ariaMultiselectable, // Windows
+            required: ariaRequired, // Windows
           };
         }
       }

package/Libraries/Text/TextProps.windows.js

@@ -97,6 +97,9 @@ export type TextProps = $ReadOnly<{
   'aria-posinset'?: ?number, // Windows
   'aria-setsize'?: ?number, // Windows
   'aria-level'?: ?number, // Windows
+  'aria-readonly'?: ?boolean, // Windows
+  'aria-multiselectable'?: ?boolean, // Windows
+  'aria-required'?: ?boolean, // Windows
 
   /**
    * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -7,6 +7,7 @@ import "ViewProps.idl";
 import "Composition.Input.idl";
 import "CompositionSwitcher.idl";
 import "IReactContext.idl";
+import "ReactNativeIsland.idl";
 
 #include "DocString.h"
 
@@ -110,8 +111,19 @@ namespace Microsoft.ReactNative.Composition
   [default_interface]
   runtimeclass RootComponentView : ViewComponentView {
     Microsoft.ReactNative.ComponentView GetFocusedComponent();
+    Microsoft.ReactNative.ReactNativeIsland ReactNativeIsland { get; };
+    DOC_STRING("Is non-null if this RootComponentView is the content of a portal")
+    PortalComponentView Portal { get; };
   };
-  
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  DOC_STRING("Used to implement UI that is hosted outside the main UI tree, such as modal.")
+  runtimeclass PortalComponentView : Microsoft.ReactNative.ComponentView {
+    RootComponentView ContentRoot { get; };
+  };
+
   [experimental]
   [webhosthidden]
   [default_interface]

package/Microsoft.ReactNative/Fabric/AbiPortalShadowNode.cpp

@@ -0,0 +1,97 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "AbiPortalShadowNode.h"
+
+#include <Fabric/Composition/ReactCompositionViewComponentBuilder.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/core/conversions.h>
+
+#include <utility>
+
+namespace Microsoft::ReactNative {
+
+extern const char AbiPortalComponentName[] = "AbiPortal";
+
+facebook::react::Size AbiPortalShadowNode::measureContent(
+    const facebook::react::LayoutContext &layoutContext,
+    const facebook::react::LayoutConstraints &layoutConstraints) const {
+  return {0, 0}; // The portal placeholder node shouldn't take up any space
+}
+
+void AbiPortalShadowNode::layout(facebook::react::LayoutContext layoutContext) {
+  ensureUnsealed();
+  auto layoutMetrics = getLayoutMetrics();
+
+  auto portalOwningShadowNode = ShadowNode::Unshared{};
+
+  if (getChildren().empty()) {
+    return;
+  }
+
+  // A Portal should only have a single child
+  react_native_assert(getChildren().size() == 1);
+
+  const auto &childNode = getChildren()[0];
+
+  auto clonedShadowNode = ShadowNode::Unshared{};
+
+  portalOwningShadowNode = cloneTree(childNode->getFamily(), [&](const ShadowNode &oldShadowNode) {
+    clonedShadowNode = oldShadowNode.clone({});
+    return clonedShadowNode;
+  });
+  auto portalShadowNode = static_cast<AbiPortalShadowNode *>(portalOwningShadowNode.get());
+
+  auto &layoutableShadowNode = dynamic_cast<LayoutableShadowNode &>(*clonedShadowNode);
+
+  auto &state = getStateData();
+
+  facebook::react::LayoutConstraints layoutConstraints;
+  layoutConstraints.layoutDirection = layoutMetrics.layoutDirection;
+
+  if (state.userdata) {
+    // If the portal component set a state of type IPortalStateData,
+    // extract constraint information from it, and use that for layout
+    if (auto portalState = state.userdata.try_as<winrt::Microsoft::ReactNative::Composition::IPortalStateData>()) {
+      auto stateConstraints = portalState.LayoutConstraints();
+
+      layoutConstraints.minimumSize = {stateConstraints.MinimumSize.Width, stateConstraints.MinimumSize.Height};
+      layoutConstraints.maximumSize = {stateConstraints.MaximumSize.Width, stateConstraints.MaximumSize.Height};
+      if (stateConstraints.LayoutDirection == winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight) {
+        layoutConstraints.layoutDirection = facebook::react::LayoutDirection::LeftToRight;
+      } else if (stateConstraints.LayoutDirection == winrt::Microsoft::ReactNative::LayoutDirection::RightToLeft) {
+        layoutConstraints.layoutDirection = facebook::react::LayoutDirection::RightToLeft;
+      }
+    }
+  }
+
+  // Laying out the `ShadowNode` and the subtree starting from it.
+  layoutableShadowNode.layoutTree(layoutContext, layoutConstraints);
+
+  auto childLayoutMetrics = layoutableShadowNode.getLayoutMetrics();
+  childLayoutMetrics.frame.origin = {0, 0};
+  layoutableShadowNode.setLayoutMetrics(childLayoutMetrics);
+
+  // Update the list of children to reflect the changes that we made.
+  this->children_ = static_cast<AbiPortalShadowNode *>(portalOwningShadowNode.get())->children_;
+}
+
+void AbiPortalShadowNode::Builder(winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept {
+  m_builder = builder;
+}
+
+winrt::Microsoft::ReactNative::IReactViewComponentBuilder AbiPortalShadowNode::Builder() const noexcept {
+  return m_builder;
+}
+
+void AbiPortalShadowNode::Proxy(winrt::Microsoft::ReactNative::ShadowNode proxy) noexcept {
+  m_proxy = proxy;
+}
+
+winrt::Microsoft::ReactNative::ShadowNode AbiPortalShadowNode::Proxy() const noexcept {
+  return m_proxy;
+}
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/AbiPortalShadowNode.h

@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <react/components/rnwcore/EventEmitters.h>
+#include <unordered_map>
+#include "AbiShadowNode.h"
+#include "AbiState.h"
+#include "AbiViewProps.h"
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace Microsoft::ReactNative {
+
+extern const char AbiPortalComponentName[];
+
+class AbiPortalShadowNode final : public facebook::react::ConcreteViewShadowNode<
+                                      AbiPortalComponentName,
+                                      AbiViewProps,
+                                      facebook::react::ViewEventEmitter,
+                                      Microsoft::ReactNative::AbiStateData> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static facebook::react::ShadowNodeTraits BaseTraits() {
+    auto traits = facebook::react::ShadowNode::BaseTraits();
+    traits.set(facebook::react::ShadowNodeTraits::Trait::FormsStackingContext);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::FormsView);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::RootNodeKind);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  facebook::react::Size measureContent(
+      const facebook::react::LayoutContext &layoutContext,
+      const facebook::react::LayoutConstraints &layoutConstraints) const override;
+  void layout(facebook::react::LayoutContext layoutContext) override;
+
+  void OnClone(const facebook::react::ShadowNode &sourceShadowNode) noexcept;
+  void Builder(winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept;
+  winrt::Microsoft::ReactNative::IReactViewComponentBuilder Builder() const noexcept;
+  void Proxy(winrt::Microsoft::ReactNative::ShadowNode handle) noexcept;
+  winrt::Microsoft::ReactNative::ShadowNode Proxy() const noexcept;
+
+ private:
+  winrt::Microsoft::ReactNative::ShadowNode m_proxy{nullptr};
+  winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder{nullptr};
+};
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h

@@ -3,16 +3,22 @@
 
 #pragma once
 
+#include <Fabric/Composition/ReactCompositionViewComponentBuilder.h>
+#include <Fabric/WindowsComponentDescriptorRegistry.h>
+#include <ReactContext.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 #include <react/renderer/core/ComponentDescriptor.h>
+#include "AbiPortalShadowNode.h"
 #include "AbiViewProps.h"
 #include "AbiViewShadowNode.h"
+#include "DynamicReader.h"
 #include "winrt/Microsoft.ReactNative.h"
 
 namespace Microsoft::ReactNative {
 
-class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
-  using ShadowNodeT = AbiViewShadowNode;
+template <typename ShadowNodeT>
+class ConcreteAbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
+ protected:
   using SharedShadowNodeT = std::shared_ptr<const ShadowNodeT>;
 
  public:
@@ -24,34 +30,142 @@ class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
   using ConcreteState = typename ShadowNodeT::ConcreteState;
   using ConcreteStateData = typename ShadowNodeT::ConcreteState::Data;
 
-  AbiViewComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters);
+  ConcreteAbiViewComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters)
+      : ComponentDescriptor(parameters) {
+    auto flavor = std::static_pointer_cast<std::string const>(this->flavor_);
+    m_builder = WindowsComponentDescriptorRegistry::FromProperties(
+                    parameters.contextContainer->at<winrt::Microsoft::ReactNative::ReactContext>("MSRN.ReactContext")
+                        .Properties())
+                    ->GetDescriptor(flavor);
+
+    rawPropsParser_.prepare<ConcreteProps>();
+  }
+  facebook::react::ComponentHandle getComponentHandle() const override {
+    return reinterpret_cast<facebook::react::ComponentHandle>(getComponentName());
+  }
+
+  facebook::react::ComponentName getComponentName() const override {
+    return std::static_pointer_cast<std::string const>(this->flavor_)->c_str();
+  }
+
+  facebook::react::ShadowNodeTraits getTraits() const override {
+    auto traits = ShadowNodeT::BaseTraits();
+    if (winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+            ->MeasureContentHandler()) {
+      traits.set(facebook::react::ShadowNodeTraits::LeafYogaNode);
+      traits.set(facebook::react::ShadowNodeTraits::MeasurableYogaNode);
+    }
+    return traits;
+  }
 
-  facebook::react::ComponentHandle getComponentHandle() const override;
-  facebook::react::ComponentName getComponentName() const override;
-  facebook::react::ShadowNodeTraits getTraits() const override;
   std::shared_ptr<facebook::react::ShadowNode> createShadowNode(
       const facebook::react::ShadowNodeFragment &fragment,
-      facebook::react::ShadowNodeFamily::Shared const &family) const override;
+      facebook::react::ShadowNodeFamily::Shared const &family) const override {
+    auto shadowNode = std::make_shared<ShadowNodeT>(fragment, family, getTraits());
+    shadowNode->Proxy(winrt::make<winrt::Microsoft::ReactNative::implementation::YogaLayoutableShadowNode>(shadowNode));
+    winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+        ->CreateShadowNode(shadowNode->Proxy());
+
+    adopt(*shadowNode);
+    return shadowNode;
+  }
+
   facebook::react::ShadowNode::Unshared cloneShadowNode(
       const facebook::react::ShadowNode &sourceShadowNode,
-      const facebook::react::ShadowNodeFragment &fragment) const override;
+      const facebook::react::ShadowNodeFragment &fragment) const override {
+    auto shadowNode = std::make_shared<ShadowNodeT>(sourceShadowNode, fragment);
+    shadowNode->Proxy(winrt::make<winrt::Microsoft::ReactNative::implementation::YogaLayoutableShadowNode>(shadowNode));
+    winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+        ->CloneShadowNode(shadowNode->Proxy(), static_cast<const ShadowNodeT &>(sourceShadowNode).Proxy());
+
+    adopt(*shadowNode);
+    return shadowNode;
+  }
 
   void appendChild(
       const facebook::react::ShadowNode::Shared &parentShadowNode,
-      const facebook::react::ShadowNode::Shared &childShadowNode) const override;
+      const facebook::react::ShadowNode::Shared &childShadowNode) const override {
+    auto concreteParentShadowNode = std::static_pointer_cast<const ShadowNodeT>(parentShadowNode);
+    auto concreteNonConstParentShadowNode = std::const_pointer_cast<ShadowNodeT>(concreteParentShadowNode);
+    concreteNonConstParentShadowNode->appendChild(childShadowNode);
+  }
+
   virtual facebook::react::Props::Shared cloneProps(
       const facebook::react::PropsParserContext &context,
       const facebook::react::Props::Shared &props,
-      facebook::react::RawProps rawProps) const override;
+      facebook::react::RawProps rawProps) const override {
+    // Optimization:
+    // Quite often nodes are constructed with default/empty props: the base
+    // `props` object is `null` (there no base because it's not cloning) and the
+    // `rawProps` is empty. In this case, we can return the default props object
+    // of a concrete type entirely bypassing parsing.
+    if (!props && rawProps.isEmpty()) {
+      return ShadowNodeT::defaultSharedProps();
+    }
+
+    if constexpr (facebook::react::RawPropsFilterable<ShadowNodeT>) {
+      ShadowNodeT::filterRawProps(rawProps);
+    }
+
+    rawProps.parse(rawPropsParser_);
+
+    // Call old-style constructor
+    // auto shadowNodeProps = std::make_shared<ShadowNodeT::Props>(context, rawProps, props);
+    auto shadowNodeProps = std::make_shared<AbiViewProps>(
+        context, props ? static_cast<AbiViewProps const &>(*props) : *ShadowNodeT::defaultSharedProps(), rawProps);
+    auto viewProps =
+        winrt::make<winrt::Microsoft::ReactNative::implementation::ViewProps>(shadowNodeProps, false /*holdRef*/);
+    auto userProps =
+        winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+            ->CreateProps(viewProps, props ? static_cast<AbiViewProps const &>(*props).UserProps() : nullptr);
+    shadowNodeProps->SetUserProps(userProps, viewProps);
+
+    const auto &dynamic = static_cast<folly::dynamic>(rawProps);
+    for (const auto &pair : dynamic.items()) {
+      const auto &propName = pair.first.getString();
+      auto hash = RAW_PROPS_KEY_HASH(propName);
+      shadowNodeProps.get()->setProp(context, hash, propName.c_str(), facebook::react::RawValue(pair.second));
+      userProps.SetProp(
+          hash, winrt::to_hstring(propName), winrt::make<winrt::Microsoft::ReactNative::DynamicReader>(pair.second));
+    }
+    return shadowNodeProps;
+  }
+
   virtual facebook::react::State::Shared createInitialState(
       facebook::react::Props::Shared const &props,
-      facebook::react::ShadowNodeFamily::Shared const &family) const override;
+      facebook::react::ShadowNodeFamily::Shared const &family) const override {
+    if (std::is_same<ConcreteStateData, facebook::react::StateData>::value) {
+      // Default case: Returning `null` for nodes that don't use `State`.
+      return nullptr;
+    }
+
+    return std::make_shared<ConcreteState>(
+        std::make_shared<ConcreteStateData const>(
+            ConcreteAbiViewComponentDescriptor<ShadowNodeT>::initialStateData(props, family, *this)),
+        family);
+  }
+
   virtual facebook::react::State::Shared createState(
       facebook::react::ShadowNodeFamily const &family,
-      facebook::react::StateData::Shared const &data) const override;
+      facebook::react::StateData::Shared const &data) const override {
+    if (std::is_same<ConcreteStateData, facebook::react::StateData>::value) {
+      // Default case: Returning `null` for nodes that don't use `State`.
+      return nullptr;
+    }
+
+    react_native_assert(data && "Provided `data` is nullptr.");
+
+    return std::make_shared<ConcreteState const>(
+        std::static_pointer_cast<ConcreteStateData const>(data), *family.getMostRecentState());
+  }
 
   facebook::react::ShadowNodeFamily::Shared createFamily(
-      facebook::react::ShadowNodeFamilyFragment const &fragment) const override;
+      facebook::react::ShadowNodeFamilyFragment const &fragment) const override {
+    auto eventEmitter = std::make_shared<const ConcreteEventEmitter>(
+        std::make_shared<facebook::react::EventTarget>(fragment.instanceHandle, fragment.surfaceId), eventDispatcher_);
+    return std::make_shared<facebook::react::ShadowNodeFamily>(
+        fragment, std::move(eventEmitter), eventDispatcher_, *this);
+  }
 
  protected:
   /*
@@ -66,15 +180,44 @@ class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
    *   - Set `ShadowNode`'s size from state in
    * `ModalHostViewComponentDescriptor`.
    */
-  virtual void adopt(facebook::react::ShadowNode &shadowNode) const;
+  virtual void adopt(facebook::react::ShadowNode &shadowNode) const {
+    react_native_assert(shadowNode.getComponentHandle() == getComponentHandle());
+
+    auto &abiViewShadowNode = static_cast<AbiViewShadowNode &>(shadowNode);
+
+    abiViewShadowNode.Builder(m_builder);
+
+    if (winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+            ->MeasureContentHandler()) {
+      abiViewShadowNode.dirtyLayout();
+      abiViewShadowNode.enableMeasurement();
+    }
+  }
 
  private:
   static ConcreteStateData initialStateData(
-      const facebook::react::Props::Shared & /*props*/,
+      const facebook::react::Props::Shared &props,
       const facebook::react::ShadowNodeFamily::Shared & /*family*/,
-      const facebook::react::ComponentDescriptor & /*componentDescriptor*/) noexcept;
+      const facebook::react::ComponentDescriptor &componentDescriptor) noexcept {
+    return {winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(
+                static_cast<const ConcreteAbiViewComponentDescriptor<ShadowNodeT> &>(componentDescriptor).m_builder)
+                ->InitialStateData(std::static_pointer_cast<AbiViewProps const>(props)->UserProps())};
+    return {};
+  }
 
-  winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder;
+  winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder{nullptr};
+};
+
+class AbiViewComponentDescriptor : public ConcreteAbiViewComponentDescriptor<AbiViewShadowNode> {
+ public:
+  AbiViewComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters)
+      : ConcreteAbiViewComponentDescriptor<AbiViewShadowNode>(parameters) {}
+};
+
+class AbiPortalComponentDescriptor : public ConcreteAbiViewComponentDescriptor<AbiPortalShadowNode> {
+ public:
+  AbiPortalComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters)
+      : ConcreteAbiViewComponentDescriptor<AbiPortalShadowNode>(parameters) {}
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/AbiViewProps.cpp

@@ -77,14 +77,12 @@ winrt::Microsoft::ReactNative::Color Color::ReadValue(
   switch (reader.ValueType()) {
     case JSValueType::Int64: {
       auto argb = reader.GetInt64();
-      return winrt::make<Color>(facebook::react::Color{
-          /*m_isDefined*/ true,
-          /*color*/
-          {static_cast<uint8_t>((argb >> 24) & 0xFF),
-           static_cast<uint8_t>((argb >> 16) & 0xFF),
-           static_cast<uint8_t>((argb >> 8) & 0xFF),
-           static_cast<uint8_t>(argb & 0xFF)},
-          {}});
+      return winrt::make<Color>(facebook::react::Color{/*color*/
+                                                       {static_cast<uint8_t>((argb >> 24) & 0xFF),
+                                                        static_cast<uint8_t>((argb >> 16) & 0xFF),
+                                                        static_cast<uint8_t>((argb >> 8) & 0xFF),
+                                                        static_cast<uint8_t>(argb & 0xFF)},
+                                                       {}});
     }
     case JSValueType::Object: {
       std::vector<std::string> platformColors;
@@ -96,10 +94,10 @@ winrt::Microsoft::ReactNative::Color Color::ReadValue(
           SkipValue<JSValue>(reader); // Skip this property
         }
       }
-      return winrt::make<Color>(facebook::react::Color{/*m_isDefined*/ true, /*color*/ {}, std::move(platformColors)});
+      return winrt::make<Color>(facebook::react::Color{/*color*/ {}, std::move(platformColors)});
     }
     default:
-      return winrt::make<Color>(facebook::react::Color{/*m_isDefined*/ false, /*color*/ {0, 0, 0, 0}, {}});
+      return winrt::make<Color>(facebook::react::Color{/*color*/ {0, 0, 0, 0}, {}});
   }
 }