@office-iss/react-native-win32 0.73.2 → 0.74.0-preview.2

package/src/private/webapis/performance/__tests__/NativePerformanceObserverMock-test.js

@@ -0,0 +1,108 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import NativePerformanceObserverMock from '../__mocks__/NativePerformanceObserver';
+import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
+
+describe('NativePerformanceObserver', () => {
+  it('correctly starts and stops listening to entries in a nominal scenario', async () => {
+    NativePerformanceObserverMock.startReporting(
+      RawPerformanceEntryTypeValues.MARK,
+    );
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 10,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'mark2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 20,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'event1',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+      startTime: 0,
+      duration: 20,
+    });
+
+    const entriesResult = NativePerformanceObserverMock.popPendingEntries();
+    expect(entriesResult).not.toBe(undefined);
+    const entries = entriesResult.entries;
+
+    expect(entries.length).toBe(2);
+    expect(entries[0].name).toBe('mark1');
+    expect(entries[1].name).toBe('mark2');
+
+    const entriesResult1 = NativePerformanceObserverMock.popPendingEntries();
+    expect(entriesResult1).not.toBe(undefined);
+    const entries1 = entriesResult1.entries;
+    expect(entries1.length).toBe(0);
+
+    NativePerformanceObserverMock.stopReporting('mark');
+  });
+
+  it('correctly clears/gets entries', async () => {
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'event1',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.clearEntries(
+      RawPerformanceEntryTypeValues.UNDEFINED,
+    );
+
+    expect(NativePerformanceObserverMock.getEntries()).toStrictEqual([]);
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'entry1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'entry2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'entry1',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.clearEntries(
+      RawPerformanceEntryTypeValues.UNDEFINED,
+      'entry1',
+    );
+
+    expect(
+      NativePerformanceObserverMock.getEntries().map(e => e.name),
+    ).toStrictEqual(['entry2']);
+  });
+});

package/src/private/webapis/performance/__tests__/Performance-test.js

@@ -0,0 +1,117 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+const Performance = require('../Performance').default;
+
+jest.mock(
+  '../NativePerformance',
+  () => require('../__mocks__/NativePerformance').default,
+);
+
+jest.mock(
+  '../NativePerformanceObserver',
+  () => require('../__mocks__/NativePerformanceObserver').default,
+);
+
+describe('Performance', () => {
+  it('clearEntries removes correct entry types', async () => {
+    const performance = new Performance();
+    performance.mark('entry1', 0, 0);
+    performance.mark('mark2', 0, 0);
+
+    performance.measure('entry1', {start: 0, duration: 0});
+    performance.measure('measure2', {start: 0, duration: 0});
+
+    performance.clearMarks();
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([
+      'entry1',
+      'measure2',
+    ]);
+
+    performance.mark('entry2', 0, 0);
+    performance.mark('mark3', 0, 0);
+
+    performance.clearMeasures();
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([
+      'entry2',
+      'mark3',
+    ]);
+
+    performance.clearMarks();
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([]);
+  });
+
+  it('getEntries only works with allowed entry types', async () => {
+    const performance = new Performance();
+    performance.clearMarks();
+    performance.clearMeasures();
+
+    performance.mark('entry1', 0, 0);
+    performance.mark('mark2', 0, 0);
+
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    performance.getEntriesByType('mark');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    performance.getEntriesByType('measure');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    performance.getEntriesByName('entry1');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    performance.getEntriesByName('entry1', 'event');
+    expect(console.warn).toHaveBeenCalled();
+
+    performance.getEntriesByName('entry1', 'mark');
+    expect(console.warn).toHaveBeenCalled();
+
+    performance.getEntriesByType('event');
+    expect(console.warn).toHaveBeenCalled();
+  });
+
+  it('getEntries works with marks and measures', async () => {
+    const performance = new Performance();
+    performance.clearMarks();
+    performance.clearMeasures();
+
+    performance.mark('entry1', 0, 0);
+    performance.mark('mark2', 0, 0);
+
+    performance.measure('entry1', {start: 0, duration: 0});
+    performance.measure('measure2', {start: 0, duration: 0});
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([
+      'entry1',
+      'mark2',
+      'entry1',
+      'measure2',
+    ]);
+
+    expect(performance.getEntriesByType('mark').map(e => e.name)).toStrictEqual(
+      ['entry1', 'mark2'],
+    );
+
+    expect(
+      performance.getEntriesByType('measure').map(e => e.name),
+    ).toStrictEqual(['entry1', 'measure2']);
+
+    expect(
+      performance.getEntriesByName('entry1').map(e => e.entryType),
+    ).toStrictEqual(['mark', 'measure']);
+
+    expect(
+      performance.getEntriesByName('entry1', 'measure').map(e => e.entryType),
+    ).toStrictEqual(['measure']);
+  });
+});

package/src/private/webapis/performance/__tests__/PerformanceObserver-test.js

@@ -0,0 +1,208 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
+
+// NOTE: Jest mocks of transitive dependencies don't appear to work with
+// ES6 module imports, therefore forced to use commonjs style imports here.
+const NativePerformanceObserver = require('../NativePerformanceObserver');
+const PerformanceObserver = require('../PerformanceObserver').default;
+
+jest.mock(
+  '../NativePerformanceObserver',
+  () => require('../__mocks__/NativePerformanceObserver').default,
+);
+
+describe('PerformanceObserver', () => {
+  it('can be mocked by a reference NativePerformanceObserver implementation', async () => {
+    expect(NativePerformanceObserver).not.toBe(undefined);
+
+    let totalEntries = 0;
+    const observer = new PerformanceObserver((list, _observer) => {
+      expect(_observer).toBe(observer);
+      const entries = list.getEntries();
+      expect(entries).toHaveLength(1);
+      const entry = entries[0];
+      expect(entry.name).toBe('mark1');
+      expect(entry.entryType).toBe('mark');
+      totalEntries += entries.length;
+    });
+    expect(() => observer.observe({entryTypes: ['mark']})).not.toThrow();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    await jest.runAllTicks();
+    expect(totalEntries).toBe(1);
+    observer.disconnect();
+  });
+
+  it('prevents durationThreshold to be used together with entryTypes', async () => {
+    const observer = new PerformanceObserver((list, _observer) => {});
+
+    expect(() =>
+      observer.observe({entryTypes: ['mark'], durationThreshold: 100}),
+    ).toThrow();
+  });
+
+  it('handles durationThreshold argument as expected', async () => {
+    let entries = [];
+    const observer = new PerformanceObserver((list, _observer) => {
+      entries = [...entries, ...list.getEntries()];
+    });
+
+    observer.observe({type: 'mark', durationThreshold: 100});
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 20,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark3',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 100,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark4',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 500,
+    });
+
+    await jest.runAllTicks();
+    expect(entries).toHaveLength(3);
+    expect(entries.map(e => e.name)).toStrictEqual(['mark1', 'mark3', 'mark4']);
+  });
+
+  it('correctly works with multiple PerformanceObservers with durationThreshold', async () => {
+    let entries1 = [];
+    const observer1 = new PerformanceObserver((list, _observer) => {
+      entries1 = [...entries1, ...list.getEntries()];
+    });
+
+    let entries2 = [];
+    const observer2 = new PerformanceObserver((list, _observer) => {
+      entries2 = [...entries2, ...list.getEntries()];
+    });
+
+    let entries3 = [];
+    const observer3 = new PerformanceObserver((list, _observer) => {
+      entries3 = [...entries3, ...list.getEntries()];
+    });
+
+    let entries4 = [];
+    const observer4 = new PerformanceObserver((list, _observer) => {
+      entries4 = [...entries4, ...list.getEntries()];
+    });
+
+    observer2.observe({type: 'mark', durationThreshold: 200});
+    observer1.observe({type: 'mark', durationThreshold: 100});
+    observer3.observe({type: 'mark', durationThreshold: 300});
+    observer3.observe({type: 'measure', durationThreshold: 500});
+    observer4.observe({entryTypes: ['mark', 'measure']});
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 20,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark3',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 100,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark4',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 500,
+    });
+
+    await jest.runAllTicks();
+    observer1.disconnect();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark5',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark6',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 300,
+    });
+
+    await jest.runAllTicks();
+    observer3.disconnect();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark7',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    await jest.runAllTicks();
+    observer4.disconnect();
+
+    expect(entries1.map(e => e.name)).toStrictEqual([
+      'mark1',
+      'mark3',
+      'mark4',
+    ]);
+    expect(entries2.map(e => e.name)).toStrictEqual([
+      'mark1',
+      'mark4',
+      'mark5',
+      'mark6',
+      'mark7',
+    ]);
+    expect(entries3.map(e => e.name)).toStrictEqual(['mark4', 'mark6']);
+    expect(entries4.map(e => e.name)).toStrictEqual([
+      'mark1',
+      'mark2',
+      'mark3',
+      'mark4',
+      'mark5',
+      'mark6',
+      'mark7',
+    ]);
+  });
+});

package/src-win/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -0,0 +1,161 @@
+/**
+ * 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 {HostComponent} from '../../../types/public/ReactNativeTypes';
+import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';
+
+type AccessibilityChangeEventName =
+  | 'change' // deprecated, maps to screenReaderChanged
+  | 'boldTextChanged' // iOS-only Event
+  | 'grayscaleChanged' // iOS-only Event
+  | 'invertColorsChanged' // iOS-only Event
+  | 'reduceMotionChanged'
+  | 'screenReaderChanged'
+  | 'reduceTransparencyChanged'; // iOS-only Event
+
+type AccessibilityChangeEvent = boolean;
+
+type AccessibilityChangeEventHandler = (
+  event: AccessibilityChangeEvent,
+) => void;
+
+type AccessibilityAnnouncementEventName = 'announcementFinished'; // iOS-only Event
+
+type AccessibilityAnnouncementFinishedEvent = {
+  announcement: string;
+  success: boolean;
+};
+
+type AccessibilityAnnouncementFinishedEventHandler = (
+  event: AccessibilityAnnouncementFinishedEvent,
+) => void;
+
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
+
+/**
+ * @see https://reactnative.dev/docs/accessibilityinfo
+ */
+export interface AccessibilityInfoStatic {
+  /**
+   * Query whether bold text is currently enabled.
+   *
+   * @platform ios
+   */
+  isBoldTextEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether grayscale is currently enabled.
+   *
+   * @platform ios
+   */
+  isGrayscaleEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether invert colors is currently enabled.
+   *
+   * @platform ios
+   */
+  isInvertColorsEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether reduce motion is currently enabled.
+   */
+  isReduceMotionEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when  prefer cross-fade transitions is enabled and `false` otherwise.
+   */
+  prefersCrossFadeTransitions(): Promise<boolean>;
+
+  /**
+   * Query whether reduce transparency is currently enabled.
+   *
+   * @platform ios
+   */
+  isReduceTransparencyEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether a screen reader is currently enabled.
+   */
+  isScreenReaderEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether Accessibility Service is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when any service is enabled and `false` otherwise.
+   *
+   * @platform android
+   */
+  isAccessibilityServiceEnabled(): Promise<boolean>;
+
+  /**
+   * Add an event handler. Supported events:
+   * - announcementFinished: iOS-only event. Fires when the screen reader has finished making an announcement.
+   *                         The argument to the event handler is a dictionary with these keys:
+   *                          - announcement: The string announced by the screen reader.
+   *                          - success: A boolean indicating whether the announcement was successfully made.
+   * - AccessibilityEventName constants other than announcementFinished: Fires on accessibility feature change.
+   *            The argument to the event handler is a boolean.
+   *            The boolean is true when the related event's feature is enabled and false otherwise.
+   *
+   */
+  addEventListener(
+    eventName: AccessibilityChangeEventName,
+    handler: AccessibilityChangeEventHandler,
+  ): EmitterSubscription;
+  addEventListener(
+    eventName: AccessibilityAnnouncementEventName,
+    handler: AccessibilityAnnouncementFinishedEventHandler,
+  ): EmitterSubscription;
+
+  /**
+   * Set accessibility focus to a react component.
+   */
+  setAccessibilityFocus: (reactTag: number) => void;
+
+  /**
+   * Post a string to be announced by the screen reader.
+   */
+  announceForAccessibility: (announcement: string) => void;
+
+  /**
+   * Post a string to be announced by the screen reader.
+   * - `announcement`: The string announced by the screen reader.
+   * - `options`: An object that configures the reading options.
+   *   - `queue`: The announcement will be queued behind existing announcements. iOS only.
+   *   - `nativeID`: The nativeID of the element to send the announcement from. win32 only.
+   */
+  announceForAccessibilityWithOptions(
+    announcement: string,
+    options: {
+      queue?: boolean | undefined;
+      nativeID?: string | undefined; // win32
+    },
+  ): void;
+
+  /**
+   * Gets the timeout in millisecond that the user needs.
+   * This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+   *
+   * @platform android
+   */
+  getRecommendedTimeoutMillis: (originalTimeout: number) => Promise<number>;
+  sendAccessibilityEvent: (
+    handle: React.ElementRef<HostComponent<unknown>>,
+    eventType: AccessibilityEventTypes,
+  ) => void;
+}
+
+export const AccessibilityInfo: AccessibilityInfoStatic;
+export type AccessibilityInfo = AccessibilityInfoStatic;

package/{src → src-win}/Libraries/Components/Button/ButtonWin32.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import RN = require('react-native');
 import type { IViewWin32Props } from '../View/ViewPropTypes';
-import type { ITextWin32Props } from '../Text/TextWin32.Props';
+import type { TextProps } from '../../Text/Text';
 import type { IButtonWin32Props } from './ButtonWin32.Props';
 
 const enum SelectState {
@@ -39,7 +39,7 @@ export class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32
       style: this.props.style as RN.StyleProp<RN.ViewStyle>,
     };
 
-    const textProps: ITextWin32Props = {
+    const textProps: TextProps = {
       textStyle: 'None',
     };
     if (this.props.color) {
@@ -48,7 +48,7 @@ export class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32
 
     return (
       <RN.ViewWin32 {...viewProps}>
-        <RN.TextWin32 {...textProps}>{this.props.title}</RN.TextWin32>
+        <RN.Text {...textProps}>{this.props.title}</RN.Text>
       </RN.ViewWin32>
     );
   }

package/{src → src-win}/Libraries/Components/Touchable/Tests/TouchableWin32Test.tsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import {NativeSyntheticEvent, StyleSheet, Text, ViewStyle } from 'react-native';
 import {Insets} from 'react-native/types/public/Insets';
-import { TextWin32 } from '../../Text/TextWin32';
 import { ViewWin32 } from '../../View/ViewWin32';
 import { IViewWin32Props, IKeyboardEvent } from '../../View/ViewPropTypes';
 import { TouchableWin32 } from '../TouchableWin32';
@@ -135,7 +134,7 @@ class TouchableWin32WithoutFeedback extends React.Component<ITouchableWin32Witho
   };
 
   private readonly _touchableGetHitSlop = (): Insets => {
-    return this.props.hitSlop;
+    return this.props.hitSlop as Insets;
   };
 
   private readonly _touchableGetHighlightDelayMS = (): number => {
@@ -338,7 +337,7 @@ class TouchableWithoutFeedbackExample extends React.Component<{}, IExampleState>
       <ViewWin32 style={styles.largeContainer}>
         <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>
           <ViewWin32>
-            <TextWin32>Press me</TextWin32>
+            <Text>Press me</Text>
           </ViewWin32>
         </TouchableWin32WithoutFeedback>
 
@@ -346,12 +345,12 @@ class TouchableWithoutFeedbackExample extends React.Component<{}, IExampleState>
           <ViewWin32 style={styles.smallContainer}>
             <TouchableWin32WithoutFeedback style={styles.innerTouch} onPress={this._onPress}>
               <ViewWin32>
-                <TextWin32>You can also have nested Touchables</TextWin32>
+                <Text>You can also have nested Touchables</Text>
               </ViewWin32>
             </TouchableWin32WithoutFeedback>
           </ViewWin32>
         </TouchableWin32WithoutFeedback>
-        <TextWin32>{'Number of Recognized Presses: ' + this.state.numberOfPresses}</TextWin32>
+        <Text>{'Number of Recognized Presses: ' + this.state.numberOfPresses}</Text>
       </ViewWin32>
     );
   }
@@ -375,7 +374,7 @@ class TouchableHighlightExample extends React.Component<{}, IExampleState> {
       <ViewWin32 style={styles.largeContainer}>
         <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>
           <ViewWin32>
-            <TextWin32>Press me</TextWin32>
+            <Text>Press me</Text>
           </ViewWin32>
         </TouchableWin32Highlight>
 
@@ -384,9 +383,9 @@ class TouchableHighlightExample extends React.Component<{}, IExampleState> {
             <TouchableWin32Highlight style={styles.innerTouch} onPress={this._onPress} children={this._getChildrenOfInnerTouchable} />
           </ViewWin32>
         </TouchableWin32Highlight>
-        <TextWin32 style={{ color: 'red' }} textStyle="None">
+        <Text style={{ color: 'red' }} textStyle="None">
           {'Number of Recognized Presses: ' + this.state.numberOfPresses}
-        </TextWin32>
+        </Text>
       </ViewWin32>
     );
   }
@@ -405,7 +404,7 @@ class TouchableHighlightExample extends React.Component<{}, IExampleState> {
           width: 70,
         }}
       >
-        <TextWin32
+        <Text
           style={{
             color: this._pickColor(state.isHovered, state.isPressed),
             fontSize: state.isFocused ? 8 : 10,
@@ -413,7 +412,7 @@ class TouchableHighlightExample extends React.Component<{}, IExampleState> {
           textStyle="None"
         >
           Press Me!
-        </TextWin32>
+        </Text>
       </ViewWin32>
     );
   };