@office-iss/react-native-win32 0.0.0-canary.282 → 0.0.0-canary.284

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -78,71 +78,71 @@ else if (Platform.OS === 'win32') {
 // Windows]
 
 export type ChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     eventCount: number,
     target: number,
     text: string,
-  |}>,
+  }>,
 >;
 
 export type TextInputEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     eventCount: number,
     previousText: string,
-    range: $ReadOnly<{|
+    range: $ReadOnly<{
       start: number,
       end: number,
-    |}>,
+    }>,
     target: number,
     text: string,
-  |}>,
+  }>,
 >;
 
 export type ContentSizeChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     target: number,
-    contentSize: $ReadOnly<{|
+    contentSize: $ReadOnly<{
       width: number,
       height: number,
-    |}>,
-  |}>,
+    }>,
+  }>,
 >;
 
 type TargetEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     target: number,
-  |}>,
+  }>,
 >;
 
 export type BlurEvent = TargetEvent;
 export type FocusEvent = TargetEvent;
 
-type Selection = $ReadOnly<{|
+type Selection = $ReadOnly<{
   start: number,
   end: number,
-|}>;
+}>;
 
 export type SelectionChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     selection: Selection,
     target: number,
-  |}>,
+  }>,
 >;
 
 export type KeyPressEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     key: string,
     target?: ?number,
     eventCount?: ?number,
-  |}>,
+  }>,
 >;
 
 export type EditingEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     eventCount: number,
     text: string,
     target: number,
-  |}>,
+  }>,
 >;
 
 type DataDetectorTypesType =
@@ -270,7 +270,7 @@ export type enterKeyHintType =
 
 type PasswordRules = string;
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   /**
    * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
    * @platform ios
@@ -405,9 +405,9 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   smartInsertDelete?: ?boolean,
-|}>;
+}>;
 
-type AndroidProps = $ReadOnly<{|
+type AndroidProps = $ReadOnly<{
   /**
    * When provided it will set the color of the cursor (or "caret") in the component.
    * Unlike the behavior of `selectionColor` the cursor color will be set independently
@@ -491,7 +491,7 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   underlineColorAndroid?: ?ColorValue,
-|}>;
+}>;
 
 // [Windows
 
@@ -519,8 +519,8 @@ type WindowsProps = $ReadOnly<{|
 
 // Windows]
 
-export type Props = $ReadOnly<{|
-  ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
+export type Props = $ReadOnly<{
+  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
   ...IOSProps,
   ...AndroidProps,
   ...WindowsProps, // [Windows]
@@ -946,10 +946,10 @@ export type Props = $ReadOnly<{|
    * The start and end of the text input's selection. Set start and end to
    * the same value to position the cursor.
    */
-  selection?: ?$ReadOnly<{|
+  selection?: ?$ReadOnly<{
     start: number,
     end?: ?number,
-  |}>,
+  }>,
 
   /**
    * The highlight and cursor color of the text input.
@@ -1030,7 +1030,7 @@ export type Props = $ReadOnly<{|
    * unwanted edits without flicker.
    */
   value?: ?Stringish,
-|}>;
+}>;
 
 type ViewCommands = $NonMaybeType<
   | typeof AndroidTextInputCommands
@@ -1038,10 +1038,10 @@ type ViewCommands = $NonMaybeType<
   | typeof RCTSinglelineTextInputNativeCommands,
 >;
 
-type LastNativeSelection = {|
+type LastNativeSelection = {
   selection: Selection,
   mostRecentEventCount: number,
-|};
+};
 
 const emptyFunctionThatReturnsTrue = () => true;
 
@@ -2014,14 +2014,14 @@ ExportedForwardRef.State = {
   blurTextInput: TextInputState.blurTextInput,
 };
 
-export type TextInputComponentStatics = $ReadOnly<{|
-  State: $ReadOnly<{|
+export type TextInputComponentStatics = $ReadOnly<{
+  State: $ReadOnly<{
     currentlyFocusedInput: typeof TextInputState.currentlyFocusedInput,
     currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
     focusTextInput: typeof TextInputState.focusTextInput,
     blurTextInput: typeof TextInputState.blurTextInput,
-  |}>,
-|}>;
+  }>,
+}>;
 
 const styles = StyleSheet.create({
   multilineDefault: {

package/Libraries/Components/TextInput/TextInputNativeCommands.js

@@ -24,6 +24,6 @@ export interface TextInputNativeCommands<T> {
   ) => void;
 }
 
-const supportedCommands = ['focus', 'blur', 'setTextAndSelection'];
+const supportedCommands = ['focus', 'blur', 'setTextAndSelection'] as string[];
 
 export default supportedCommands;

package/Libraries/Components/ToastAndroid/ToastAndroid.d.ts

@@ -16,17 +16,51 @@
  *
  * There is also a function `showWithGravity` to specify the layout gravity. May be
  * ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER
+ *
+ * **Note**: Starting from Android API level 30 (Android R) or higher, for apps targeting
+ * that API level, setting toast gravity is a no-op for text toasts.
+ * This means that in many cases `TOP`, `BOTTOM`, `CENTER`, or offsets may not have
+ * any visible effect on actual toast positioning.
+ *
+ * Reference: https://developer.android.com/reference/android/widget/Toast#setGravity(int,%20int,%20int)
  */
 export interface ToastAndroidStatic {
   /**
-   * String message: A string with the text to toast
-   * int duration: The duration of the toast.
-   * May be ToastAndroid.SHORT or ToastAndroid.LONG
+   * Display a toast message for a specified duration.
+   *
+   * @param message A string with the text to toast.
+   * @param duration The duration of the toast–either ToastAndroid.SHORT or ToastAndroid.LONG
    */
   show(message: string, duration: number): void;
-  /** `gravity` may be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER */
+
+  /**
+   * Display a toast message for a specified duration with a given gravity.
+   *
+   * @param message A string with the text to display in the toast.
+   * @param duration The duration of the toast.
+   *                 May be `ToastAndroid.SHORT` or `ToastAndroid.LONG`.
+   * @param gravity Positioning on the screen, e.g.,
+   *                `ToastAndroid.TOP`, `ToastAndroid.BOTTOM`, or `ToastAndroid.CENTER`.
+   *
+   * **Note**: On Android R (API 30) or later (when targeting API 30+), this setting may
+   * not have any effect on text toast placement due to `setGravity` becoming a no-op.
+   */
   showWithGravity(message: string, duration: number, gravity: number): void;
 
+  /**
+   * Display a toast message for a specified duration with a given gravity and custom offsets.
+   *
+   * @param message A string with the text to display in the toast.
+   * @param duration The duration of the toast.
+   *                 May be `ToastAndroid.SHORT` or `ToastAndroid.LONG`.
+   * @param gravity Positioning on the screen, e.g.,
+   *                `ToastAndroid.TOP`, `ToastAndroid.BOTTOM`, or `ToastAndroid.CENTER`.
+   * @param xOffset Horizontal offset from the given gravity.
+   * @param yOffset Vertical offset from the given gravity.
+   *
+   * **Note**: On Android R (API 30) or later (when targeting API 30+), setting gravity
+   * and offsets may not visibly affect the placement of text toasts.
+   */
   showWithGravityAndOffset(
     message: string,
     duration: number,
@@ -34,12 +68,40 @@ export interface ToastAndroidStatic {
     xOffset: number,
     yOffset: number,
   ): void;
-  // Toast duration constants
+
+  /**
+   * Indicates a short duration on the screen.
+   *
+   * Value: 2000 milliseconds (2 seconds).
+   */
   SHORT: number;
+
+  /**
+   * Indicates a long duration on the screen.
+   *
+   * Value: 3500 milliseconds (3.5 seconds).
+   */
   LONG: number;
-  // Toast gravity constants
+
+  /**
+   * Indicates that the toast message should appear at the top of the screen.
+   *
+   * **Note**: On Android R or later, this may not have any visible effect.
+   */
   TOP: number;
+
+  /**
+   * Indicates that the toast message should appear at the bottom of the screen.
+   *
+   * **Note**: On Android R or later, this may not have any visible effect.
+   */
   BOTTOM: number;
+
+  /**
+   * Indicates that the toast message should appear at the center of the screen.
+   *
+   * **Note**: On Android R or later, this may not have any visible effect.
+   */
   CENTER: number;
 }
 

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -19,7 +19,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
 
   onPressAnimationComplete?: ?() => void,
@@ -29,12 +29,12 @@ type Props = $ReadOnly<{|
   style?: ?ViewStyleProp,
 
   hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
   scale: Animated.Value,
-|}>;
+}>;
 
 class TouchableBounce extends React.Component<Props, State> {
   state: State = {
@@ -218,5 +218,5 @@ module.exports = (React.forwardRef((props, hostRef) => (
   <TouchableBounce {...props} hostRef={hostRef} />
 )): component(
   ref: React.RefSetter<mixed>,
-  ...props: $ReadOnly<$Diff<Props, {|hostRef: mixed|}>>
+  ...props: $ReadOnly<$Diff<Props, {hostRef: mixed}>>
 ));

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -20,19 +20,19 @@ import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type AndroidProps = $ReadOnly<{|
+type AndroidProps = $ReadOnly<{
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
   nextFocusRight?: ?number,
   nextFocusUp?: ?number,
-|}>;
+}>;
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   hasTVPreferredFocus?: ?boolean,
-|}>;
+}>;
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...AndroidProps,
   ...IOSProps,
@@ -45,17 +45,17 @@ type Props = $ReadOnly<{|
   testOnly_pressed?: ?boolean,
 
   hostRef: React.RefSetter<React.ElementRef<typeof View>>,
-|}>;
+}>;
 
-type ExtraStyles = $ReadOnly<{|
+type ExtraStyles = $ReadOnly<{
   child: ViewStyleProp,
   underlay: ViewStyleProp,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
   extraStyles: ?ExtraStyles,
-|}>;
+}>;
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -383,7 +383,7 @@ class TouchableHighlight extends React.Component<Props, State> {
 
 const Touchable: component(
   ref: React.RefSetter<React.ElementRef<typeof View>>,
-  ...props: $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>
+  ...props: $ReadOnly<$Diff<Props, {+hostRef: mixed}>>
 ) = React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />
 ));

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -23,7 +23,7 @@ import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
 
   /**
@@ -33,19 +33,19 @@ type Props = $ReadOnly<{|
    * methods to generate that dictionary.
    */
   background?: ?(
-    | $ReadOnly<{|
+    | $ReadOnly<{
         type: 'ThemeAttrAndroid',
         attribute:
           | 'selectableItemBackground'
           | 'selectableItemBackgroundBorderless',
         rippleRadius: ?number,
-      |}>
-    | $ReadOnly<{|
+      }>
+    | $ReadOnly<{
         type: 'RippleAndroid',
         color: ?number,
         borderless: boolean,
         rippleRadius: ?number,
-      |}>
+      }>
   ),
 
   /**
@@ -89,22 +89,22 @@ type Props = $ReadOnly<{|
    * versions, this will fallback to background.
    */
   useForeground?: ?boolean,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
-|}>;
+}>;
 
 class TouchableNativeFeedback extends React.Component<Props, State> {
   /**
    * Creates a value for the `background` prop that uses the Android theme's
    * default background for selectable elements.
    */
-  static SelectableBackground: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackground: (rippleRadius: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackground',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackground',
     rippleRadius,
@@ -114,11 +114,11 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
    * Creates a value for the `background` prop that uses the Android theme's
    * default background for borderless selectable elements. Requires API 21+.
    */
-  static SelectableBackgroundBorderless: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackgroundBorderless: (rippleRadius: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackgroundBorderless',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackgroundBorderless',
     rippleRadius,
@@ -133,12 +133,12 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     color: string,
     borderless: boolean,
     rippleRadius: ?number,
-  ) => $ReadOnly<{|
+  ) => $ReadOnly<{
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,
     type: 'RippleAndroid',
-  |}> = (color: string, borderless: boolean, rippleRadius: ?number) => {
+  }> = (color: string, borderless: boolean, rippleRadius: ?number) => {
     const processedColor = processColor(color);
     invariant(
       processedColor == null || typeof processedColor === 'number',

package/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js

@@ -12,7 +12,7 @@ import * as React from 'react';
 import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
 
   /**
@@ -22,19 +22,19 @@ type Props = $ReadOnly<{|
    * methods to generate that dictionary.
    */
   background?: ?(
-    | $ReadOnly<{|
+    | $ReadOnly<{
         type: 'ThemeAttrAndroid',
         attribute:
           | 'selectableItemBackground'
           | 'selectableItemBackgroundBorderless',
         rippleRadius: ?number,
-      |}>
-    | $ReadOnly<{|
+      }>
+    | $ReadOnly<{
         type: 'RippleAndroid',
         color: ?number,
         borderless: boolean,
         rippleRadius: ?number,
-      |}>
+      }>
   ),
 
   /**
@@ -80,7 +80,7 @@ type Props = $ReadOnly<{|
   useForeground?: ?boolean,
 
   tooltip?: string, // Win32
-|}>;
+}>;
 
 const RCTTouchableNativeFeedback = requireNativeComponent<Props>(
   'RCTTouchableNativeFeedback',

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -21,16 +21,16 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type TVProps = $ReadOnly<{|
+type TVProps = $ReadOnly<{
   hasTVPreferredFocus?: ?boolean,
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
   nextFocusRight?: ?number,
   nextFocusUp?: ?number,
-|}>;
+}>;
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...TVProps,
 
@@ -38,12 +38,12 @@ type Props = $ReadOnly<{|
   style?: ?ViewStyleProp,
 
   hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   anim: Animated.Value,
   pressability: Pressability,
-|}>;
+}>;
 
 /**
  * A wrapper for making views respond properly to touches.

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -29,7 +29,7 @@ import usePressability from '../../Pressability/usePressability';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
   accessibilityHint?: ?Stringish,
@@ -82,7 +82,7 @@ type Props = $ReadOnly<{|
   rejectResponderTermination?: ?boolean,
   testID?: ?string,
   touchSoundDisabled?: ?boolean,
-|}>;
+}>;
 
 const PASSTHROUGH_PROPS = [
   'accessibilityActions',

package/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -9,14 +9,22 @@
  */
 
 'use strict';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
+type Props = $ReadOnly<{
+  style?: ?ViewStyleProp,
+  children?: React.Node,
+  ...
+}>;
+
 /**
  * Common implementation for a simple stubbed view. Simply applies the view's styles to the inner
  * View component and renders its children.
  */
-class UnimplementedView extends React.Component<$FlowFixMeProps> {
+class UnimplementedView extends React.Component<Props> {
   render(): React.Node {
     // Workaround require cycle from requireNativeComponent
     const View = require('../View/View');

package/Libraries/Components/View/ViewAccessibility.js

@@ -144,7 +144,7 @@ export type AccessibilityState = {
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{|
+export type AccessibilityValue = $ReadOnly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -164,4 +164,4 @@ export type AccessibilityValue = $ReadOnly<{|
    * A textual description of this component's value. (will override minimum, current, and maximum if set)
    */
   text?: Stringish,
-|}>;
+}>;

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

@@ -157,7 +157,7 @@ export type AccessibilityState = {
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{|
+export type AccessibilityValue = $ReadOnly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -177,4 +177,4 @@ export type AccessibilityValue = $ReadOnly<{|
    * A textual description of this component's value. (will override minimum, current, and maximum if set)
    */
   text?: Stringish,
-|}>;
+}>;