react-native-windows 0.75.9 → 0.75.11

package/Libraries/Modal/Modal.windows.js

@@ -0,0 +1,352 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {RootTag} from '../ReactNative/RootTag';
+import type {DirectEventHandler} from '../Types/CodegenTypes';
+
+import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import {type EventSubscription} from '../vendor/emitter/EventEmitter';
+import ModalInjection from './ModalInjection';
+import NativeModalManager from './NativeModalManager';
+import RCTModalHostView from './RCTModalHostViewNativeComponent';
+import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
+
+const ScrollView = require('../Components/ScrollView/ScrollView');
+const View = require('../Components/View/View');
+const AppContainer = require('../ReactNative/AppContainer');
+const I18nManager = require('../ReactNative/I18nManager');
+const {RootTagContext} = require('../ReactNative/RootTag');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Platform = require('../Utilities/Platform');
+const React = require('react');
+
+type ModalEventDefinitions = {
+  modalDismissed: [{modalID: number}],
+};
+
+const ModalEventEmitter =
+  (Platform.OS === 'ios' || Platform.OS === 'windows') && // [Windows]
+  NativeModalManager != null
+    ? new NativeEventEmitter<ModalEventDefinitions>(
+        // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+        // If you want to use the native module on other platforms, please remove this condition and test its behavior
+        Platform.OS !== 'ios' && Platform.OS !== 'windows' // [Windows]
+          ? null
+          : NativeModalManager,
+      )
+    : null;
+
+/**
+ * The Modal component is a simple way to present content above an enclosing view.
+ *
+ * See https://reactnative.dev/docs/modal
+ */
+
+// In order to route onDismiss callbacks, we need to uniquely identifier each
+// <Modal> on screen. There can be different ones, either nested or as siblings.
+// We cannot pass the onDismiss callback to native as the view will be
+// destroyed before the callback is fired.
+let uniqueModalIdentifier = 0;
+
+type OrientationChangeEvent = $ReadOnly<{|
+  orientation: 'portrait' | 'landscape',
+|}>;
+
+export type Props = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+   * The `animationType` prop controls how the modal animates.
+   *
+   * See https://reactnative.dev/docs/modal#animationtype
+   */
+  animationType?: ?('none' | 'slide' | 'fade'),
+
+  /**
+   * The `presentationStyle` prop controls how the modal appears.
+   *
+   * See https://reactnative.dev/docs/modal#presentationstyle
+   */
+  presentationStyle?: ?(
+    | 'fullScreen'
+    | 'pageSheet'
+    | 'formSheet'
+    | 'overFullScreen'
+  ),
+
+  /**
+   * The `transparent` prop determines whether your modal will fill the
+   * entire view.
+   *
+   * See https://reactnative.dev/docs/modal#transparent
+   */
+  transparent?: ?boolean,
+
+  /**
+   * The `statusBarTranslucent` prop determines whether your modal should go under
+   * the system statusbar.
+   *
+   * See https://reactnative.dev/docs/modal.html#statusbartranslucent-android
+   */
+  statusBarTranslucent?: ?boolean,
+
+  /**
+   * The `hardwareAccelerated` prop controls whether to force hardware
+   * acceleration for the underlying window.
+   *
+   * This prop works only on Android.
+   *
+   * See https://reactnative.dev/docs/modal#hardwareaccelerated
+   */
+  hardwareAccelerated?: ?boolean,
+
+  /**
+   * The `visible` prop determines whether your modal is visible.
+   *
+   * See https://reactnative.dev/docs/modal#visible
+   */
+  visible?: ?boolean,
+
+  /**
+   * The `onRequestClose` callback is called when the user taps the hardware
+   * back button on Android or the menu button on Apple TV.
+   *
+   * This is required on Apple TV and Android.
+   *
+   * See https://reactnative.dev/docs/modal#onrequestclose
+   */
+  onRequestClose?: ?DirectEventHandler<null>,
+
+  /**
+   * The `onShow` prop allows passing a function that will be called once the
+   * modal has been shown.
+   *
+   * See https://reactnative.dev/docs/modal#onshow
+   */
+  onShow?: ?DirectEventHandler<null>,
+
+  /**
+   * The `onDismiss` prop allows passing a function that will be called once
+   * the modal has been dismissed.
+   *
+   * See https://reactnative.dev/docs/modal#ondismiss
+   */
+  onDismiss?: ?() => mixed,
+
+  /**
+   * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
+   *
+   * See https://reactnative.dev/docs/modal#supportedorientations
+   */
+  supportedOrientations?: ?$ReadOnlyArray<
+    | 'portrait'
+    | 'portrait-upside-down'
+    | 'landscape'
+    | 'landscape-left'
+    | 'landscape-right',
+  >,
+
+  /**
+   * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed.
+   *
+   * See https://reactnative.dev/docs/modal#onorientationchange
+   */
+  onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   */
+  backdropColor?: ?string,
+|}>;
+
+function confirmProps(props: Props) {
+  if (__DEV__) {
+    if (
+      props.presentationStyle &&
+      props.presentationStyle !== 'overFullScreen' &&
+      props.transparent === true
+    ) {
+      console.warn(
+        `Modal with '${props.presentationStyle}' presentation style and 'transparent' value is not supported.`,
+      );
+    }
+  }
+}
+
+// Create a state to track whether the Modal is rendering or not.
+// This is the only prop that controls whether the modal is rendered or not.
+type State = {
+  isRendered: boolean,
+};
+
+class Modal extends React.Component<Props, State> {
+  static defaultProps: {|hardwareAccelerated: boolean, visible: boolean|} = {
+    visible: true,
+    hardwareAccelerated: false,
+  };
+
+  static contextType: React.Context<RootTag> = RootTagContext;
+
+  _identifier: number;
+  _eventSubscription: ?EventSubscription;
+
+  constructor(props: Props) {
+    super(props);
+    if (__DEV__) {
+      confirmProps(props);
+    }
+    this._identifier = uniqueModalIdentifier++;
+    this.state = {
+      isRendered: props.visible === true,
+    };
+  }
+
+  componentDidMount() {
+    // 'modalDismissed' is for the old renderer in iOS only
+    if (ModalEventEmitter) {
+      this._eventSubscription = ModalEventEmitter.addListener(
+        'modalDismissed',
+        event => {
+          this.setState({isRendered: false}, () => {
+            if (event.modalID === this._identifier && this.props.onDismiss) {
+              this.props.onDismiss();
+            }
+          });
+        },
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._eventSubscription) {
+      this._eventSubscription.remove();
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.visible === false && this.props.visible === true) {
+      this.setState({isRendered: true});
+    }
+
+    if (__DEV__) {
+      confirmProps(this.props);
+    }
+  }
+
+  // Helper function to encapsulate platform specific logic to show or not the Modal.
+  _shouldShowModal(): boolean {
+    if (Platform.OS === 'ios' || Platform.OS === 'windows') {
+      // [Windows]
+      return this.props.visible === true || this.state.isRendered === true;
+    }
+
+    return this.props.visible === true;
+  }
+
+  render(): React.Node {
+    if (!this._shouldShowModal()) {
+      return null;
+    }
+
+    const containerStyles = {
+      backgroundColor:
+        this.props.transparent === true
+          ? 'transparent'
+          : this.props.backdropColor ?? 'white',
+    };
+
+    let animationType = this.props.animationType || 'none';
+
+    let presentationStyle = this.props.presentationStyle;
+    if (!presentationStyle) {
+      presentationStyle = 'fullScreen';
+      if (this.props.transparent === true) {
+        presentationStyle = 'overFullScreen';
+      }
+    }
+
+    const innerChildren = __DEV__ ? (
+      <AppContainer rootTag={this.context}>{this.props.children}</AppContainer>
+    ) : (
+      this.props.children
+    );
+
+    const onDismiss = () => {
+      // OnDismiss is implemented on iOS/Windows only. // [Windows]
+      if (Platform.OS === 'ios' || Platform.OS === 'windows') {
+        // [Windows]
+        this.setState({isRendered: false}, () => {
+          if (this.props.onDismiss) {
+            this.props.onDismiss();
+          }
+        });
+      }
+    };
+
+    return (
+      <RCTModalHostView
+        animationType={animationType}
+        presentationStyle={presentationStyle}
+        transparent={this.props.transparent}
+        hardwareAccelerated={this.props.hardwareAccelerated}
+        onRequestClose={this.props.onRequestClose}
+        onShow={this.props.onShow}
+        onDismiss={onDismiss}
+        visible={this.props.visible}
+        statusBarTranslucent={this.props.statusBarTranslucent}
+        identifier={this._identifier}
+        style={styles.modal}
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+        onStartShouldSetResponder={this._shouldSetResponder}
+        supportedOrientations={this.props.supportedOrientations}
+        onOrientationChange={this.props.onOrientationChange}
+        testID={this.props.testID}>
+        <VirtualizedListContextResetter>
+          <ScrollView.Context.Provider value={null}>
+            <View
+              style={[styles.container, containerStyles]}
+              collapsable={false}>
+              {innerChildren}
+            </View>
+          </ScrollView.Context.Provider>
+        </VirtualizedListContextResetter>
+      </RCTModalHostView>
+    );
+  }
+
+  // We don't want any responder events bubbling out of the modal.
+  _shouldSetResponder(): boolean {
+    return true;
+  }
+}
+
+const side = I18nManager.getConstants().isRTL ? 'right' : 'left';
+const styles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+  },
+  container: {
+    /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
+     * comment suppresses an error found when Flow v0.111 was deployed. To see
+     * the error, delete this comment and run Flow. */
+    [side]: 0,
+    top: 0,
+    flex: 1,
+  },
+});
+
+const ExportedModal: React.AbstractComponent<
+  React.ElementConfig<typeof Modal>,
+  // $FlowFixMe[incompatible-type-arg]
+> = ModalInjection.unstable_Modal ?? Modal;
+
+module.exports = ExportedModal;

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -22,8 +22,9 @@ namespace Microsoft.ReactNative.Composition
     NativeBorder  = 0x00000001,
     ShadowProps   = 0x00000002,
     Background    = 0x00000004,
+    FocusVisual   = 0x00000008,
 
-    Default       = 0x00000007, // ShadowProps | NativeBorder | Background
+    Default       = 0x0000000F, // ShadowProps | NativeBorder | Background | FocusVisual
   };
 
   namespace Experimental {

package/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.cpp

@@ -106,7 +106,10 @@ facebook::react::Props::Shared AbiComponentDescriptor::cloneProps(
       rawProps);
   auto userProps =
       winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
-          ->CreateProps(nullptr);
+          ->CreateProps(
+              nullptr,
+              props ? static_cast<winrt::Microsoft::ReactNative::implementation::AbiProps const &>(*props).UserProps()
+                    : nullptr);
   shadowNodeProps->SetUserProps(userProps);
 
   rawProps.iterateOverValues(

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp

@@ -103,7 +103,7 @@ facebook::react::Props::Shared AbiViewComponentDescriptor::cloneProps(
       winrt::make<winrt::Microsoft::ReactNative::implementation::ViewProps>(shadowNodeProps, false /*holdRef*/);
   auto userProps =
       winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
-          ->CreateProps(viewProps);
+          ->CreateProps(viewProps, props ? static_cast<AbiViewProps const &>(*props).UserProps() : nullptr);
   shadowNodeProps->SetUserProps(userProps, viewProps);
 
   rawProps.iterateOverValues(

package/Microsoft.ReactNative/Fabric/AbiViewProps.cpp

@@ -65,6 +65,13 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IBrush Color::AsIntern
   return winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(theme)->Brush(*m_color);
 }
 
+bool Color::Equals(const winrt::Microsoft::ReactNative::Color &color) const noexcept {
+  if (!color) {
+    return false;
+  }
+  return m_color == winrt::get_self<Color>(color)->m_color;
+}
+
 winrt::Microsoft::ReactNative::Color Color::ReadValue(
     const winrt::Microsoft::ReactNative::IJSValueReader &reader) noexcept {
   switch (reader.ValueType()) {

package/Microsoft.ReactNative/Fabric/AbiViewProps.h

@@ -50,6 +50,8 @@ struct Color : ColorT<Color, Composition::Experimental::IInternalColor> {
   winrt::Microsoft::ReactNative::Composition::Experimental::IBrush AsInternalBrush(
       const winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept;
 
+  bool Equals(const winrt::Microsoft::ReactNative::Color &color) const noexcept;
+
   static winrt::Microsoft::ReactNative::Color ReadValue(
       const winrt::Microsoft::ReactNative::IJSValueReader &reader) noexcept;
   static void WriteValue(

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -22,11 +22,12 @@ struct RootComponentView;
 
 namespace winrt::Microsoft::ReactNative::implementation {
 
-ComponentView::ComponentView(facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext)
-    : m_tag(tag), m_reactContext(reactContext) {}
-
-void ComponentView::MarkAsCustomComponent() noexcept {
-  m_customComponent = true;
+ComponentView::ComponentView(
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+    winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder *builder)
+    : m_tag(tag), m_reactContext(reactContext) {
+  m_builder.copy_from(builder);
 }
 
 std::vector<facebook::react::ComponentDescriptorProvider>
@@ -52,18 +53,15 @@ void ComponentView::MountChildComponentView(
     uint32_t index) noexcept {
   m_children.InsertAt(index, childComponentView);
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(childComponentView)->parent(*this);
-  if (m_mountChildComponentViewHandler) {
-    m_mountChildComponentViewHandler(*this, winrt::make<MountChildComponentViewArgs>(childComponentView, index));
+  if (m_builder && m_builder->MountChildComponentViewHandler()) {
+    m_builder->MountChildComponentViewHandler()(
+        *this, winrt::make<MountChildComponentViewArgs>(childComponentView, index));
   }
   if (m_mounted) {
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(childComponentView)->onMounted();
   }
 }
 
-void ComponentView::MountChildComponentViewHandler(const MountChildComponentViewDelegate &handler) noexcept {
-  m_mountChildComponentViewHandler = handler;
-}
-
 void ComponentView::onMounted() noexcept {
   assert(!m_mounted);
   m_mounted = true;
@@ -73,6 +71,10 @@ void ComponentView::onMounted() noexcept {
   m_mountedEvent(*this, *this);
 }
 
+bool ComponentView::isMounted() noexcept {
+  return m_mounted;
+}
+
 winrt::event_token ComponentView::Mounted(
     winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::ComponentView> const &handler) noexcept {
   return m_mountedEvent.add(handler);
@@ -85,16 +87,14 @@ void ComponentView::Mounted(winrt::event_token const &token) noexcept {
 void ComponentView::UnmountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  if (m_mountChildComponentViewHandler) {
-    m_mountChildComponentViewHandler(*this, winrt::make<MountChildComponentViewArgs>(childComponentView, index));
+  if (m_builder && m_builder->UnmountChildComponentViewHandler()) {
+    m_builder->UnmountChildComponentViewHandler()(
+        *this, winrt::make<UnmountChildComponentViewArgs>(childComponentView, index));
   }
   m_children.RemoveAt(index);
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(childComponentView)->parent(nullptr);
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(childComponentView)->onUnmounted();
 }
-void ComponentView::UnmountChildComponentViewHandler(const UnmountChildComponentViewDelegate &handler) noexcept {
-  m_unmountChildComponentViewHandler = handler;
-}
 
 void ComponentView::onUnmounted() noexcept {
   if (!m_mounted)
@@ -144,15 +144,11 @@ uint32_t UnmountChildComponentViewArgs::Index() const noexcept {
 void ComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
-  if (m_updatePropsDelegate) {
-    m_updatePropsDelegate(*this, userProps(props), oldProps ? userProps(oldProps) : nullptr);
+  if (m_builder && m_builder->UpdatePropsHandler()) {
+    m_builder->UpdatePropsHandler()(*this, userProps(props), oldProps ? userProps(oldProps) : nullptr);
   }
 }
 
-void ComponentView::UpdatePropsHandler(const UpdatePropsDelegate &handler) noexcept {
-  m_updatePropsDelegate = handler;
-}
-
 const winrt::Microsoft::ReactNative::IComponentProps ComponentView::userProps(
     facebook::react::Props::Shared const &props) noexcept {
   const auto &abiProps =
@@ -161,28 +157,20 @@ const winrt::Microsoft::ReactNative::IComponentProps ComponentView::userProps(
 }
 
 void ComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
-  if (m_updateEventEmitterHandler) {
-    m_updateEventEmitterHandler(*this, winrt::make<EventEmitter>(eventEmitter));
+  if (m_builder && m_builder->UpdateEventEmitterHandler()) {
+    m_builder->UpdateEventEmitterHandler()(*this, winrt::make<EventEmitter>(eventEmitter));
   }
 }
 
-void ComponentView::UpdateEventEmitterHandler(const UpdateEventEmitterDelegate &handler) noexcept {
-  m_updateEventEmitterHandler = handler;
-}
-
 void ComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {
   // Avoid new-ing up a new AbiComponentState on every state change if we are not a custom component
-  if (m_updateStateDelegate) {
-    m_updateStateDelegate(*this, winrt::make<::Microsoft::ReactNative::AbiComponentState>(state));
+  if (m_builder && m_builder->UpdateStateHandler()) {
+    m_builder->UpdateStateHandler()(*this, winrt::make<::Microsoft::ReactNative::AbiComponentState>(state));
   }
 }
 
-void ComponentView::UpdateStateHandler(const UpdateStateDelegate &handler) noexcept {
-  m_updateStateDelegate = handler;
-}
-
 LayoutMetricsChangedArgs::LayoutMetricsChangedArgs(
     const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics,
     const winrt::Microsoft::ReactNative::LayoutMetrics &oldLayoutMetrics)
@@ -212,6 +200,10 @@ void ComponentView::updateLayoutMetrics(
        layoutMetrics.frame.size.height},
       layoutMetrics.pointScaleFactor};
 
+  if (m_builder && m_builder->UpdateLayoutMetricsHandler()) {
+    m_builder->UpdateLayoutMetricsHandler()(*this, newMetrics, oldMetrics);
+  }
+
   m_layoutMetrics = layoutMetrics;
 
   m_layoutMetricsChangedEvent(*this, winrt::make<LayoutMetricsChangedArgs>(newMetrics, oldMetrics));
@@ -236,13 +228,9 @@ void ComponentView::LayoutMetricsChanged(winrt::event_token const &token) noexce
   m_layoutMetricsChangedEvent.remove(token);
 }
 
-void ComponentView::FinalizeUpdateHandler(const UpdateFinalizerDelegate &handler) noexcept {
-  m_finalizeUpdateHandler = handler;
-}
-
 void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
-  if (m_finalizeUpdateHandler) {
-    m_finalizeUpdateHandler(*this, updateMask);
+  if (m_builder && m_builder->FinalizeUpdateHandler()) {
+    m_builder->FinalizeUpdateHandler()(*this, updateMask);
   }
 }
 
@@ -253,13 +241,9 @@ facebook::react::Props::Shared ComponentView::props() noexcept {
   return {};
 }
 
-void ComponentView::CustomCommandHandler(const HandleCommandDelegate &handler) noexcept {
-  m_customCommandHandler = handler;
-}
-
 void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
-  if (m_customCommandHandler) {
-    m_customCommandHandler(*this, args);
+  if (m_builder && m_builder->CustomCommandHandler()) {
+    m_builder->CustomCommandHandler()(*this, args);
   }
 }
 
@@ -342,10 +326,13 @@ bool ComponentView::runOnChildren(
         return true;
     }
   } else {
-    // TODO is this conversion from rend correct?
-    for (auto it = m_children.end(); it != m_children.begin(); --it) {
-      if (fn(*winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(*it)))
-        return true;
+    if (m_children.Size()) {
+      auto it = m_children.end();
+      do {
+        it--;
+        if (fn(*winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(*it)))
+          return true;
+      } while (it != m_children.begin());
     }
   }
   return false;
@@ -356,6 +343,14 @@ RECT ComponentView::getClientRect() const noexcept {
   return {};
 }
 
+winrt::Windows::Foundation::Point ComponentView::ScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept {
+  return rootComponentView()->ConvertScreenToLocal(pt);
+}
+
+winrt::Windows::Foundation::Point ComponentView::LocalToScreen(winrt::Windows::Foundation::Point pt) noexcept {
+  return rootComponentView()->ConvertLocalToScreen(pt);
+}
+
 // The offset from this elements parent to its children (accounts for things like scroll position)
 facebook::react::Point ComponentView::getClientOffset() const noexcept {
   assert(false);