react-native-windows 0.76.1 → 0.76.3

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

@@ -134,65 +134,89 @@ const View: React.AbstractComponent<
       };
     }
 
-    const _keyDown = (event: KeyEvent) => {
-      if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
-        // $FlowFixMe - keyDownEvents was already checked to not be undefined
-        for (const el of otherProps.keyDownEvents) {
-          if (
-            event.nativeEvent.code === el.code &&
-            el.handledEventPhase === 3
-          ) {
-            event.stopPropagation();
+    const _keyDown =
+      otherProps.keyDownEvents || otherProps.onKeyDown
+        ? (event: KeyEvent) => {
+            if (
+              otherProps.keyDownEvents &&
+              event.isPropagationStopped() !== true
+            ) {
+              // $FlowFixMe - keyDownEvents was already checked to not be undefined
+              for (const el of otherProps.keyDownEvents) {
+                if (
+                  event.nativeEvent.code === el.code &&
+                  el.handledEventPhase === 3
+                ) {
+                  event.stopPropagation();
+                }
+              }
+            }
+            otherProps.onKeyDown && otherProps.onKeyDown(event);
           }
-        }
-      }
-      otherProps.onKeyDown && otherProps.onKeyDown(event);
-    };
+        : undefined;
 
-    const _keyUp = (event: KeyEvent) => {
-      if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
-        // $FlowFixMe - keyDownEvents was already checked to not be undefined
-        for (const el of otherProps.keyUpEvents) {
-          if (
-            event.nativeEvent.code === el.code &&
-            el.handledEventPhase === 3
-          ) {
-            event.stopPropagation();
+    const _keyUp =
+      otherProps.keyUpEvents || otherProps.onKeyUp
+        ? (event: KeyEvent) => {
+            if (
+              otherProps.keyUpEvents &&
+              event.isPropagationStopped() !== true
+            ) {
+              // $FlowFixMe - keyUpEvents was already checked to not be undefined
+              for (const el of otherProps.keyUpEvents) {
+                if (
+                  event.nativeEvent.code === el.code &&
+                  el.handledEventPhase === 3
+                ) {
+                  event.stopPropagation();
+                }
+              }
+            }
+            otherProps.onKeyUp && otherProps.onKeyUp(event);
           }
-        }
-      }
-      otherProps.onKeyUp && otherProps.onKeyUp(event);
-    };
+        : undefined;
 
-    const _keyDownCapture = (event: KeyEvent) => {
-      if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
-        // $FlowFixMe - keyDownEvents was already checked to not be undefined
-        for (const el of otherProps.keyDownEvents) {
-          if (
-            event.nativeEvent.code === el.code &&
-            el.handledEventPhase === 1
-          ) {
-            event.stopPropagation();
+    const _keyDownCapture =
+      otherProps.keyDownEvents || otherProps.onKeyDownCapture
+        ? (event: KeyEvent) => {
+            if (
+              otherProps.keyDownEvents &&
+              event.isPropagationStopped() !== true
+            ) {
+              // $FlowFixMe - keyDownEvents was already checked to not be undefined
+              for (const el of otherProps.keyDownEvents) {
+                if (
+                  event.nativeEvent.code === el.code &&
+                  el.handledEventPhase === 1
+                ) {
+                  event.stopPropagation();
+                }
+              }
+            }
+            otherProps.onKeyDownCapture && otherProps.onKeyDownCapture(event);
           }
-        }
-      }
-      otherProps.onKeyDownCapture && otherProps.onKeyDownCapture(event);
-    };
+        : undefined;
 
-    const _keyUpCapture = (event: KeyEvent) => {
-      if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
-        // $FlowFixMe - keyDownEvents was already checked to not be undefined
-        for (const el of otherProps.keyUpEvents) {
-          if (
-            event.nativeEvent.code === el.code &&
-            el.handledEventPhase === 1
-          ) {
-            event.stopPropagation();
+    const _keyUpCapture =
+      otherProps.keyUpEvents || otherProps.onKeyUpCapture
+        ? (event: KeyEvent) => {
+            if (
+              otherProps.keyUpEvents &&
+              event.isPropagationStopped() !== true
+            ) {
+              // $FlowFixMe - keyUpEvents was already checked to not be undefined
+              for (const el of otherProps.keyUpEvents) {
+                if (
+                  event.nativeEvent.code === el.code &&
+                  el.handledEventPhase === 1
+                ) {
+                  event.stopPropagation();
+                }
+              }
+            }
+            otherProps.onKeyUpCapture && otherProps.onKeyUpCapture(event);
           }
-        }
-      }
-      otherProps.onKeyUpCapture && otherProps.onKeyUpCapture(event);
-    };
+        : undefined;
 
     // [Windows
     const _focusable = tabIndex !== undefined ? !tabIndex : focusable;

package/Libraries/Core/ReactNativeVersion.js

@@ -16,7 +16,7 @@ const version: $ReadOnly<{
 }> = {
   major: 0,
   minor: 76,
-  patch: 0,
+  patch: 2,
   prerelease: null,
 };
 

package/Libraries/Core/setUpErrorHandling.js

@@ -21,13 +21,7 @@ ExceptionsManager.installConsoleErrorReporter();
 if (!global.__fbDisableExceptionsManager) {
   const handleError = (e: mixed, isFatal: boolean) => {
     try {
-      // TODO(T196834299): We should really use a c++ turbomodule for this
-      if (
-        !global.RN$handleException ||
-        !global.RN$handleException(e, isFatal)
-      ) {
-        ExceptionsManager.handleException(e, isFatal);
-      }
+      ExceptionsManager.handleException(e, isFatal);
     } catch (ee) {
       console.log('Failed to print error: ', ee.message);
       throw e;

package/Libraries/LogBox/Data/LogBoxData.js

@@ -82,9 +82,9 @@ let warningFilter: WarningFilter = function (format) {
   return {
     finalFormat: format,
     forceDialogImmediately: false,
-    suppressDialog_LEGACY: true,
+    suppressDialog_LEGACY: false,
     suppressCompletely: false,
-    monitorEvent: 'unknown',
+    monitorEvent: 'warning_unhandled',
     monitorListVersion: 0,
     monitorSampleRate: 1,
   };

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/Libraries/ReactNative/AppRegistry.js

@@ -13,7 +13,7 @@ import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import type {DisplayModeType} from './DisplayMode';
 
-import BatchedBridge from '../BatchedBridge/BatchedBridge';
+import registerCallableModule from '../Core/registerCallableModule';
 import BugReporting from '../BugReporting/BugReporting';
 import createPerformanceLogger from '../Utilities/createPerformanceLogger';
 import infoLog from '../Utilities/infoLog';
@@ -363,8 +363,8 @@ global.RN$SurfaceRegistry = {
 
 if (global.RN$Bridgeless === true) {
   console.log('Bridgeless mode is enabled');
-} else {
-  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
 }
 
+registerCallableModule('AppRegistry', AppRegistry);
+
 module.exports = AppRegistry;

package/Libraries/Text/Text.windows.js

@@ -324,7 +324,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
 
       // [Windows
       // $FlowFixMe[unclear-type]
-      let styleProps: ViewStyleProp = (style: any); // Flow style type casting
+      let styleProps: ViewStyleProp = (processedStyle: any); // Flow style type casting
       if (
         global.RN$Bridgeless !== true && // [Windows] Fabric text handles borders, but on paper we need to wrap it in an extra view
         styleProps &&

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);
 
   const auto &dynamic = static_cast<folly::dynamic>(rawProps);

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);
 
   const auto &dynamic = static_cast<folly::dynamic>(rawProps);

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(