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

package/Libraries/Text/Text.d.ts

@@ -27,7 +27,7 @@ export interface TextPropsIOS {
   adjustsFontSizeToFit?: boolean | undefined;
 
   /**
-   * The Dynamic Text scale ramp to apply to this element on iOS.
+   * The Dynamic Type scale ramp to apply to this element on iOS.
    */
   dynamicTypeRamp?:
     | 'caption2'
@@ -53,6 +53,16 @@ export interface TextPropsIOS {
    * default, a gray oval highlights the text on press down.
    */
   suppressHighlighting?: boolean | undefined;
+
+  /**
+   * Set line break strategy on iOS.
+   */
+  lineBreakStrategyIOS?:
+    | 'none'
+    | 'standard'
+    | 'hangul-word'
+    | 'push-out'
+    | undefined;
 }
 
 export interface TextPropsAndroid {
@@ -107,7 +117,7 @@ export interface TextProps
    */
   allowFontScaling?: boolean | undefined;
 
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * This can be one of the following values:

package/Libraries/Text/Text.js

@@ -9,17 +9,16 @@
  */
 
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {TextProps} from './TextProps';
 
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
-import StyleSheet from '../StyleSheet/StyleSheet';
 import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
-import {type TextProps} from './TextProps';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -36,6 +35,7 @@ const Text: React.AbstractComponent<
     accessible,
     accessibilityLabel,
     accessibilityRole,
+    accessibilityState,
     allowFontScaling,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -64,13 +64,23 @@ const Text: React.AbstractComponent<
 
   const [isHighlighted, setHighlighted] = useState(false);
 
-  const _accessibilityState = {
-    busy: ariaBusy ?? props.accessibilityState?.busy,
-    checked: ariaChecked ?? props.accessibilityState?.checked,
-    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
-    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
-    selected: ariaSelected ?? props.accessibilityState?.selected,
-  };
+  let _accessibilityState;
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
 
   const _disabled =
     restProps.disabled != null
@@ -174,25 +184,11 @@ const Text: React.AbstractComponent<
       ? null
       : processColor(restProps.selectionColor);
 
-  let style = flattenStyle(restProps.style);
-
-  let _selectable = restProps.selectable;
-  if (style?.userSelect != null) {
-    _selectable = userSelectToSelectableMap[style.userSelect];
-  }
-
-  if (style?.verticalAlign != null) {
-    style = StyleSheet.compose(style, {
-      textAlignVertical:
-        verticalAlignToTextAlignVerticalMap[style.verticalAlign],
-    });
-  }
+  let style = restProps.style;
 
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
-      style = StyleSheet.compose(restProps.style, {
-        color: 'magenta',
-      });
+      style = [restProps.style, {color: 'magenta'}];
     }
   }
 
@@ -211,10 +207,23 @@ const Text: React.AbstractComponent<
     default: accessible,
   });
 
-  let flattenedStyle = flattenStyle(style);
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  style = flattenStyle(style);
+
+  if (typeof style?.fontWeight === 'number') {
+    style.fontWeight = style?.fontWeight.toString();
+  }
+
+  let _selectable = restProps.selectable;
+  if (style?.userSelect != null) {
+    _selectable = userSelectToSelectableMap[style.userSelect];
+    delete style.userSelect;
+  }
 
-  if (typeof flattenedStyle?.fontWeight === 'number') {
-    flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
+  if (style?.verticalAlign != null) {
+    style.textAlignVertical =
+      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    delete style.verticalAlign;
   }
 
   const _hasOnPressOrOnLongPress =
@@ -223,46 +232,46 @@ const Text: React.AbstractComponent<
   return hasTextAncestor ? (
     <NativeVirtualText
       {...restProps}
-      accessibilityState={_accessibilityState}
       {...eventHandlersForText}
       accessibilityLabel={ariaLabel ?? accessibilityLabel}
       accessibilityRole={
         role ? getAccessibilityRoleFromRole(role) : accessibilityRole
       }
+      accessibilityState={_accessibilityState}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
-      selectable={_selectable}
       nativeID={id ?? nativeID}
       numberOfLines={numberOfLines}
-      selectionColor={selectionColor}
-      style={flattenedStyle}
       ref={forwardedRef}
+      selectable={_selectable}
+      selectionColor={selectionColor}
+      style={style}
     />
   ) : (
     <TextAncestor.Provider value={true}>
       <NativeText
         {...restProps}
         {...eventHandlersForText}
-        disabled={_disabled}
-        selectable={_selectable}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        accessibilityRole={
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+        }
+        accessibilityState={nativeTextAccessibilityState}
         accessible={
           accessible == null && Platform.OS === 'android'
             ? _hasOnPressOrOnLongPress
             : _accessible
         }
-        accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        accessibilityState={nativeTextAccessibilityState}
-        accessibilityRole={
-          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-        }
         allowFontScaling={allowFontScaling !== false}
+        disabled={_disabled}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
         nativeID={id ?? nativeID}
         numberOfLines={numberOfLines}
-        selectionColor={selectionColor}
-        style={flattenedStyle}
         ref={forwardedRef}
+        selectable={_selectable}
+        selectionColor={selectionColor}
+        style={style}
       />
     </TextAncestor.Provider>
   );

package/Libraries/Text/TextProps.js

@@ -92,9 +92,8 @@ export type TextProps = $ReadOnly<{|
   'aria-selected'?: ?boolean,
 
   /**
-   * Reperesents 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
+   * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * This prop is listed for cross-platform reasons and has no real effect on Android or iOS.
    */
   'aria-labelledby'?: ?string,
 
@@ -230,7 +229,7 @@ export type TextProps = $ReadOnly<{|
   adjustsFontSizeToFit?: ?boolean,
 
   /**
-   * The Dynamic Text scale ramp to apply to this element on iOS.
+   * The Dynamic Type scale ramp to apply to this element on iOS.
    */
   dynamicTypeRamp?: ?(
     | 'caption2'

package/Libraries/TurboModule/samples/NativeSampleTurboModule.js

@@ -13,6 +13,11 @@ import type {RootTag, TurboModule} from '../RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModuleRegistry';
 
+export enum EnumInt {
+  A = 23,
+  B = 42,
+}
+
 export interface Spec extends TurboModule {
   // Exported methods.
   +getConstants: () => {|
@@ -22,6 +27,7 @@ export interface Spec extends TurboModule {
   |};
   +voidFunc: () => void;
   +getBool: (arg: boolean) => boolean;
+  +getEnum?: (arg: EnumInt) => EnumInt;
   +getNumber: (arg: number) => number;
   +getString: (arg: string) => string;
   +getArray: (arg: Array<any>) => Array<any>;

package/Libraries/Types/CodegenTypes.js

@@ -29,6 +29,7 @@ export type Double = number;
 export type Float = number;
 export type Int32 = number;
 export type UnsafeObject = $FlowFixMe; // Object is forbidden in strict mode
+export type UnsafeMixed = mixed;
 
 type DefaultTypes = number | boolean | string | $ReadOnlyArray<string>;
 // Default handling, ignore the unused value

package/Libraries/UTFSequence.js

@@ -31,6 +31,7 @@ const UTFSequence: {|
   NBSP: string,
   NDASH: string,
   NDASH_SP: string,
+  NEWLINE: string,
   PIZZA: string,
   TRIANGLE_LEFT: string,
   TRIANGLE_RIGHT: string,
@@ -45,10 +46,11 @@ const UTFSequence: {|
   MDASH_SP: '\u00A0\u2014\u00A0', //  — 
   NDASH: '\u2013', // en dash: –
   NDASH_SP: '\u00A0\u2013\u00A0', //  – 
+  NEWLINE: '\u000A',
   NBSP: '\u00A0', // non-breaking space:  
   PIZZA: '\uD83C\uDF55',
   TRIANGLE_LEFT: '\u25c0', // black left-pointing triangle
   TRIANGLE_RIGHT: '\u25b6', // black right-pointing triangle
 });
 
-module.exports = UTFSequence;
+export default UTFSequence;

package/Libraries/Utilities/Appearance.d.ts

@@ -28,6 +28,16 @@ export namespace Appearance {
    */
   export function getColorScheme(): ColorSchemeName;
 
+  /**
+   * Set the color scheme preference. This is useful for overriding the default
+   * color scheme preference for the app. Note that this will not change the
+   * appearance of the system UI, only the appearance of the app.
+   * Only available on iOS 13+ and Android 10+.
+   */
+  export function setColorScheme(
+    scheme: ColorSchemeName | null | undefined,
+  ): void;
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

package/Libraries/Utilities/Appearance.js

@@ -85,6 +85,19 @@ module.exports = {
     return nativeColorScheme;
   },
 
+  setColorScheme(colorScheme: ?ColorSchemeName): void {
+    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
+
+    invariant(
+      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+    );
+
+    if (NativeAppearance != null && NativeAppearance.setColorScheme != null) {
+      NativeAppearance.setColorScheme(nativeColorScheme);
+    }
+  },
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

package/Libraries/Utilities/Dimensions.js

@@ -127,4 +127,4 @@ if (!initialDims) {
 
 Dimensions.set(initialDims);
 
-module.exports = Dimensions;
+export default Dimensions;

package/Libraries/Utilities/Dimensions.win32.js

@@ -128,4 +128,4 @@ if (!initialDims) {
 
 Dimensions.set(initialDims);
 
-module.exports = Dimensions;
+export default Dimensions;

package/Libraries/Utilities/GlobalPerformanceLogger.js

@@ -10,8 +10,17 @@
 
 import type {IPerformanceLogger} from './createPerformanceLogger';
 
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import NativePerformance from '../WebPerformance/NativePerformance';
 import createPerformanceLogger from './createPerformanceLogger';
 
+function isLoggingForWebPerformance(): boolean {
+  return (
+    NativePerformance != null &&
+    ReactNativeFeatureFlags.isGlobalWebPerformanceLoggerEnabled()
+  );
+}
+
 /**
  * This is a global shared instance of IPerformanceLogger that is created with
  * createPerformanceLogger().
@@ -19,6 +28,8 @@ import createPerformanceLogger from './createPerformanceLogger';
  * that are logged during loading bundle. If you want to log something from your
  * React component you should use PerformanceLoggerContext instead.
  */
-const GlobalPerformanceLogger: IPerformanceLogger = createPerformanceLogger();
+const GlobalPerformanceLogger: IPerformanceLogger = createPerformanceLogger(
+  isLoggingForWebPerformance(),
+);
 
 module.exports = GlobalPerformanceLogger;

package/Libraries/Utilities/HMRClient.js

@@ -25,7 +25,7 @@ let hmrClient = null;
 let hmrUnavailableReason: string | null = null;
 let currentCompileErrorMessage: string | null = null;
 let didConnect: boolean = false;
-let pendingLogs: Array<[LogLevel, Array<mixed>]> = [];
+let pendingLogs: Array<[LogLevel, $ReadOnlyArray<mixed>]> = [];
 
 type LogLevel =
   | 'trace'
@@ -42,7 +42,7 @@ export type HMRClientNativeInterface = {|
   enable(): void,
   disable(): void,
   registerBundle(requestUrl: string): void,
-  log(level: LogLevel, data: Array<mixed>): void,
+  log(level: LogLevel, data: $ReadOnlyArray<mixed>): void,
   setup(
     platform: string,
     bundleEntry: string,
@@ -105,7 +105,7 @@ const HMRClient: HMRClientNativeInterface = {
     registerBundleEntryPoints(hmrClient);
   },
 
-  log(level: LogLevel, data: Array<mixed>) {
+  log(level: LogLevel, data: $ReadOnlyArray<mixed>) {
     if (!hmrClient) {
       // Catch a reasonable number of early logs
       // in case hmrClient gets initialized later.
@@ -247,17 +247,23 @@ Error: ${e.message}`;
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5
       const isNormalOrUnsetCloseReason =
+        closeEvent == null ||
         closeEvent.code === 1000 ||
         closeEvent.code === 1005 ||
         closeEvent.code == null;
 
-      if (isNormalOrUnsetCloseReason) {
-        setHMRUnavailableReason('Disconnected from Metro.');
-      } else {
-        setHMRUnavailableReason(
-          `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`,
-        );
-      }
+      setHMRUnavailableReason(
+        `${
+          isNormalOrUnsetCloseReason
+            ? 'Disconnected from Metro.'
+            : `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`
+        }
+
+To reconnect:
+- Ensure that Metro is running and available on the same network
+- Reload this app (will trigger further help if Metro cannot be connected to)
+      `,
+      );
     });
 
     if (isEnabled) {

package/Libraries/Utilities/{createPerformanceLogger.d.ts → IPerformanceLogger.d.ts}

@@ -9,10 +9,10 @@
 
 export type Timespan = {
   startTime: number;
-  endTime?: number;
-  totalTime?: number;
-  startExtras?: Extras;
-  endExtras?: Extras;
+  endTime?: number | undefined;
+  totalTime?: number | undefined;
+  startExtras?: Extras | undefined;
+  endExtras?: Extras | undefined;
 };
 
 // Extra values should be serializable primitives

package/Libraries/Utilities/IPerformanceLogger.js

@@ -0,0 +1,49 @@
+/**
+ * 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
+ */
+
+export type Timespan = {
+  startTime: number,
+  endTime?: number,
+  totalTime?: number,
+  startExtras?: Extras,
+  endExtras?: Extras,
+};
+
+// Extra values should be serializable primitives
+export type ExtraValue = number | string | boolean;
+
+export type Extras = {[key: string]: ExtraValue};
+
+export interface IPerformanceLogger {
+  addTimespan(
+    key: string,
+    startTime: number,
+    endTime: number,
+    startExtras?: Extras,
+    endExtras?: Extras,
+  ): void;
+  append(logger: IPerformanceLogger): void;
+  clear(): void;
+  clearCompleted(): void;
+  close(): void;
+  currentTimestamp(): number;
+  getExtras(): $ReadOnly<{[key: string]: ?ExtraValue, ...}>;
+  getPoints(): $ReadOnly<{[key: string]: ?number, ...}>;
+  getPointExtras(): $ReadOnly<{[key: string]: ?Extras, ...}>;
+  getTimespans(): $ReadOnly<{[key: string]: ?Timespan, ...}>;
+  hasTimespan(key: string): boolean;
+  isClosed(): boolean;
+  logEverything(): void;
+  markPoint(key: string, timestamp?: number, extras?: Extras): void;
+  removeExtra(key: string): ?ExtraValue;
+  setExtra(key: string, value: ExtraValue): void;
+  startTimespan(key: string, timestamp?: number, extras?: Extras): void;
+  stopTimespan(key: string, timestamp?: number, extras?: Extras): void;
+}

package/Libraries/Utilities/LoadingView.android.js

@@ -8,20 +8,37 @@
  * @flow strict-local
  */
 
-import ToastAndroid from '../Components/ToastAndroid/ToastAndroid';
-
-const TOAST_SHORT_DELAY = 2000;
-let isVisible = false;
+import processColor from '../StyleSheet/processColor';
+import Appearance from './Appearance';
+import NativeDevLoadingView from './NativeDevLoadingView';
 
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
-    if (!isVisible) {
-      ToastAndroid.show(message, ToastAndroid.SHORT);
-      isVisible = true;
-      setTimeout(() => {
-        isVisible = false;
-      }, TOAST_SHORT_DELAY);
+    if (NativeDevLoadingView) {
+      let backgroundColor;
+      let textColor;
+
+      if (type === 'refresh') {
+        backgroundColor = processColor('#2584e8');
+        textColor = processColor('#ffffff');
+      } else if (type === 'load') {
+        if (Appearance.getColorScheme() === 'dark') {
+          backgroundColor = processColor('#fafafa');
+          textColor = processColor('#242526');
+        } else {
+          backgroundColor = processColor('#404040');
+          textColor = processColor('#ffffff');
+        }
+      }
+
+      NativeDevLoadingView.showMessage(
+        message,
+        typeof textColor === 'number' ? textColor : null,
+        typeof backgroundColor === 'number' ? backgroundColor : null,
+      );
     }
   },
-  hide() {},
+  hide() {
+    NativeDevLoadingView && NativeDevLoadingView.hide();
+  },
 };

package/Libraries/Utilities/NativeAppearance.js

@@ -26,6 +26,7 @@ export interface Spec extends TurboModule {
   // types.
   /* 'light' | 'dark' */
   +getColorScheme: () => ?string;
+  +setColorScheme?: (colorScheme: string) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

package/Libraries/Utilities/NativePlatformConstantsWin.js

@@ -17,7 +17,7 @@ export interface Spec extends TurboModule {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string | number,
     |},
     osVersion: number,
   |};

package/Libraries/Utilities/PixelRatio.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const Dimensions = require('./Dimensions');
+const Dimensions = require('./Dimensions').default;
 
 /**
  * PixelRatio class gives access to the device pixel density.
@@ -124,4 +124,4 @@ class PixelRatio {
   static startDetecting() {}
 }
 
-module.exports = PixelRatio;
+export default PixelRatio;

package/Libraries/Utilities/Platform.win32.js

@@ -30,7 +30,7 @@ const Platform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string | number,
     |},
     osVersion: number,
   |} {

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -15,8 +15,8 @@ import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-render
 const Switch = require('../Components/Switch/Switch').default;
 const TextInput = require('../Components/TextInput/TextInput');
 const View = require('../Components/View/View');
-const VirtualizedList = require('../Lists/VirtualizedList').default;
 const Text = require('../Text/Text');
+const {VirtualizedList} = require('@react-native/virtualized-lists');
 const React = require('react');
 const ShallowRenderer = require('react-shallow-renderer');
 const ReactTestRenderer = require('react-test-renderer');

package/Libraries/Utilities/__mocks__/PixelRatio.js

@@ -22,4 +22,4 @@ const PixelRatio = {
   startDetecting: jest.fn(),
 };
 
-module.exports = PixelRatio;
+export default PixelRatio;

package/Libraries/Utilities/codegenNativeCommands.js

@@ -18,7 +18,9 @@ function codegenNativeCommands<T: interface {}>(options: Options<$Keys<T>>): T {
   const commandObj: {[$Keys<T>]: (...$ReadOnlyArray<mixed>) => void} = {};
 
   options.supportedCommands.forEach(command => {
+    // $FlowFixMe[missing-local-annot]
     commandObj[command] = (ref, ...args) => {
+      // $FlowFixMe[incompatible-call]
       dispatchCommand(ref, command, args);
     };
   });