react-native-windows 0.76.2 → 0.77.0-preview.1

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

@@ -57,10 +57,10 @@ const childrenWithImportantForAccessibility = children => {
  *
  * @see https://reactnative.dev/docs/view
  */
-const View: React.AbstractComponent<
-  ViewProps,
-  React.ElementRef<typeof ViewNativeComponent>,
-> = React.forwardRef(
+const View: component(
+  ref: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
+  ...props: ViewProps
+) = React.forwardRef(
   (
     {
       accessibilityElementsHidden,
@@ -76,6 +76,8 @@ 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,
@@ -108,7 +110,9 @@ const View: React.AbstractComponent<
       ariaChecked != null ||
       ariaDisabled != null ||
       ariaExpanded != null ||
-      ariaSelected != null
+      ariaSelected != null ||
+      ariaMultiselectable != null || // Windows
+      ariaRequired != null // Windows
     ) {
       _accessibilityState = {
         busy: ariaBusy ?? accessibilityState?.busy,
@@ -116,6 +120,9 @@ const View: React.AbstractComponent<
         disabled: ariaDisabled ?? accessibilityState?.disabled,
         expanded: ariaExpanded ?? accessibilityState?.expanded,
         selected: ariaSelected ?? accessibilityState?.selected,
+        multiselectable:
+          ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
+        required: ariaRequired ?? accessibilityState?.required, // Windows
       };
     }
     let _accessibilityValue;
@@ -134,65 +141,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/Components/View/ViewAccessibility.d.ts

@@ -183,6 +183,16 @@ export interface AccessibilityState {
    *  When present, informs accessible tools the element is expanded or collapsed
    */
   expanded?: 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,8 @@ export type AccessibilityState = {
   checked?: ?boolean | 'mixed',
   busy?: ?boolean,
   expanded?: ?boolean,
+  multiselectable?: ?boolean, // Windows
+  required?: ?boolean, // Windows
   ...
 };
 

package/Libraries/Components/View/ViewNativeComponent.js

@@ -10,113 +10,21 @@
 
 import type {
   HostComponent,
-  PartialViewConfig,
+  HostInstance,
 } from '../../Renderer/shims/ReactNativeTypes';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import Platform from '../../Utilities/Platform';
 import {type ViewProps as Props} from './ViewPropTypes';
-import * as React from 'react';
-
-export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
-  Platform.OS === 'android'
-    ? {
-        uiViewClassName: 'RCTView',
-        validAttributes: {
-          // ReactClippingViewManager @ReactProps
-          removeClippedSubviews: true,
-
-          // ReactViewManager @ReactProps
-          accessible: true,
-          hasTVPreferredFocus: true,
-          nextFocusDown: true,
-          nextFocusForward: true,
-          nextFocusLeft: true,
-          nextFocusRight: true,
-          nextFocusUp: true,
-
-          borderRadius: true,
-          borderTopLeftRadius: true,
-          borderTopRightRadius: true,
-          borderBottomRightRadius: true,
-          borderBottomLeftRadius: true,
-          borderTopStartRadius: true,
-          borderTopEndRadius: true,
-          borderBottomStartRadius: true,
-          borderBottomEndRadius: true,
-          borderEndEndRadius: true,
-          borderEndStartRadius: true,
-          borderStartEndRadius: true,
-          borderStartStartRadius: true,
-          borderStyle: true,
-          hitSlop: true,
-          pointerEvents: true,
-          nativeBackgroundAndroid: true,
-          nativeForegroundAndroid: true,
-          needsOffscreenAlphaCompositing: true,
-
-          borderWidth: true,
-          borderLeftWidth: true,
-          borderRightWidth: true,
-          borderTopWidth: true,
-          borderBottomWidth: true,
-          borderStartWidth: true,
-          borderEndWidth: true,
-
-          borderColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderLeftColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderRightColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderTopColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderBottomColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderStartColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderEndColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderBlockColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderBlockEndColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderBlockStartColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          focusable: true,
-          overflow: true,
-          backfaceVisibility: true,
-          experimental_layoutConformance: true,
-        },
-      }
-    : {
-        uiViewClassName: 'RCTView',
-      };
 
 const ViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('RCTView', () => __INTERNAL_VIEW_CONFIG);
+  NativeComponentRegistry.get<Props>('RCTView', () => ({
+    uiViewClassName: 'RCTView',
+  }));
 
 interface NativeCommands {
-  +hotspotUpdate: (
-    viewRef: React.ElementRef<HostComponent<mixed>>,
-    x: number,
-    y: number,
-  ) => void;
-  +setPressed: (
-    viewRef: React.ElementRef<HostComponent<mixed>>,
-    pressed: boolean,
-  ) => void;
+  +hotspotUpdate: (viewRef: HostInstance, x: number, y: number) => void;
+  +setPressed: (viewRef: HostInstance, pressed: boolean) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({

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

@@ -318,4 +318,11 @@ export interface ViewProps
    * Used to reference react managed views from native code.
    */
   nativeID?: string | undefined;
+
+  /**
+   * Contols whether this view, and its transitive children, are laid in a way
+   * consistent with web browsers ('strict'), or consistent with existing
+   * React Native code which may rely on incorrect behavior ('classic').
+   */
+  experimental_layoutConformance?: 'strict' | 'classic' | undefined;
 }

package/Libraries/Components/View/ViewPropTypes.js

@@ -567,9 +567,6 @@ export type ViewProps = $ReadOnly<{|
    * optimization. Set this property to `false` to disable this optimization and
    * ensure that this `View` exists in the native view hierarchy.
    *
-   * @platform android
-   * In Fabric, this prop is used in ios as well.
-   *
    * See https://reactnative.dev/docs/view#collapsable
    */
   collapsable?: ?boolean,

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

@@ -626,6 +626,8 @@ export type ViewProps = $ReadOnly<{|
    * 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
@@ -633,9 +635,6 @@ export type ViewProps = $ReadOnly<{|
    * optimization. Set this property to `false` to disable this optimization and
    * ensure that this `View` exists in the native view hierarchy.
    *
-   * @platform android
-   * In Fabric, this prop is used in ios as well.
-   *
    * See https://reactnative.dev/docs/view#collapsable
    */
   collapsable?: ?boolean,

package/Libraries/Core/ExceptionsManager.js

@@ -22,10 +22,11 @@ type ExceptionDecorator = ExceptionData => ExceptionData;
 let userExceptionDecorator: ?ExceptionDecorator;
 let inUserExceptionDecorator = false;
 
-// This Symbol is used to decorate an ExtendedError with extra data in select usecases.
+// This string is used to decorate an ExtendedError with extra data in select usecases.
 // Note that data passed using this method should be strictly contained,
 // as data that's not serializable/too large may cause issues with passing the error to the native code.
-const decoratedExtraDataKey: symbol = Symbol('decoratedExtraDataKey');
+// TODO(T204185517): We should use a Symbol for this, but jsi through jsc doesn't support it yet.
+const decoratedExtraDataKey = 'RN$ErrorExtraDataKey';
 
 /**
  * Allows the app to add information to the exception report before it is sent
@@ -120,6 +121,12 @@ function reportException(
     const NativeExceptionsManager =
       require('./NativeExceptionsManager').default;
     if (NativeExceptionsManager) {
+      if (isFatal) {
+        if (global.RN$hasHandledFatalException?.()) {
+          return;
+        }
+        global.RN$notifyOfFatalException?.();
+      }
       NativeExceptionsManager.reportException(data);
     }
   }
@@ -140,24 +147,31 @@ let inExceptionHandler = false;
  * Logs exceptions to the (native) console and displays them
  */
 function handleException(e: mixed, isFatal: boolean) {
-  let error: Error;
-  if (e instanceof Error) {
-    error = e;
-  } else {
-    // Workaround for reporting errors caused by `throw 'some string'`
-    // Unfortunately there is no way to figure out the stacktrace in this
-    // case, so if you ended up here trying to trace an error, look for
-    // `throw '<error message>'` somewhere in your codebase.
-    error = new SyntheticError(e);
-  }
-  try {
-    inExceptionHandler = true;
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for this
-     * parameters */
-    // $FlowFixMe[incompatible-call]
-    reportException(error, isFatal, /*reportToConsole*/ true);
-  } finally {
-    inExceptionHandler = false;
+  // TODO(T196834299): We should really use a c++ turbomodule for this
+  const reportToConsole = true;
+  if (
+    !global.RN$handleException ||
+    !global.RN$handleException(e, isFatal, reportToConsole)
+  ) {
+    let error: Error;
+    if (e instanceof Error) {
+      error = e;
+    } else {
+      // Workaround for reporting errors caused by `throw 'some string'`
+      // Unfortunately there is no way to figure out the stacktrace in this
+      // case, so if you ended up here trying to trace an error, look for
+      // `throw '<error message>'` somewhere in your codebase.
+      error = new SyntheticError(e);
+    }
+    try {
+      inExceptionHandler = true;
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+       * parameters */
+      // $FlowFixMe[incompatible-call]
+      reportException(error, isFatal, reportToConsole);
+    } finally {
+      inExceptionHandler = false;
+    }
   }
 }
 
@@ -169,7 +183,7 @@ function reactConsoleErrorHandler(...args) {
   if (!console.reportErrorsAsExceptions) {
     return;
   }
-  if (inExceptionHandler) {
+  if (inExceptionHandler || global.RN$inExceptionHandler?.()) {
     // The fundamental trick here is that are multiple entry point to logging errors:
     // (see D19743075 for more background)
     //
@@ -223,14 +237,21 @@ function reactConsoleErrorHandler(...args) {
     error.name = 'console.error';
   }
 
-  reportException(
-    /* $FlowFixMe[class-object-subtyping] added when improving typing for this
-     * parameters */
-    // $FlowFixMe[incompatible-call]
-    error,
-    false, // isFatal
-    false, // reportToConsole
-  );
+  const isFatal = false;
+  const reportToConsole = false;
+  if (
+    !global.RN$handleException ||
+    !global.RN$handleException(error, isFatal, reportToConsole)
+  ) {
+    reportException(
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+       * parameters */
+      // $FlowFixMe[incompatible-call]
+      error,
+      isFatal,
+      reportToConsole,
+    );
+  }
 }
 
 /**

package/Libraries/Core/ReactNativeVersion.js

@@ -15,9 +15,9 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 76,
-  patch: 2,
-  prerelease: null,
+  minor: 77,
+  patch: 0,
+  prerelease: 'rc.0',
 };
 
 module.exports = {version};

package/Libraries/Core/__mocks__/NativeExceptionsManager.js

@@ -14,7 +14,6 @@ import typeof NativeExceptionsManager from '../NativeExceptionsManager';
 export default ({
   reportFatalException: jest.fn(),
   reportSoftException: jest.fn(),
-  updateExceptionMessage: jest.fn(),
   dismissRedbox: jest.fn(),
   reportException: jest.fn(),
 }: NativeExceptionsManager);

package/Libraries/Core/setUpBatchedBridge.js

@@ -16,16 +16,7 @@ if (global.RN$Bridgeless === true && global.RN$registerCallableModule) {
 } else {
   const BatchedBridge = require('../BatchedBridge/BatchedBridge');
   registerModule = (
-    moduleName:
-      | $TEMPORARY$string<'GlobalPerformanceLogger'>
-      | $TEMPORARY$string<'HMRClient'>
-      | $TEMPORARY$string<'HeapCapture'>
-      | $TEMPORARY$string<'JSTimers'>
-      | $TEMPORARY$string<'RCTDeviceEventEmitter'>
-      | $TEMPORARY$string<'RCTLog'>
-      | $TEMPORARY$string<'RCTNativeAppEventEmitter'>
-      | $TEMPORARY$string<'SamplingProfiler'>
-      | $TEMPORARY$string<'Systrace'>,
+    moduleName: string,
     /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
      * Flow's LTI update could not be added via codemod */
     factory,

package/Libraries/Core/setUpDeveloperTools.js

@@ -42,13 +42,9 @@ if (__DEV__) {
   if (!Platform.isTesting) {
     const HMRClient = require('../Utilities/HMRClient');
 
-    // [0.76 only] When under React Native DevTools, log "JavaScript logs will
-    // be removed from Metro..." warning, and continue to forward logs.
     if (global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
       HMRClient.unstable_notifyFuseboxConsoleEnabled();
-    }
-
-    if (console._isPolyfilled) {
+    } else if (console._isPolyfilled) {
       // We assume full control over the console and send JavaScript logs to Metro.
       [
         'trace',

package/Libraries/Core/setUpErrorHandling.js

@@ -10,24 +10,26 @@
 
 'use strict';
 
-/**
- * Sets up the console and exception handling (redbox) for React Native.
- * You can use this module directly, or just require InitializeCore.
- */
-const ExceptionsManager = require('./ExceptionsManager');
-ExceptionsManager.installConsoleErrorReporter();
+if (global.RN$useAlwaysAvailableJSErrorHandling !== true) {
+  /**
+   * Sets up the console and exception handling (redbox) for React Native.
+   * You can use this module directly, or just require InitializeCore.
+   */
+  const ExceptionsManager = require('./ExceptionsManager');
+  ExceptionsManager.installConsoleErrorReporter();
 
-// Set up error handler
-if (!global.__fbDisableExceptionsManager) {
-  const handleError = (e: mixed, isFatal: boolean) => {
-    try {
-      ExceptionsManager.handleException(e, isFatal);
-    } catch (ee) {
-      console.log('Failed to print error: ', ee.message);
-      throw e;
-    }
-  };
+  // Set up error handler
+  if (!global.__fbDisableExceptionsManager) {
+    const handleError = (e: mixed, isFatal: boolean) => {
+      try {
+        ExceptionsManager.handleException(e, isFatal);
+      } catch (ee) {
+        console.log('Failed to print error: ', ee.message);
+        throw e;
+      }
+    };
 
-  const ErrorUtils = require('../vendor/core/ErrorUtils');
-  ErrorUtils.setGlobalHandler(handleError);
+    const ErrorUtils = require('../vendor/core/ErrorUtils');
+    ErrorUtils.setGlobalHandler(handleError);
+  }
 }