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

package/Libraries/Blob/Blob.js

@@ -98,6 +98,10 @@ class Blob {
           // $FlowFixMe[reassign-const]
           end = this.size + end;
         }
+        if (end > this.size) {
+          // $FlowFixMe[reassign-const]
+          end = this.size;
+        }
         size = end - start;
       }
     }

package/Libraries/Blob/FileReader.js

@@ -11,6 +11,7 @@
 import type Blob from './Blob';
 
 import NativeFileReaderModule from './NativeFileReaderModule';
+import {toByteArray} from 'base64-js';
 
 const EventTarget = require('event-target-shim');
 
@@ -74,8 +75,35 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
     }
   }
 
-  readAsArrayBuffer(): any {
-    throw new Error('FileReader.readAsArrayBuffer is not implemented');
+  readAsArrayBuffer(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+
+        const base64 = text.split(',')[1];
+        const typedArray = toByteArray(base64);
+
+        this._result = typedArray.buffer;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
   }
 
   readAsDataURL(blob: ?Blob): void {

package/Libraries/Blob/URL.js

@@ -20,6 +20,7 @@ if (
 ) {
   const constants = NativeBlobModule.getConstants();
   // $FlowFixMe[incompatible-type] asserted above
+  // $FlowFixMe[unsafe-addition]
   BLOB_URL_PREFIX = constants.BLOB_URI_SCHEME + ':';
   if (typeof constants.BLOB_URI_HOST === 'string') {
     BLOB_URL_PREFIX += `//${constants.BLOB_URI_HOST}/`;
@@ -122,7 +123,7 @@ function validateBaseUrl(url: string) {
 
 export class URL {
   _url: string;
-  _searchParamsInstance = null;
+  _searchParamsInstance: ?URLSearchParams = null;
 
   static createObjectURL(blob: Blob): string {
     if (BLOB_URL_PREFIX === null) {
@@ -220,6 +221,7 @@ export class URL {
     if (this._searchParamsInstance === null) {
       return this._url;
     }
+    // $FlowFixMe[incompatible-use]
     const instanceString = this._searchParamsInstance.toString();
     const separator = this._url.indexOf('?') > -1 ? '&' : '?';
     return this._url + separator + instanceString;

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -37,7 +37,7 @@ type AccessibilityAnnouncementFinishedEventHandler = (
   event: AccessibilityAnnouncementFinishedEvent,
 ) => void;
 
-type AccessibilityEventTypes = 'click' | 'focus';
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
 
 /**
  * @see https://reactnative.dev/docs/accessibilityinfo
@@ -137,7 +137,7 @@ export interface AccessibilityInfoStatic {
    */
   announceForAccessibilityWithOptions(
     announcement: string,
-    options: {queue?: boolean},
+    options: {queue?: boolean | undefined},
   ): void;
 
   /**

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -10,7 +10,6 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {AccessibilityInfoType} from './AccessibilityInfo.flow';
 import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
@@ -42,7 +41,7 @@ type AccessibilityEventDefinitions = {
   screenReaderChanged: [boolean],
 };
 
-type AccessibilityEventTypes = 'click' | 'focus';
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
 
 // Mapping of public event names to platform-specific event names.
 const EventNames: Map<
@@ -75,7 +74,7 @@ const EventNames: Map<
  *
  * See https://reactnative.dev/docs/accessibilityinfo
  */
-const AccessibilityInfo: AccessibilityInfoType = {
+const AccessibilityInfo = {
   /**
    * Query whether bold text is currently enabled.
    *

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.win32.js

@@ -10,7 +10,6 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {AccessibilityInfoType} from './AccessibilityInfo.flow';
 import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
@@ -42,7 +41,7 @@ type AccessibilityEventDefinitions = {
   screenReaderChanged: [boolean],
 };
 
-type AccessibilityEventTypes = 'click' | 'focus';
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
 
 // Mapping of public event names to platform-specific event names.
 const EventNames: Map<
@@ -81,7 +80,7 @@ const EventNames: Map<
  *
  * See https://reactnative.dev/docs/accessibilityinfo
  */
-const AccessibilityInfo: AccessibilityInfoType = {
+const AccessibilityInfo = {
   /**
    * Query whether bold text is currently enabled.
    *

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,8 +10,8 @@
  */
 
 'use strict';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ActivityIndicator as ActivityIndicatorType} from './ActivityIndicator.flow';
 
 import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
@@ -184,8 +184,10 @@ const ActivityIndicator = (
   ```
 */
 
-const ActivityIndicatorWithRef: ActivityIndicatorType =
-  React.forwardRef(ActivityIndicator);
+const ActivityIndicatorWithRef: React.AbstractComponent<
+  Props,
+  HostComponent<mixed>,
+> = React.forwardRef(ActivityIndicator);
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({
@@ -203,4 +205,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ActivityIndicatorWithRef;
+export default ActivityIndicatorWithRef;

package/Libraries/Components/Button.js

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {Button as ButtonType} from './Button.flow';
 import type {
@@ -310,8 +311,8 @@ class Button extends React.Component<ButtonProps> {
       accessibilityLanguage,
       onAccessibilityAction,
     } = this.props;
-    const buttonStyles = [styles.button];
-    const textStyles = [styles.text];
+    const buttonStyles: Array<ViewStyleProp> = [styles.button];
+    const textStyles: Array<TextStyleProp> = [styles.text];
     if (color) {
       if (Platform.OS === 'ios') {
         textStyles.push({color: color});

package/Libraries/Components/Button.win32.js

@@ -0,0 +1,451 @@
+/**
+ * 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
+ * @flow
+ * @generate-docs
+ */
+
+'use strict';
+
+import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {Button as ButtonType} from './Button.flow';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityState,
+} from './View/ViewAccessibility';
+
+import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
+import Text from '../Text/Text';
+import Platform from '../Utilities/Platform';
+import {PlatformColor} from '../StyleSheet/PlatformColorValueTypes';
+import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
+import TouchableOpacity from './Touchable/TouchableOpacity';
+import View from './View/View';
+import invariant from 'invariant';
+import * as React from 'react';
+
+type ButtonProps = $ReadOnly<{|
+  /**
+     Text to display inside the button. On Android the given title will be
+     converted to the uppercased form.
+    */
+  title: string,
+
+  /**
+     Handler to be called when the user taps the button. The first function
+     argument is an event in form of [PressEvent](pressevent).
+    */
+  onPress: (event?: PressEvent) => mixed,
+
+  /**
+     If `true`, doesn't play system sound on touch.
+ 
+     @platform android
+ 
+     @default false
+    */
+  touchSoundDisabled?: ?boolean,
+
+  /**
+     Color of the text (iOS), or background color of the button (Android).
+ 
+     @default {@platform android} '#2196F3'
+     @default {@platform ios} '#007AFF'
+    */
+  color?: ?ColorValue,
+
+  /**
+     TV preferred focus.
+ 
+     @platform tv
+ 
+     @default false
+    */
+  hasTVPreferredFocus?: ?boolean,
+
+  /**
+     Designates the next view to receive focus when the user navigates down. See
+     the [Android documentation][android:nextFocusDown].
+ 
+     [android:nextFocusDown]:
+     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
+ 
+     @platform android, tv
+    */
+  nextFocusDown?: ?number,
+
+  /**
+     Designates the next view to receive focus when the user navigates forward.
+     See the [Android documentation][android:nextFocusForward].
+ 
+     [android:nextFocusForward]:
+     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
+ 
+     @platform android, tv
+    */
+  nextFocusForward?: ?number,
+
+  /**
+     Designates the next view to receive focus when the user navigates left. See
+     the [Android documentation][android:nextFocusLeft].
+ 
+     [android:nextFocusLeft]:
+     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
+ 
+     @platform android, tv
+    */
+  nextFocusLeft?: ?number,
+
+  /**
+     Designates the next view to receive focus when the user navigates right. See
+     the [Android documentation][android:nextFocusRight].
+ 
+     [android:nextFocusRight]:
+     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
+ 
+     @platform android, tv
+    */
+  nextFocusRight?: ?number,
+
+  /**
+     Designates the next view to receive focus when the user navigates up. See
+     the [Android documentation][android:nextFocusUp].
+ 
+     [android:nextFocusUp]:
+     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
+ 
+     @platform android, tv
+    */
+  nextFocusUp?: ?number,
+
+  /**
+     Text to display for blindness accessibility features.
+    */
+  accessibilityLabel?: ?string,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
+  /**
+     If `true`, disable all interactions for this component.
+ 
+     @default false
+    */
+  disabled?: ?boolean,
+
+  /**
+     Used to locate this view in end-to-end tests.
+    */
+  testID?: ?string,
+
+  /**
+   * Accessibility props.
+   */
+  accessible?: ?boolean,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  accessibilityState?: ?AccessibilityState,
+
+  /**
+   * 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,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
+|}>;
+
+/**
+   A basic button component that should render nicely on any platform. Supports a
+   minimal level of customization.
+ 
+   If this button doesn't look right for your app, you can build your own button
+   using [TouchableOpacity](touchableopacity) or
+   [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at
+   the [source code for this button component][button:source]. Or, take a look at
+   the [wide variety of button components built by the community]
+   [button:examples].
+ 
+   [button:source]:
+   https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
+ 
+   [button:examples]:
+   https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
+ 
+   ```jsx
+   <Button
+     onPress={onPressLearnMore}
+     title="Learn More"
+     color="#841584"
+     accessibilityLabel="Learn more about this purple button"
+   />
+   ```
+ 
+   ```SnackPlayer name=Button%20Example
+   import React from 'react';
+   import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
+ 
+   const Separator = () => (
+     <View style={styles.separator} />
+   );
+ 
+   const App = () => (
+     <SafeAreaView style={styles.container}>
+       <View>
+         <Text style={styles.title}>
+           The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
+         </Text>
+         <Button
+           title="Press me"
+           onPress={() => Alert.alert('Simple Button pressed')}
+         />
+       </View>
+       <Separator />
+       <View>
+         <Text style={styles.title}>
+           Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
+         </Text>
+         <Button
+           title="Press me"
+           color="#f194ff"
+           onPress={() => Alert.alert('Button with adjusted color pressed')}
+         />
+       </View>
+       <Separator />
+       <View>
+         <Text style={styles.title}>
+           All interaction for the component are disabled.
+         </Text>
+         <Button
+           title="Press me"
+           disabled
+           onPress={() => Alert.alert('Cannot press this one')}
+         />
+       </View>
+       <Separator />
+       <View>
+         <Text style={styles.title}>
+           This layout strategy lets the title define the width of the button.
+         </Text>
+         <View style={styles.fixToText}>
+           <Button
+             title="Left button"
+             onPress={() => Alert.alert('Left button pressed')}
+           />
+           <Button
+             title="Right button"
+             onPress={() => Alert.alert('Right button pressed')}
+           />
+         </View>
+       </View>
+     </SafeAreaView>
+   );
+ 
+   const styles = StyleSheet.create({
+     container: {
+       flex: 1,
+       justifyContent: 'center',
+       marginHorizontal: 16,
+     },
+     title: {
+       textAlign: 'center',
+       marginVertical: 8,
+     },
+     fixToText: {
+       flexDirection: 'row',
+       justifyContent: 'space-between',
+     },
+     separator: {
+       marginVertical: 8,
+       borderBottomColor: '#737373',
+       borderBottomWidth: StyleSheet.hairlineWidth,
+     },
+   });
+ 
+   export default App;
+   ```
+  */
+
+class Button extends React.Component<ButtonProps> {
+  render(): React.Node {
+    const {
+      accessibilityLabel,
+      accessibilityState,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-label': ariaLabel,
+      'aria-selected': ariaSelected,
+      importantForAccessibility,
+      color,
+      onPress,
+      touchSoundDisabled,
+      title,
+      hasTVPreferredFocus,
+      nextFocusDown,
+      nextFocusForward,
+      nextFocusLeft,
+      nextFocusRight,
+      nextFocusUp,
+      testID,
+      accessible,
+      accessibilityActions,
+      accessibilityHint,
+      accessibilityLanguage,
+      onAccessibilityAction,
+    } = this.props;
+    const buttonStyles: Array<ViewStyleProp> = [styles.button];
+    const textStyles: Array<TextStyleProp> = [styles.text];
+    if (color) {
+      if (Platform.OS === 'ios') {
+        textStyles.push({color: color});
+      } else {
+        buttonStyles.push({backgroundColor: color});
+      }
+    }
+
+    let _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+
+    const disabled =
+      this.props.disabled != null
+        ? this.props.disabled
+        : _accessibilityState?.disabled;
+
+    _accessibilityState =
+      disabled !== _accessibilityState?.disabled
+        ? {..._accessibilityState, disabled}
+        : _accessibilityState;
+
+    if (disabled) {
+      buttonStyles.push(styles.buttonDisabled);
+      textStyles.push(styles.textDisabled);
+    }
+
+    invariant(
+      typeof title === 'string',
+      'The title prop of a Button must be a string',
+    );
+    const formattedTitle =
+      Platform.OS === 'android' ? title.toUpperCase() : title;
+    const Touchable =
+      Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+    const _importantForAccessibility =
+      importantForAccessibility === 'no'
+        ? 'no-hide-descendants'
+        : importantForAccessibility;
+
+    return (
+      <Touchable
+        accessible={accessible}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityLanguage={accessibilityLanguage}
+        accessibilityRole="button"
+        accessibilityState={_accessibilityState}
+        importantForAccessibility={_importantForAccessibility}
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        nextFocusDown={nextFocusDown}
+        nextFocusForward={nextFocusForward}
+        nextFocusLeft={nextFocusLeft}
+        nextFocusRight={nextFocusRight}
+        nextFocusUp={nextFocusUp}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+        touchSoundDisabled={touchSoundDisabled}>
+        <View style={buttonStyles}>
+          <Text style={textStyles} disabled={disabled}>
+            {formattedTitle}
+          </Text>
+        </View>
+      </Touchable>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  button: Platform.select({
+    ios: {},
+    android: {
+      elevation: 4,
+      // Material design blue from https://material.google.com/style/color.html#color-color-palette
+      backgroundColor: '#2196F3',
+      borderRadius: 2,
+    },
+  }),
+  text: {
+    textAlign: 'center',
+    margin: 8,
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    ...Platform.select({
+      ios: {
+        // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
+        color: '#007AFF',
+        fontSize: 18,
+      },
+      android: {
+        color: 'white',
+        fontWeight: '500',
+      },
+    }),
+  },
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  buttonDisabled: Platform.select({
+    ios: {},
+    android: {
+      elevation: 0,
+      backgroundColor: '#dfdfdf',
+    },
+    // [Windows
+    windows: {
+      backgroundColor: PlatformColor('ButtonBackgroundDisabled'),
+      borderColor: PlatformColor('ButtonBorderBrushDisabled'),
+    },
+    // Windows]
+  }),
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  textDisabled: Platform.select({
+    ios: {
+      color: '#cdcdcd',
+    },
+    android: {
+      color: '#a1a1a1',
+    },
+    // [Windows
+    windows: {
+      color: PlatformColor('ButtonForegroundDisabled'),
+    },
+    // Windows]
+  }),
+});
+
+module.exports = (Button: ButtonType);

package/Libraries/Components/Clipboard/Clipboard.js

@@ -32,7 +32,7 @@ module.exports = {
    *   Clipboard.setString('hello world');
    * }
    * ```
-   * @param the content to be stored in the clipboard.
+   * @param {string} content the content to be stored in the clipboard.
    */
   setString(content: string) {
     NativeClipboard.setString(content);

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
@@ -36,6 +37,8 @@ type DrawerSlideEvent = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{|
+  accessibilityRole?: ?AccessibilityRole,
+
   /**
    * Determines whether the keyboard gets dismissed in response to a drag.
    *   - 'none' (the default), drags do not dismiss the keyboard.
@@ -235,6 +238,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
    * LTI update could not be added via codemod */
   _onDrawerSlide = event => {
     if (this.props.onDrawerSlide) {
+      // $FlowFixMe[unused-promise]
       this.props.onDrawerSlide(event);
     }
     if (this.props.keyboardDismissMode === 'on-drag') {

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -107,6 +107,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
 
   _onKeyboardChange = (event: ?KeyboardEvent) => {
     this._keyboardEvent = event;
+    // $FlowFixMe[unused-promise]
     this._updateBottomIfNecessary();
   };