@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Text/TextProps.js

@@ -10,6 +10,14 @@
 
 'use strict';
 
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityRole,
+  AccessibilityState,
+  Role,
+} from '../Components/View/ViewAccessibility';
+import type {TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   LayoutEvent,
   PointerEvent,
@@ -17,13 +25,6 @@ import type {
   TextLayoutEvent,
 } from '../Types/CoreEventTypes';
 import type {Node} from 'react';
-import type {TextStyleProp} from '../StyleSheet/StyleSheet';
-import type {
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityActionInfo,
-  AccessibilityActionEvent,
-} from '../Components/View/ViewAccessibility';
 
 export type PressRetentionOffset = $ReadOnly<{|
   top: number,
@@ -57,6 +58,7 @@ export type TextProps = $ReadOnly<{|
   accessibilityLabel?: ?Stringish,
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,
+  'aria-label'?: ?string,
 
   /**
    * Whether font should be scaled down automatically.
@@ -77,6 +79,25 @@ export type TextProps = $ReadOnly<{|
    *
    */
   android_hyphenationFrequency?: ?('normal' | 'none' | 'full'),
+
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean | 'mixed',
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  '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
+   */
+  'aria-labelledby'?: ?string,
+
   children?: ?Node,
 
   /**
@@ -87,6 +108,13 @@ export type TextProps = $ReadOnly<{|
    */
   ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'),
 
+  /**
+   * Used to locate this view from native code.
+   *
+   * See https://reactnative.dev/docs/text#nativeid
+   */
+  id?: string,
+
   /**
    * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
    * Possible values:
@@ -149,6 +177,11 @@ export type TextProps = $ReadOnly<{|
    */
   pressRetentionOffset?: ?PressRetentionOffset,
 
+  /**
+   * Indicates to accessibility services to treat UI component like a specific role.
+   */
+  role?: ?Role,
+
   /**
    * Lets the user select text.
    *
@@ -196,6 +229,23 @@ export type TextProps = $ReadOnly<{|
    */
   adjustsFontSizeToFit?: ?boolean,
 
+  /**
+   * The Dynamic Text scale ramp to apply to this element on iOS.
+   */
+  dynamicTypeRamp?: ?(
+    | 'caption2'
+    | 'caption1'
+    | 'footnote'
+    | 'subheadline'
+    | 'callout'
+    | 'body'
+    | 'headline'
+    | 'title3'
+    | 'title2'
+    | 'title1'
+    | 'largeTitle'
+  ),
+
   /**
    * Smallest possible scale a font can reach.
    *
@@ -209,4 +259,11 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text#supperhighlighting
    */
   suppressHighlighting?: ?boolean,
+
+  /**
+   * Set line break strategy on iOS.
+   *
+   * See https://reactnative.dev/docs/text.html#linebreakstrategyios
+   */
+  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 |}>;

package/Libraries/{Components/MaskedView/MaskedViewIOS.win32.js → TurboModule/RCTExport.d.ts}

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict-local
  */
 
-'use strict';
-
-module.exports = require('../UnimplementedViews/UnimplementedView');
+export interface TurboModule {
+  getConstants?(): {};
+}

package/Libraries/TurboModule/TurboModuleRegistry.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+import {TurboModule} from './RCTExport';
+
+export const TurboModuleRegistry: {
+  get<T extends TurboModule>(name: string): T | null;
+  getEnforcing<T extends TurboModule>(name: string): T;
+};

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -8,10 +8,12 @@
  * @format
  */
 
-const NativeModules = require('../BatchedBridge/NativeModules');
 import type {TurboModule} from './RCTExport';
+
 import invariant from 'invariant';
 
+const NativeModules = require('../BatchedBridge/NativeModules');
+
 const turboModuleProxy = global.__turboModuleProxy;
 
 function requireModule<T: TurboModule>(name: string): ?T {

package/Libraries/TurboModule/samples/NativeSampleTurboModule.js

@@ -10,6 +10,7 @@
 
 import type {UnsafeObject} from '../../Types/CodegenTypes';
 import type {RootTag, TurboModule} from '../RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Types/CoreEventTypes.d.ts

@@ -0,0 +1,263 @@
+/**
+ * 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
+ */
+
+import type * as React from 'react';
+import {NodeHandle} from '../ReactNative/RendererProxy';
+import {HostComponent} from '../../types/public/ReactNativeTypes';
+
+export interface LayoutRectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+// @see TextProps.onLayout
+export type LayoutChangeEvent = NativeSyntheticEvent<{layout: LayoutRectangle}>;
+
+interface TextLayoutLine {
+  ascender: number;
+  capHeight: number;
+  descender: number;
+  height: number;
+  text: string;
+  width: number;
+  x: number;
+  xHeight: number;
+  y: number;
+}
+
+/**
+ * @see TextProps.onTextLayout
+ */
+export interface TextLayoutEventData extends TargetedEvent {
+  lines: TextLayoutLine[];
+}
+
+// Similar to React.SyntheticEvent except for nativeEvent
+export interface NativeSyntheticEvent<T>
+  extends React.BaseSyntheticEvent<T, NodeHandle, NodeHandle> {}
+
+export interface NativeTouchEvent {
+  /**
+   * Array of all touch events that have changed since the last event
+   */
+  changedTouches: NativeTouchEvent[];
+
+  /**
+   * The ID of the touch
+   */
+  identifier: string;
+
+  /**
+   * The X position of the touch, relative to the element
+   */
+  locationX: number;
+
+  /**
+   * The Y position of the touch, relative to the element
+   */
+  locationY: number;
+
+  /**
+   * The X position of the touch, relative to the screen
+   */
+  pageX: number;
+
+  /**
+   * The Y position of the touch, relative to the screen
+   */
+  pageY: number;
+
+  /**
+   * The node id of the element receiving the touch event
+   */
+  target: string;
+
+  /**
+   * A time identifier for the touch, useful for velocity calculation
+   */
+  timestamp: number;
+
+  /**
+   * Array of all current touches on the screen
+   */
+  touches: NativeTouchEvent[];
+
+  /**
+   * 3D Touch reported force
+   * @platform ios
+   */
+  force?: number | undefined;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
+ */
+export interface NativeUIEvent {
+  /**
+   * Returns a long with details about the event, depending on the event type.
+   */
+  readonly detail: number;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+ */
+export interface NativeMouseEvent extends NativeUIEvent {
+  /**
+   * The X coordinate of the mouse pointer in global (screen) coordinates.
+   */
+  readonly screenX: number;
+  /**
+   * The Y coordinate of the mouse pointer in global (screen) coordinates.
+   */
+  readonly screenY: number;
+  /**
+   * The X coordinate of the mouse pointer relative to the whole document.
+   */
+  readonly pageX: number;
+  /**
+   * The Y coordinate of the mouse pointer relative to the whole document.
+   */
+  readonly pageY: number;
+  /**
+   * The X coordinate of the mouse pointer in local (DOM content) coordinates.
+   */
+  readonly clientX: number;
+  /**
+   * The Y coordinate of the mouse pointer in local (DOM content) coordinates.
+   */
+  readonly clientY: number;
+  /**
+   * Alias for NativeMouseEvent.clientX
+   */
+  readonly x: number;
+  /**
+   * Alias for NativeMouseEvent.clientY
+   */
+  readonly y: number;
+  /**
+   * Returns true if the control key was down when the mouse event was fired.
+   */
+  readonly ctrlKey: boolean;
+  /**
+   * Returns true if the shift key was down when the mouse event was fired.
+   */
+  readonly shiftKey: boolean;
+  /**
+   * Returns true if the alt key was down when the mouse event was fired.
+   */
+  readonly altKey: boolean;
+  /**
+   * Returns true if the meta key was down when the mouse event was fired.
+   */
+  readonly metaKey: boolean;
+  /**
+   * The button number that was pressed (if applicable) when the mouse event was fired.
+   */
+  readonly button: number;
+  /**
+   * The buttons being depressed (if any) when the mouse event was fired.
+   */
+  readonly buttons: number;
+  /**
+   * The secondary target for the event, if there is one.
+   */
+  readonly relatedTarget:
+    | null
+    | number
+    | React.ElementRef<HostComponent<unknown>>;
+  // offset is proposed: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface
+  /**
+   * The X coordinate of the mouse pointer between that event and the padding edge of the target node
+   */
+  readonly offsetX: number;
+  /**
+   * The Y coordinate of the mouse pointer between that event and the padding edge of the target node
+   */
+  readonly offsetY: number;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent
+ */
+export interface NativePointerEvent extends NativeMouseEvent {
+  /**
+   * A unique identifier for the pointer causing the event.
+   */
+  readonly pointerId: number;
+  /**
+   * The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer
+   */
+  readonly width: number;
+  /**
+   * The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
+   */
+  readonly height: number;
+  /**
+   * The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent
+   * the minimum and maximum pressure the hardware is capable of detecting, respectively.
+   */
+  readonly pressure: number;
+  /**
+   * The normalized tangential pressure of the pointer input (also known as barrel pressure or
+   * cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
+   */
+  readonly tangentialPressure: number;
+  /**
+   * The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane
+   * containing both the pointer (e.g. pen stylus) axis and the Y axis.
+   */
+  readonly tiltX: number;
+  /**
+   * The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane
+   * containing both the pointer (e.g. pen stylus) axis and the X axis.
+   */
+  readonly tiltY: number;
+  /**
+   * The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees,
+   * with a value in the range 0 to 359.
+   */
+  readonly twist: number;
+  /**
+   * Indicates the device type that caused the event (mouse, pen, touch, etc.)
+   */
+  readonly pointerType: string;
+  /**
+   * Indicates if the pointer represents the primary pointer of this pointer type.
+   */
+  readonly isPrimary: boolean;
+}
+
+export type PointerEvent = NativeSyntheticEvent<NativePointerEvent>;
+
+export interface GestureResponderEvent
+  extends NativeSyntheticEvent<NativeTouchEvent> {}
+
+export interface MouseEvent extends NativeSyntheticEvent<NativeMouseEvent> {}
+
+export interface TargetedEvent {
+  target: number;
+}
+
+export interface PointerEvents {
+  onPointerEnter?: ((event: PointerEvent) => void) | undefined;
+  onPointerEnterCapture?: ((event: PointerEvent) => void) | undefined;
+  onPointerLeave?: ((event: PointerEvent) => void) | undefined;
+  onPointerLeaveCapture?: ((event: PointerEvent) => void) | undefined;
+  onPointerMove?: ((event: PointerEvent) => void) | undefined;
+  onPointerMoveCapture?: ((event: PointerEvent) => void) | undefined;
+  onPointerCancel?: ((event: PointerEvent) => void) | undefined;
+  onPointerCancelCapture?: ((event: PointerEvent) => void) | undefined;
+  onPointerDown?: ((event: PointerEvent) => void) | undefined;
+  onPointerDownCapture?: ((event: PointerEvent) => void) | undefined;
+  onPointerUp?: ((event: PointerEvent) => void) | undefined;
+  onPointerUpCapture?: ((event: PointerEvent) => void) | undefined;
+}

package/Libraries/Types/CoreEventTypes.js

@@ -8,9 +8,10 @@
  * @format
  */
 
-import * as React from 'react';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 
+import * as React from 'react';
+
 export type SyntheticEvent<+T> = $ReadOnly<{|
   bubbles: ?boolean,
   cancelable: ?boolean,

package/Libraries/Types/CoreEventTypes.win32.js

@@ -8,9 +8,10 @@
  * @format
  */
 
-import * as React from 'react';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 
+import * as React from 'react';
+
 export type SyntheticEvent<+T> = $ReadOnly<{|
   bubbles: ?boolean,
   cancelable: ?boolean,

package/Libraries/Utilities/AcessibilityMapping.js

@@ -0,0 +1,154 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {
+  AccessibilityRole,
+  Role,
+} from '../Components/View/ViewAccessibility';
+
+// Map role values to AccessibilityRole values
+export function getAccessibilityRoleFromRole(role: Role): ?AccessibilityRole {
+  switch (role) {
+    case 'alert':
+      return 'alert';
+    case 'alertdialog':
+      return undefined;
+    case 'application':
+      return undefined;
+    case 'article':
+      return undefined;
+    case 'banner':
+      return undefined;
+    case 'button':
+      return 'button';
+    case 'cell':
+      return undefined;
+    case 'checkbox':
+      return 'checkbox';
+    case 'columnheader':
+      return undefined;
+    case 'combobox':
+      return 'combobox';
+    case 'complementary':
+      return undefined;
+    case 'contentinfo':
+      return undefined;
+    case 'definition':
+      return undefined;
+    case 'dialog':
+      return undefined;
+    case 'directory':
+      return undefined;
+    case 'document':
+      return undefined;
+    case 'feed':
+      return undefined;
+    case 'figure':
+      return undefined;
+    case 'form':
+      return undefined;
+    case 'grid':
+      return 'grid';
+    case 'group':
+      return undefined;
+    case 'heading':
+      return 'header';
+    case 'img':
+      return 'image';
+    case 'link':
+      return 'link';
+    case 'list':
+      return 'list';
+    case 'listitem':
+      return undefined;
+    case 'log':
+      return undefined;
+    case 'main':
+      return undefined;
+    case 'marquee':
+      return undefined;
+    case 'math':
+      return undefined;
+    case 'menu':
+      return 'menu';
+    case 'menubar':
+      return 'menubar';
+    case 'menuitem':
+      return 'menuitem';
+    case 'meter':
+      return undefined;
+    case 'navigation':
+      return undefined;
+    case 'none':
+      return 'none';
+    case 'note':
+      return undefined;
+    case 'option':
+      return undefined;
+    case 'presentation':
+      return 'none';
+    case 'progressbar':
+      return 'progressbar';
+    case 'radio':
+      return 'radio';
+    case 'radiogroup':
+      return 'radiogroup';
+    case 'region':
+      return undefined;
+    case 'row':
+      return undefined;
+    case 'rowgroup':
+      return undefined;
+    case 'rowheader':
+      return undefined;
+    case 'scrollbar':
+      return 'scrollbar';
+    case 'searchbox':
+      return 'search';
+    case 'separator':
+      return undefined;
+    case 'slider':
+      return 'adjustable';
+    case 'spinbutton':
+      return 'spinbutton';
+    case 'status':
+      return undefined;
+    case 'summary':
+      return 'summary';
+    case 'switch':
+      return 'switch';
+    case 'tab':
+      return 'tab';
+    case 'table':
+      return undefined;
+    case 'tablist':
+      return 'tablist';
+    case 'tabpanel':
+      return undefined;
+    case 'term':
+      return undefined;
+    case 'timer':
+      return 'timer';
+    case 'toolbar':
+      return 'toolbar';
+    case 'tooltip':
+      return undefined;
+    case 'tree':
+      return undefined;
+    case 'treegrid':
+      return undefined;
+    case 'treeitem':
+      return undefined;
+  }
+
+  return undefined;
+}

package/Libraries/Utilities/Appearance.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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
+ */
+
+import {NativeEventSubscription} from '../EventEmitter/RCTNativeAppEventEmitter';
+
+type ColorSchemeName = 'light' | 'dark' | null | undefined;
+
+export namespace Appearance {
+  type AppearancePreferences = {
+    colorScheme: ColorSchemeName;
+  };
+
+  type AppearanceListener = (preferences: AppearancePreferences) => void;
+
+  /**
+   * Note: Although color scheme is available immediately, it may change at any
+   * time. Any rendering logic or styles that depend on this should try to call
+   * this function on every render, rather than caching the value (for example,
+   * using inline styles rather than setting a value in a `StyleSheet`).
+   *
+   * Example: `const colorScheme = Appearance.getColorScheme();`
+   */
+  export function getColorScheme(): ColorSchemeName;
+
+  /**
+   * Add an event handler that is fired when appearance preferences change.
+   */
+  export function addChangeListener(
+    listener: AppearanceListener,
+  ): NativeEventSubscription;
+}
+
+/**
+ * A new useColorScheme hook is provided as the preferred way of accessing
+ * the user's preferred color scheme (e.g. Dark Mode).
+ */
+export function useColorScheme(): ColorSchemeName;

package/Libraries/Utilities/Appearance.js

@@ -8,17 +8,17 @@
  * @flow strict-local
  */
 
+import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import Platform from '../Utilities/Platform';
 import EventEmitter, {
   type EventSubscription,
 } from '../vendor/emitter/EventEmitter';
-import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import {isAsyncDebugging} from './DebugEnvironment';
 import NativeAppearance, {
   type AppearancePreferences,
   type ColorSchemeName,
 } from './NativeAppearance';
 import invariant from 'invariant';
-import {isAsyncDebugging} from './DebugEnvironment';
-import Platform from '../Utilities/Platform';
 
 type AppearanceListener = (preferences: AppearancePreferences) => void;
 const eventEmitter = new EventEmitter<{

package/Libraries/Utilities/BackHandler.android.js

@@ -97,11 +97,9 @@ const BackHandler: TBackHandler = {
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ): void {
-    if (_backPressSubscriptions.indexOf(handler) !== -1) {
-      _backPressSubscriptions.splice(
-        _backPressSubscriptions.indexOf(handler),
-        1,
-      );
+    const index = _backPressSubscriptions.indexOf(handler);
+    if (index !== -1) {
+      _backPressSubscriptions.splice(index, 1);
     }
   },
 };