react-native-windows 0.72.14 → 0.73.0-preview.1

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

@@ -10,9 +10,9 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
+import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
-import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 import invariant from 'invariant'; // [Windows]
@@ -38,8 +38,10 @@ const View: React.AbstractComponent<
       accessibilityElementsHidden,
       accessibilityLabel,
       accessibilityLabelledBy,
+      accessibilityLevel, // Windows
       accessibilityLiveRegion,
-      accessibilityRole,
+      accessibilityPosInSet, // Windows
+      accessibilitySetSize, // Windows
       accessibilityState,
       accessibilityValue,
       'aria-busy': ariaBusy,
@@ -49,8 +51,11 @@ const View: React.AbstractComponent<
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      'aria-level': ariaLevel,
       'aria-live': ariaLive,
+      'aria-posinset': ariaPosinset, // Windows
       'aria-selected': ariaSelected,
+      'aria-setsize': ariaSetsize, // Windows
       'aria-valuemax': ariaValueMax,
       'aria-valuemin': ariaValueMin,
       'aria-valuenow': ariaValueNow,
@@ -61,7 +66,6 @@ const View: React.AbstractComponent<
       importantForAccessibility,
       nativeID,
       pointerEvents,
-      role,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -106,7 +110,17 @@ const View: React.AbstractComponent<
     // $FlowFixMe[underconstrained-implicit-instantiation]
     let style = flattenStyle(otherProps.style);
 
+    // $FlowFixMe[sketchy-null-mixed]
     const newPointerEvents = style?.pointerEvents || pointerEvents;
+    const collapsableOverride =
+      ReactNativeFeatureFlags.shouldForceUnflattenForElevation()
+        ? {
+            collapsable:
+              style != null && style.elevation != null && style.elevation !== 0
+                ? false
+                : otherProps.collapsable,
+          }
+        : {};
 
     const _keyDown = (event: KeyEvent) => {
       if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
@@ -192,7 +206,7 @@ const View: React.AbstractComponent<
 
     if (_focusable === true && _accessible === false) {
       console.warn(
-        'All focusable views should report proper accessiblity information. Views marked as focusable should always be accessible.',
+        'All focusable views should report proper accessibility information. Views marked as focusable should always be accessible.',
       );
     }
 
@@ -212,18 +226,19 @@ const View: React.AbstractComponent<
           return (
             <ViewNativeComponent
               {...otherProps}
+              {...collapsableOverride}
               accessibilityLiveRegion={
                 ariaLive === 'off'
                   ? 'none'
                   : ariaLive ?? accessibilityLiveRegion
               }
               accessibilityLabel={ariaLabel ?? accessibilityLabel}
+              accessibilityLevel={ariaLevel ?? accessibilityLevel}
+              accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet}
+              accessibilitySetSize={ariaSetsize ?? accessibilitySetSize}
               focusable={_focusable}
               disabled={disabled}
               accessibilityState={_accessibilityState}
-              accessibilityRole={
-                role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-              }
               accessibilityElementsHidden={
                 ariaHidden ?? accessibilityElementsHidden
               }
@@ -236,6 +251,7 @@ const View: React.AbstractComponent<
               }
               nativeID={id ?? nativeID}
               style={style}
+              // $FlowFixMe[incompatible-type]
               pointerEvents={newPointerEvents}
               ref={forwardedRef}
               onKeyDown={_keyDown}

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

@@ -38,6 +38,29 @@ export interface AccessibilityProps
    */
   'aria-label'?: string | undefined;
 
+  accessibilityLevel?: number | undefined; // Windows
+  'aria-level'?: number | undefined; // Windows
+
+  /**
+   * Indicates to accessibility services that the UI Component is within a set and has the given numbered position.
+   */
+  accessibilityPosInSet?: number | undefined; // Windows
+
+  /**
+   * Indicates to accessibility services that the UI Component is within a set and has the given numbered position.
+   */
+  'aria-posinset'?: number | undefined; // Windows
+
+  /**
+   * Indicates to accessibility services that the UI Component is within a set with the given size.
+   */
+  accessibilitySetSize?: number | undefined; // Window
+
+  /**
+   * Indicates to accessibility services that the UI Component is within a set with the given size.
+   */
+  'aria-setsize'?: number | undefined; // Windows
+
   /**
    * Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.
    */
@@ -57,7 +80,6 @@ export interface AccessibilityProps
   'aria-disabled'?: boolean | undefined;
   'aria-expanded'?: boolean | undefined;
   'aria-selected'?: boolean | undefined;
-
   /**
    * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
    *
@@ -223,6 +245,10 @@ export type AccessibilityRole =
   | 'tablist'
   | 'timer'
   | 'list'
+  | 'group' // Windows
+  | 'tree' // Windows
+  | 'treeitem' // Windows
+  | 'listitem' // Windows
   | 'toolbar';
 
 export interface AccessibilityPropsAndroid {

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

@@ -84,6 +84,9 @@ export type AccessibilityRole =
   | 'grid'
   | 'pager'
   | 'scrollview'
+  | 'group' // Windows
+  | 'tree' // Windows
+  | 'treeitem' // Windows
   | 'horizontalscrollview'
   | 'viewgroup'
   | 'webview'

package/Libraries/Components/View/ViewNativeComponent.js

@@ -98,6 +98,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           focusable: true,
           overflow: true,
           backfaceVisibility: true,
+          experimental_layoutConformance: true,
         },
       }
     : {

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

@@ -12,7 +12,14 @@ import {Insets} from '../../../types/public/Insets';
 import {GestureResponderHandlers} from '../../../types/public/ReactNativeRenderer';
 import {StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
-import {LayoutChangeEvent, PointerEvents} from '../../Types/CoreEventTypes';
+import {
+  LayoutChangeEvent,
+  MouseEvent, // Windows
+  NativeSyntheticEvent, // Windows
+  PointerEvents,
+} from 'react-native/Libraries/Types/CoreEventTypes';
+
+import {IKeyboardProps} from '../Keyboard/KeyboardExtProps'; // Windows
 import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 
@@ -163,12 +170,108 @@ export interface ViewPropsAndroid {
   focusable?: boolean | undefined;
 }
 
+// [Windows
+
+export enum EventPhase {
+  None = 0,
+  Capturing,
+  AtTarget,
+  Bubbling,
+}
+
+export enum HandledEventPhase {
+  Capturing = EventPhase.Capturing,
+  Bubbling = EventPhase.Bubbling,
+}
+
+export interface INativeKeyboardEvent {
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  key: string;
+  code: string;
+  eventPhase: EventPhase;
+}
+
+export interface IHandledKeyboardEvent {
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  shiftKey?: boolean;
+  code: string;
+  handledEventPhase?: HandledEventPhase;
+}
+
+export type IKeyboardEvent = NativeSyntheticEvent<INativeKeyboardEvent>;
+
+export type INativeMouseEvent = {
+  target: number;
+  identifier: number;
+  pageX: number;
+  pageY: number;
+  locationX: number;
+  locationY: number;
+  timestamp: number;
+  pointerType: string;
+  force: number;
+  isLeftButton: boolean;
+  isRightButton: boolean;
+  isMiddleButton: boolean;
+  isBarrelButtonPressed: boolean;
+  isHorizontalScrollWheel: boolean;
+  isEraser: boolean;
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+};
+
+export type IMouseEvent = NativeSyntheticEvent<INativeMouseEvent>;
+
+export interface ViewPropsWindows {
+  /**
+   * Specifies the Tooltip for the view
+   */
+  tooltip?: string;
+
+  /**
+   * Indicates the TabIndex to use for this view
+   */
+  tabIndex?: number;
+
+  /**
+   * Specifies if the control should show System focus visuals
+   */
+  enableFocusRing?: boolean;
+
+  /**
+   * Event fired when the mouse leaves the view
+   */
+  onMouseLeave?: (args: IMouseEvent) => void;
+
+  /**
+   * Event fired when the mouse enters the view
+   */
+  onMouseEnter?: (args: IMouseEvent) => void;
+
+  onKeyDown?: (args: IKeyboardEvent) => void;
+  onKeyDownCapture?: (args: IKeyboardEvent) => void;
+  onKeyUp?: (args: IKeyboardEvent) => void;
+  onKeyUpCapture?: (args: IKeyboardEvent) => void;
+
+  keyDownEvents?: IHandledKeyboardEvent[];
+  keyUpEvents?: IHandledKeyboardEvent[];
+}
+
+// Windows]
+
 /**
  * @see https://reactnative.dev/docs/view#props
  */
 export interface ViewProps
   extends ViewPropsAndroid,
     ViewPropsIOS,
+    ViewPropsWindows,
     GestureResponderHandlers,
     Touchable,
     PointerEvents,

package/Libraries/Components/View/ViewPropTypes.js

@@ -87,6 +87,8 @@ type MouseEventProps = $ReadOnly<{|
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
 type PointerEventProps = $ReadOnly<{|
+  onClick?: ?(event: PointerEvent) => void,
+  onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,
   onPointerEnterCapture?: ?(event: PointerEvent) => void,
   onPointerLeave?: ?(event: PointerEvent) => void,
@@ -103,6 +105,10 @@ type PointerEventProps = $ReadOnly<{|
   onPointerOverCapture?: ?(e: PointerEvent) => void,
   onPointerOut?: ?(e: PointerEvent) => void,
   onPointerOutCapture?: ?(e: PointerEvent) => void,
+  onGotPointerCapture?: ?(e: PointerEvent) => void,
+  onGotPointerCaptureCapture?: ?(e: PointerEvent) => void,
+  onLostPointerCapture?: ?(e: PointerEvent) => void,
+  onLostPointerCaptureCapture?: ?(e: PointerEvent) => void,
 |}>;
 
 type FocusEventProps = $ReadOnly<{|
@@ -158,8 +164,8 @@ type GestureResponderEventProps = $ReadOnly<{|
    * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic
    * touch event as described above.
    *
-   * PanResponder includes a note `// TODO: t7467124 investigate if this can be removed` that
-   * should help fixing this return type.
+   * Return true from this callback to prevent any other native components from
+   * becoming responder until this responder terminates (Android-only).
    *
    * See https://reactnative.dev/docs/view#onrespondergrant
    */
@@ -563,7 +569,16 @@ export type ViewProps = $ReadOnly<{|
   collapsable?: ?boolean,
 
   /**
-   * Used to locate this view from native classes.
+   * 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').
+   *
+   * This prop only works when using Fabric.
+   */
+  experimental_layoutConformance?: ?('strict' | 'classic'),
+
+  /**
+   * Used to locate this view from native classes. Has precedence over `nativeID` prop.
    *
    * > This disables the 'layout-only view removal' optimization for this view!
    *

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

@@ -88,6 +88,8 @@ type MouseEventProps = $ReadOnly<{|
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
 type PointerEventProps = $ReadOnly<{|
+  onClick?: ?(event: PointerEvent) => void,
+  onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,
   onPointerEnterCapture?: ?(event: PointerEvent) => void,
   onPointerLeave?: ?(event: PointerEvent) => void,
@@ -104,6 +106,10 @@ type PointerEventProps = $ReadOnly<{|
   onPointerOverCapture?: ?(e: PointerEvent) => void,
   onPointerOut?: ?(e: PointerEvent) => void,
   onPointerOutCapture?: ?(e: PointerEvent) => void,
+  onGotPointerCapture?: ?(e: PointerEvent) => void,
+  onGotPointerCaptureCapture?: ?(e: PointerEvent) => void,
+  onLostPointerCapture?: ?(e: PointerEvent) => void,
+  onLostPointerCaptureCapture?: ?(e: PointerEvent) => void,
 |}>;
 
 type FocusEventProps = $ReadOnly<{|
@@ -159,8 +165,8 @@ type GestureResponderEventProps = $ReadOnly<{|
    * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic
    * touch event as described above.
    *
-   * PanResponder includes a note `// TODO: t7467124 investigate if this can be removed` that
-   * should help fixing this return type.
+   * Return true from this callback to prevent any other native components from
+   * becoming responder until this responder terminates (Android-only).
    *
    * See https://reactnative.dev/docs/view#onrespondergrant
    */
@@ -434,6 +440,17 @@ type IOSViewProps = $ReadOnly<{|
 |}>;
 
 // [Windows
+export const EventPhase = {
+  None: 0,
+  Capturing: 1,
+  AtTarget: 2,
+  Bubbling: 3,
+};
+
+export const HandledEventPhase = {
+  Capturing: EventPhase.Capturing,
+  Bubbling: EventPhase.Bubbling,
+};
 
 export type HandledKeyboardEvent = $ReadOnly<{|
   altKey?: ?boolean,
@@ -467,8 +484,12 @@ type WindowsViewProps = $ReadOnly<{|
 
   disabled?: ?boolean,
 
+  accessibilityLevel?: ?number,
+  'aria-level'?: ?number,
   accessibilityPosInSet?: ?number,
+  'aria-posinset'?: ?number,
   accessibilitySetSize?: ?number,
+  'aria-setsize'?: ?number,
 
   /**
    * Specifies if the control should show System focus visuals
@@ -614,7 +635,16 @@ export type ViewProps = $ReadOnly<{|
   collapsable?: ?boolean,
 
   /**
-   * Used to locate this view from native classes.
+   * 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').
+   *
+   * This prop only works when using Fabric.
+   */
+  experimental_layoutConformance?: ?('strict' | 'classic'),
+
+  /**
+   * Used to locate this view from native classes. Has precedence over `nativeID` prop.
    *
    * > This disables the 'layout-only view removal' optimization for this view!
    *

package/Libraries/Core/Devtools/loadBundleFromServer.js

@@ -0,0 +1,152 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import Networking from '../../Network/RCTNetworking';
+import HMRClient from '../../Utilities/HMRClient';
+import LoadingView from '../../Utilities/LoadingView';
+import getDevServer from './getDevServer';
+
+declare var global: {globalEvalWithSourceUrl?: (string, string) => mixed, ...};
+
+let pendingRequests = 0;
+
+const cachedPromisesByUrl = new Map<string, Promise<void>>();
+
+function asyncRequest(
+  url: string,
+): Promise<{body: string, headers: {[string]: string}}> {
+  let id = null;
+  let responseText = null;
+  let headers = null;
+  let dataListener;
+  let completeListener;
+  let responseListener;
+  let incrementalDataListener;
+  return new Promise<{body: string, headers: {[string]: string}}>(
+    (resolve, reject) => {
+      dataListener = Networking.addListener(
+        'didReceiveNetworkData',
+        ([requestId, response]) => {
+          if (requestId === id) {
+            responseText = response;
+          }
+        },
+      );
+      incrementalDataListener = Networking.addListener(
+        'didReceiveNetworkIncrementalData',
+        ([requestId, data]) => {
+          if (requestId === id) {
+            if (responseText != null) {
+              responseText += data;
+            } else {
+              responseText = data;
+            }
+          }
+        },
+      );
+      responseListener = Networking.addListener(
+        'didReceiveNetworkResponse',
+        ([requestId, status, responseHeaders]) => {
+          if (requestId === id) {
+            headers = responseHeaders;
+          }
+        },
+      );
+      completeListener = Networking.addListener(
+        'didCompleteNetworkResponse',
+        ([requestId, error]) => {
+          if (requestId === id) {
+            if (error) {
+              reject(error);
+            } else {
+              //$FlowFixMe[incompatible-call]
+              resolve({body: responseText, headers});
+            }
+          }
+        },
+      );
+      Networking.sendRequest(
+        'GET',
+        'asyncRequest',
+        url,
+        {},
+        '',
+        'text',
+        true,
+        0,
+        requestId => {
+          id = requestId;
+        },
+        true,
+      );
+    },
+  ).finally(() => {
+    dataListener?.remove();
+    completeListener?.remove();
+    responseListener?.remove();
+    incrementalDataListener?.remove();
+  });
+}
+
+function buildUrlForBundle(bundlePathAndQuery: string) {
+  const {url: serverUrl} = getDevServer();
+  return (
+    serverUrl.replace(/\/+$/, '') + '/' + bundlePathAndQuery.replace(/^\/+/, '')
+  );
+}
+
+module.exports = function (bundlePathAndQuery: string): Promise<void> {
+  const requestUrl = buildUrlForBundle(bundlePathAndQuery);
+  let loadPromise = cachedPromisesByUrl.get(requestUrl);
+
+  if (loadPromise) {
+    return loadPromise;
+  }
+  LoadingView.showMessage('Downloading...', 'load');
+  ++pendingRequests;
+
+  loadPromise = asyncRequest(requestUrl)
+    .then<void>(({body, headers}) => {
+      if (
+        headers['Content-Type'] != null &&
+        headers['Content-Type'].indexOf('application/json') >= 0
+      ) {
+        // Errors are returned as JSON.
+        throw new Error(
+          JSON.parse(body).message ||
+            `Unknown error fetching '${bundlePathAndQuery}'`,
+        );
+      }
+
+      HMRClient.registerBundle(requestUrl);
+
+      // Some engines do not support `sourceURL` as a comment. We expose a
+      // `globalEvalWithSourceUrl` function to handle updates in that case.
+      if (global.globalEvalWithSourceUrl) {
+        global.globalEvalWithSourceUrl(body, requestUrl);
+      } else {
+        // eslint-disable-next-line no-eval
+        eval(body);
+      }
+    })
+    .catch<void>(e => {
+      cachedPromisesByUrl.delete(requestUrl);
+      throw e;
+    })
+    .finally(() => {
+      if (!--pendingRequests) {
+        LoadingView.hide();
+      }
+    });
+
+  cachedPromisesByUrl.set(requestUrl, loadPromise);
+  return loadPromise;
+};

package/Libraries/Core/Devtools/symbolicateStackTrace.js

@@ -31,6 +31,7 @@ export type SymbolicatedStackTrace = $ReadOnly<{
 
 async function symbolicateStackTrace(
   stack: Array<StackFrame>,
+  extraData?: mixed,
 ): Promise<SymbolicatedStackTrace> {
   const devServer = getDevServer();
   if (!devServer.bundleLoadedFromServer) {
@@ -41,7 +42,7 @@ async function symbolicateStackTrace(
   const fetch = global.fetch ?? require('../../Network/fetch');
   const response = await fetch(devServer.url + 'symbolicate', {
     method: 'POST',
-    body: JSON.stringify({stack}),
+    body: JSON.stringify({stack, extraData}),
   });
   return await response.json();
 }

package/Libraries/Core/ExceptionsManager.js

@@ -78,6 +78,19 @@ function reportException(
   message =
     e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
 
+  // $FlowFixMe[unclear-type]
+  const extraData: Object = {
+    // $FlowFixMe[incompatible-use] we can't define a type with a Symbol-keyed field in flow
+    ...e[decoratedExtraDataKey],
+    jsEngine: e.jsEngine,
+    rawStack: e.stack,
+  };
+  if (e.cause != null && typeof e.cause === 'object') {
+    extraData.stackSymbols = e.cause.stackSymbols;
+    extraData.stackReturnAddresses = e.cause.stackReturnAddresses;
+    extraData.stackElements = e.cause.stackElements;
+  }
+
   const data = preprocessException({
     message,
     originalMessage: message === originalMessage ? null : originalMessage,
@@ -87,12 +100,7 @@ function reportException(
     stack,
     id: currentExceptionID,
     isFatal,
-    extraData: {
-      // $FlowFixMe[incompatible-use] we can't define a type with a Symbol-keyed field in flow
-      ...e[decoratedExtraDataKey],
-      jsEngine: e.jsEngine,
-      rawStack: e.stack,
-    },
+    extraData,
   });
 
   if (reportToConsole) {
@@ -117,7 +125,8 @@ function reportException(
   }
 }
 
-declare var console: typeof console & {
+declare var console: {
+  error: typeof console.error,
   _errorOriginal: typeof console.error,
   reportErrorsAsExceptions: boolean,
   ...

package/Libraries/Core/ExtendedError.js

@@ -18,4 +18,16 @@ export type ExtendedError = Error &
     // Note: A field keyed by the Symbol ExceptionsManager.decoratedExtraDataKey is also read from ExtendedErrors.
     // This field isn't documented in the types as Flow does not support this usecase, but it's effectively:
     // [decoratedExtraDataKey]?: {[string]: mixed},
+
+    // Included for native errors
+    cause?: {
+      name: string,
+      message: string,
+      // $FlowFixMe[unclear-type]
+      stackElements?: $ReadOnlyArray<Object>,
+      // $FlowFixMe[unclear-type]
+      stackSymbols?: $ReadOnlyArray<Object>,
+      // $FlowFixMe[unclear-type]
+      stackReturnAddresses?: $ReadOnlyArray<Object>,
+    },
   };

package/Libraries/Core/ReactNativeVersion.js

@@ -11,7 +11,7 @@
 
 exports.version = {
   major: 0,
-  minor: 72,
-  patch: 6,
-  prerelease: null,
+  minor: 73,
+  patch: 0,
+  prerelease: 'rc.1',
 };

package/Libraries/Core/ReactNativeVersionCheck.js

@@ -39,8 +39,6 @@ exports.checkVersions = function checkVersions(): void {
   }
 };
 
-// Note: in OSS, the prerelease version is usually 0.Y.0-rc.W, so it is a string and not a number
-// Then we need to keep supporting that object shape.
 function _formatVersion(
   version:
     | (typeof Platform)['constants']['reactNativeVersion']