@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.1

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

@@ -75,10 +75,10 @@ export interface AccessibilityProps
    */
   accessibilityValue?: AccessibilityValue | undefined;
 
-  'aria-valuemax'?: AccessibilityValue['max'];
-  'aria-valuemin'?: AccessibilityValue['min'];
-  'aria-valuenow'?: AccessibilityValue['now'];
-  'aria-valuetext'?: AccessibilityValue['text'];
+  'aria-valuemax'?: AccessibilityValue['max'] | undefined;
+  'aria-valuemin'?: AccessibilityValue['min'] | undefined;
+  'aria-valuenow'?: AccessibilityValue['now'] | undefined;
+  'aria-valuetext'?: AccessibilityValue['text'] | undefined;
   /**
    * When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
    */
@@ -105,7 +105,7 @@ export interface AccessibilityProps
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */
-  role?: Role;
+  role?: Role | undefined;
 }
 
 export type AccessibilityActionInfo = Readonly<{
@@ -274,7 +274,7 @@ export interface AccessibilityPropsIOS {
   accessibilityViewIsModal?: boolean | undefined;
 
   /**
-   * When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
+   * When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
    * @platform ios
    */
   onAccessibilityEscape?: (() => void) | undefined;

package/Libraries/Components/View/ViewAccessibility.js

@@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 export type AccessibilityRole =
   | 'none'
   | 'button'
+  | 'dropdownlist'
   | 'togglebutton'
   | 'link'
   | 'search'
@@ -44,7 +45,15 @@ export type AccessibilityRole =
   | 'timer'
   | 'list'
   | 'toolbar'
-  | 'grid';
+  | 'grid'
+  | 'pager'
+  | 'scrollview'
+  | 'horizontalscrollview'
+  | 'viewgroup'
+  | 'webview'
+  | 'drawerlayout'
+  | 'slidingdrawer'
+  | 'iconmenu';
 
 // Role types for web
 export type Role =

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

@@ -76,10 +76,10 @@ export interface AccessibilityProps
    */
   accessibilityValue?: AccessibilityValue | undefined;
 
-  'aria-valuemax'?: AccessibilityValue['max'];
-  'aria-valuemin'?: AccessibilityValue['min'];
-  'aria-valuenow'?: AccessibilityValue['now'];
-  'aria-valuetext'?: AccessibilityValue['text'];
+  'aria-valuemax'?: AccessibilityValue['max'] | undefined;
+  'aria-valuemin'?: AccessibilityValue['min'] | undefined;
+  'aria-valuenow'?: AccessibilityValue['now'] | undefined;
+  'aria-valuetext'?: AccessibilityValue['text'] | undefined;
   /**
    * When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
    */
@@ -106,7 +106,7 @@ export interface AccessibilityProps
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */
-  role?: Role;
+  role?: Role | undefined;
 }
 
 export type AccessibilityActionInfo = Readonly<{

package/Libraries/Components/View/ViewNativeComponent.js

@@ -45,7 +45,10 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderTopEndRadius: true,
           borderBottomStartRadius: true,
           borderBottomEndRadius: true,
-
+          borderEndEndRadius: true,
+          borderEndStartRadius: true,
+          borderStartEndRadius: true,
+          borderStartStartRadius: true,
           borderStyle: true,
           hitSlop: true,
           pointerEvents: true,
@@ -61,15 +64,36 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderStartWidth: true,
           borderEndWidth: true,
 
-          borderColor: {process: require('../../StyleSheet/processColor')},
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
+          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'),
+            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,
           },
-          borderStartColor: {process: require('../../StyleSheet/processColor')},
-          borderEndColor: {process: require('../../StyleSheet/processColor')},
 
           focusable: true,
           overflow: true,

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

@@ -173,7 +173,7 @@ export interface ViewProps
     Touchable,
     PointerEvents,
     AccessibilityProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /**
    * This defines how far a touch event can start away from the view.
    * Typical interface guidelines recommend touch targets that are at least

package/Libraries/Components/View/ViewPropTypes.js

@@ -543,7 +543,7 @@ export type ViewProps = $ReadOnly<{|
   'aria-hidden'?: ?boolean,
 
   /**
-   * It reperesents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * It represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
    *
    * @platform android
    */

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

@@ -292,7 +292,7 @@ export interface ViewProps
     Touchable,
     PointerEvents,
     AccessibilityProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /**
    * This defines how far a touch event can start away from the view.
    * Typical interface guidelines recommend touch targets that are at least

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

@@ -592,7 +592,7 @@ export type ViewProps = $ReadOnly<{|
   'aria-hidden'?: ?boolean,
 
   /**
-   * It reperesents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * It represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
    *
    * @platform android
    */

package/Libraries/Components/View/ViewWin32.js

@@ -14,8 +14,8 @@ import type {ViewProps} from './ViewPropTypes';
 import View from './View';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import UIManager from '../../ReactNative/UIManager';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 import warnOnce from '../../Utilities/warnOnce';
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
 
 /**
  * Basic View component with additional Win32 specific functionality
@@ -126,9 +126,9 @@ const ViewWin32: React.AbstractComponent<
     );
 
     // $FlowFixMe
-    const setNativeRef = setAndForwardRef<typeof View | null>({
-      getForwardedRef: () => forwardedRef,
+    const setNativeRef = useMergeRefs<typeof View | null>({
       setLocalRef,
+      forwardedRef,
     });
 
     return (

package/Libraries/Core/Devtools/openFileInEditor.js

@@ -13,6 +13,7 @@
 const getDevServer = require('./getDevServer');
 
 function openFileInEditor(file: string, lineNumber: number) {
+  // $FlowFixMe[unused-promise]
   fetch(getDevServer().url + 'open-stack-frame', {
     method: 'POST',
     headers: {

package/Libraries/Core/Devtools/openURLInBrowser.js

@@ -13,6 +13,7 @@
 const getDevServer = require('./getDevServer');
 
 function openURLInBrowser(url: string) {
+  // $FlowFixMe[unused-promise]
   fetch(getDevServer().url + 'open-url', {
     method: 'POST',
     body: JSON.stringify({url}),

package/Libraries/Core/Devtools/parseErrorStack.js

@@ -22,7 +22,7 @@ function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
       continue;
     }
     const {location, functionName} = entry;
-    if (location.type === 'NATIVE') {
+    if (location.type === 'NATIVE' || location.type === 'INTERNAL_BYTECODE') {
       continue;
     }
     frames.push({
@@ -48,7 +48,7 @@ function parseErrorStack(errorStack?: string): Array<StackFrame> {
     ? errorStack
     : global.HermesInternal
     ? convertHermesStack(parseHermesStack(errorStack))
-    : stacktraceParser.parse(errorStack).map(frame => ({
+    : stacktraceParser.parse(errorStack).map((frame): StackFrame => ({
         ...frame,
         column: frame.column != null ? frame.column - 1 : null,
       }));

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -10,46 +10,54 @@
 
 'use strict';
 
-type HermesStackLocationNative = {|
-  +type: 'NATIVE',
-|};
+type HermesStackLocationNative = $ReadOnly<{
+  type: 'NATIVE',
+}>;
 
-type HermesStackLocationSource = {|
-  +type: 'SOURCE',
-  +sourceUrl: string,
-  +line1Based: number,
-  +column1Based: number,
-|};
+type HermesStackLocationSource = $ReadOnly<{
+  type: 'SOURCE',
+  sourceUrl: string,
+  line1Based: number,
+  column1Based: number,
+}>;
 
-type HermesStackLocationBytecode = {|
-  +type: 'BYTECODE',
-  +sourceUrl: string,
-  +line1Based: number,
-  +virtualOffset0Based: number,
-|};
+type HermesStackLocationInternalBytecode = $ReadOnly<{
+  type: 'INTERNAL_BYTECODE',
+  sourceUrl: string,
+  line1Based: number,
+  virtualOffset0Based: number,
+}>;
+
+type HermesStackLocationBytecode = $ReadOnly<{
+  type: 'BYTECODE',
+  sourceUrl: string,
+  line1Based: number,
+  virtualOffset0Based: number,
+}>;
 
 type HermesStackLocation =
   | HermesStackLocationNative
   | HermesStackLocationSource
+  | HermesStackLocationInternalBytecode
   | HermesStackLocationBytecode;
 
-type HermesStackEntryFrame = {|
-  +type: 'FRAME',
-  +location: HermesStackLocation,
-  +functionName: string,
-|};
+type HermesStackEntryFrame = $ReadOnly<{
+  type: 'FRAME',
+  location: HermesStackLocation,
+  functionName: string,
+}>;
 
-type HermesStackEntrySkipped = {|
-  +type: 'SKIPPED',
-  +count: number,
-|};
+type HermesStackEntrySkipped = $ReadOnly<{
+  type: 'SKIPPED',
+  count: number,
+}>;
 
 type HermesStackEntry = HermesStackEntryFrame | HermesStackEntrySkipped;
 
-export type HermesParsedStack = {|
-  +message: string,
-  +entries: $ReadOnlyArray<HermesStackEntry>,
-|};
+export type HermesParsedStack = $ReadOnly<{
+  message: string,
+  entries: $ReadOnlyArray<HermesStackEntry>,
+}>;
 
 // Capturing groups:
 // 1. function name
@@ -65,6 +73,11 @@ const RE_FRAME =
 // 1. count of skipped frames
 const RE_SKIPPED = /^ {4}... skipping (\d+) frames$/;
 
+function isInternalBytecodeSourceUrl(sourceUrl: string): boolean {
+  // See https://github.com/facebook/hermes/blob/3332fa020cae0bab751f648db7c94e1d687eeec7/lib/VM/Runtime.cpp#L1100
+  return sourceUrl === 'InternalBytecode.js';
+}
+
 function parseLine(line: string): ?HermesStackEntry {
   const asFrame = line.match(RE_FRAME);
   if (asFrame) {
@@ -75,12 +88,19 @@ function parseLine(line: string): ?HermesStackEntry {
         asFrame[2] === 'native'
           ? {type: 'NATIVE'}
           : asFrame[3] === 'address at '
-          ? {
-              type: 'BYTECODE',
-              sourceUrl: asFrame[4],
-              line1Based: Number.parseInt(asFrame[5], 10),
-              virtualOffset0Based: Number.parseInt(asFrame[6], 10),
-            }
+          ? isInternalBytecodeSourceUrl(asFrame[4])
+            ? {
+                type: 'INTERNAL_BYTECODE',
+                sourceUrl: asFrame[4],
+                line1Based: Number.parseInt(asFrame[5], 10),
+                virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+              }
+            : {
+                type: 'BYTECODE',
+                sourceUrl: asFrame[4],
+                line1Based: Number.parseInt(asFrame[5], 10),
+                virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+              }
           : {
               type: 'SOURCE',
               sourceUrl: asFrame[4],

package/Libraries/Core/ExceptionsManager.js

@@ -103,7 +103,7 @@ function reportException(
   }
 
   if (__DEV__) {
-    const LogBox = require('../LogBox/LogBox');
+    const LogBox = require('../LogBox/LogBox').default;
     LogBox.addException({
       ...data,
       isComponentError: !!e.isComponentError,
@@ -184,7 +184,7 @@ function reactConsoleErrorHandler(...args) {
     // Throwing an uncaught exception:
     // 1. exception thrown
     // 2. picked up by handleException
-    // 3. should be send to console.error (not console._errorOriginal, as DevTools might have patched _later_ and it needs to send it to Metro)
+    // 3. should be sent to console.error (not console._errorOriginal, as DevTools might have patched _later_ and it needs to send it to Metro)
     // 4. that _might_ bubble again to the `reactConsoleErrorHandle` defined here
     //    -> should not handle exception _again_, to avoid looping / showing twice (this code branch)
     // 5. should still bubble up to original console (which might either be console.log, or the DevTools handler in case that one patched _earlier_)

package/Libraries/Core/InitializeCore.js

@@ -27,6 +27,7 @@
 const start = Date.now();
 
 require('./setUpGlobals');
+require('./setUpDOM');
 require('./setUpPerformance');
 require('./setUpErrorHandling');
 require('./polyfillPromise');
@@ -40,7 +41,7 @@ require('./setUpSegmentFetcher');
 if (__DEV__) {
   require('./checkNativeVersion');
   require('./setUpDeveloperTools');
-  require('../LogBox/LogBox').install();
+  require('../LogBox/LogBox').default.install();
 }
 
 require('../ReactNative/AppRegistry');

package/Libraries/Core/ReactNativeVersion.js

@@ -11,7 +11,7 @@
 
 exports.version = {
   major: 0,
-  minor: 71,
-  patch: 6,
-  prerelease: null,
+  minor: 0,
+  patch: 0,
+  prerelease: '20230321-2153-7b86e3aae',
 };

package/Libraries/Core/ReactNativeVersionCheck.js

@@ -40,15 +40,7 @@ exports.checkVersions = function checkVersions(): void {
 };
 
 function _formatVersion(
-  version:
-    | {major: number, minor: number, patch: number, prerelease: ?number}
-    | {major: number, minor: number, patch: number, prerelease: ?string}
-    | $TEMPORARY$object<{
-        major: number,
-        minor: number,
-        patch: number,
-        prerelease: null,
-      }>,
+  version: (typeof Platform)['constants']['reactNativeVersion'],
 ): string {
   return (
     `${version.major}.${version.minor}.${version.patch}` +

package/Libraries/Core/ReactNativeVersionCheck.win32.js

@@ -42,15 +42,7 @@ exports.checkVersions = function checkVersions(): void {
 };
 
 function _formatVersion(
-  version:
-    | {major: number, minor: number, patch: number, prerelease: ?number}
-    | {major: number, minor: number, patch: number, prerelease: ?string}
-    | $TEMPORARY$object<{
-        major: number,
-        minor: number,
-        patch: number,
-        prerelease: null,
-      }>,
+  version: (typeof Platform)['constants']['reactNativeVersion'],
 ): string {
   return (
     `${version.major}.${version.minor}.${version.patch}` +

package/Libraries/Core/Timers/JSTimers.js

@@ -379,7 +379,7 @@ const JSTimers = {
 
   callIdleCallbacks: function (frameTime: number) {
     if (
-      FRAME_DURATION - (global.performance.now() - frameTime) <
+      FRAME_DURATION - (Date.now() - frameTime) <
       IDLE_CALLBACK_FRAME_DEADLINE
     ) {
       return;

package/Libraries/Core/Timers/immediateShim.js

@@ -40,6 +40,7 @@ function setImmediate(callback: Function, ...args: any): number {
     clearedImmediates.delete(id);
   }
 
+  // $FlowFixMe[incompatible-call]
   global.queueMicrotask(() => {
     if (!clearedImmediates.has(id)) {
       callback.apply(undefined, args);

package/Libraries/Core/Timers/queueMicrotask.js

@@ -13,7 +13,7 @@
 let resolvedPromise;
 
 /**
- * Polyfill for the microtask queuening API defined by WHATWG HTMP spec.
+ * Polyfill for the microtask queueing API defined by WHATWG HTML spec.
  * https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-queuemicrotask
  *
  * The method must queue a microtask to invoke @param {function} callback, and

package/Libraries/Core/setUpAlert.js

@@ -15,7 +15,7 @@
  * You can use this module directly, or just require InitializeCore.
  */
 if (!global.alert) {
-  global.alert = function (text) {
+  global.alert = function (text: string) {
     // Require Alert on demand. Requiring it too early can lead to issues
     // with things like Platform not being fully initialized.
     require('../Alert/Alert').alert('Alert', '' + text);

package/Libraries/Core/setUpDOM.js

@@ -0,0 +1,18 @@
+/**
+ * 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
+ * @format
+ */
+
+import DOMRect from '../DOM/Geometry/DOMRect';
+import DOMRectReadOnly from '../DOM/Geometry/DOMRectReadOnly';
+
+// $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it
+global.DOMRect = DOMRect;
+
+// $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it
+global.DOMRectReadOnly = DOMRectReadOnly;

package/Libraries/Core/setUpDeveloperTools.js

@@ -56,7 +56,7 @@ if (__DEV__) {
         'debug',
       ].forEach(level => {
         const originalFunction = console[level];
-        console[level] = function (...args) {
+        console[level] = function (...args: $ReadOnlyArray<mixed>) {
           HMRClient.log(level, args);
           originalFunction.apply(console, args);
         };

package/Libraries/Core/setUpGlobals.js

@@ -15,18 +15,21 @@
  * You can use this module directly, or just require InitializeCore.
  */
 if (global.window === undefined) {
-  // $FlowFixMe[cannot-write]
+  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
   global.window = global;
 }
 
 if (global.self === undefined) {
-  // $FlowFixMe[cannot-write]
+  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
   global.self = global;
 }
 
 // Set up process
+// $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
 global.process = global.process || {};
+// $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
 global.process.env = global.process.env || {};
 if (!global.process.env.NODE_ENV) {
+  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
   global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';
 }

package/Libraries/Core/setUpNavigator.js

@@ -12,10 +12,11 @@
 
 const {polyfillObjectProperty} = require('../Utilities/PolyfillFunctions');
 
-let navigator = global.navigator;
+const navigator = global.navigator;
 if (navigator === undefined) {
-  global.navigator = navigator = {};
+  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
+  global.navigator = {product: 'ReactNative'};
+} else {
+  // see https://github.com/facebook/react-native/issues/10881
+  polyfillObjectProperty(navigator, 'product', () => 'ReactNative');
 }
-
-// see https://github.com/facebook/react-native/issues/10881
-polyfillObjectProperty(navigator, 'product', () => 'ReactNative');

package/Libraries/Core/setUpPerformance.js

@@ -8,19 +8,29 @@
  * @format
  */
 
-'use strict';
+import NativePerformance from '../WebPerformance/NativePerformance';
+import Performance from '../WebPerformance/Performance';
 
-if (!global.performance) {
-  global.performance = ({}: {now?: () => number});
-}
+// In case if the native implementation of the Performance API is available, use it,
+// otherwise fall back to the legacy/default one, which only defines 'Performance.now()'
+if (NativePerformance) {
+  // $FlowExpectedError[cannot-write]
+  global.performance = new Performance();
+} else {
+  if (!global.performance) {
+    // $FlowExpectedError[cannot-write]
+    global.performance = ({}: {now?: () => number});
+  }
 
-/**
- * Returns a double, measured in milliseconds.
- * https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
- */
-if (typeof global.performance.now !== 'function') {
-  global.performance.now = function () {
-    const performanceNow = global.nativePerformanceNow || Date.now;
-    return performanceNow();
-  };
+  /**
+   * Returns a double, measured in milliseconds.
+   * https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
+   */
+  if (typeof global.performance.now !== 'function') {
+    // $FlowExpectedError[cannot-write]
+    global.performance.now = function () {
+      const performanceNow = global.nativePerformanceNow || Date.now;
+      return performanceNow();
+    };
+  }
 }

package/Libraries/Core/setUpReactDevTools.js

@@ -62,6 +62,7 @@ if (__DEV__) {
       });
 
       const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+      const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
 
       reactDevTools.connectToDevTools({
         isAppActive,
@@ -70,6 +71,7 @@ if (__DEV__) {
           ReactNativeStyleAttributes,
         ),
         websocket: ws,
+        devToolsSettingsManager,
       });
     }
   };