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

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -8,11 +8,15 @@
  * @format
  */
 
-import * as React from 'react';
-import {useMemo, useState, useRef, useImperativeHandle} from 'react';
-import useAndroidRippleForView, {
-  type RippleConfig,
-} from './useAndroidRippleForView';
+import type {
+  LayoutEvent,
+  MouseEvent,
+  PressEvent,
+  // [Windows
+  BlurEvent,
+  FocusEvent,
+  KeyEvent, // Windows]
+} from '../../Types/CoreEventTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -20,18 +24,15 @@ import type {
   AccessibilityState,
   AccessibilityValue,
 } from '../View/ViewAccessibility';
+
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type RectOrSize} from '../../StyleSheet/Rect';
-import type {
-  LayoutEvent,
-  MouseEvent,
-  PressEvent,
-  // [Windows
-  BlurEvent,
-  FocusEvent,
-  KeyEvent, // Windows]
-} from '../../Types/CoreEventTypes';
+import useAndroidRippleForView, {
+  type RippleConfig,
+} from './useAndroidRippleForView';
+import * as React from 'react';
+import {useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {HandledKeyboardEvent} from '../../Components/View/ViewPropTypes';
 import View from '../View/View';
 import TextInputState from '../TextInput/TextInputState';
@@ -56,8 +57,30 @@ type Props = $ReadOnly<{|
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
+  'aria-valuemax'?: AccessibilityValue['max'],
+  'aria-valuemin'?: AccessibilityValue['min'],
+  'aria-valuenow'?: AccessibilityValue['now'],
+  'aria-valuetext'?: AccessibilityValue['text'],
   accessibilityViewIsModal?: ?boolean,
+  'aria-modal'?: ?boolean,
   accessible?: ?boolean,
+
+  /**
+   * 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,
+  /**
+   * A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   */
+  'aria-hidden'?: ?boolean,
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
   focusable?: ?boolean,
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
@@ -210,6 +233,11 @@ type Props = $ReadOnly<{|
    * Duration to wait after press down before calling `onPressIn`.
    */
   unstable_pressDelay?: ?number,
+  /**
+   * Web to Native Accessibilty props
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;
 
 /**
@@ -221,8 +249,16 @@ type Props = $ReadOnly<{|
 function Pressable(props: Props, forwardedRef): React.Node {
   const {
     accessible,
+    accessibilityState,
+    'aria-live': ariaLive,
     android_disableSound,
     android_ripple,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
     cancelable,
     children,
     delayHoverIn,
@@ -273,17 +309,39 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const accessibilityState =
-    disabled != null
-      ? {...props.accessibilityState, disabled}
-      : props.accessibilityState;
+  let _accessibilityState = {
+    busy: ariaBusy ?? accessibilityState?.busy,
+    checked: ariaChecked ?? accessibilityState?.checked,
+    disabled: ariaDisabled ?? accessibilityState?.disabled,
+    expanded: ariaExpanded ?? accessibilityState?.expanded,
+    selected: ariaSelected ?? accessibilityState?.selected,
+  };
+
+  _accessibilityState =
+    disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
+
+  const accessibilityValue = {
+    max: props['aria-valuemax'] ?? props.accessibilityValue?.max,
+    min: props['aria-valuemin'] ?? props.accessibilityValue?.min,
+    now: props['aria-valuenow'] ?? props.accessibilityValue?.now,
+    text: props['aria-valuetext'] ?? props.accessibilityValue?.text,
+  };
 
+  const accessibilityLiveRegion =
+    ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
+
+  const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
-    accessibilityState,
+    accessibilityViewIsModal:
+      restProps['aria-modal'] ?? restProps.accessibilityViewIsModal,
+    accessibilityLiveRegion,
+    accessibilityLabel,
+    accessibilityState: _accessibilityState,
     focusable: focusable !== false,
+    accessibilityValue,
     hitSlop,
   };
 

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -8,11 +8,14 @@
  * @format
  */
 
-import invariant from 'invariant';
-import {Commands} from '../View/ViewNativeComponent';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
-import {Platform, View, processColor} from 'react-native';
+
+import processColor from '../../StyleSheet/processColor';
+import Platform from '../../Utilities/Platform';
+import View from '../View/View';
+import {Commands} from '../View/ViewNativeComponent';
+import invariant from 'invariant';
 import * as React from 'react';
 import {useMemo} from 'react';
 

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -8,12 +8,12 @@
  * @format
  */
 
-const React = require('react');
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {ViewProps} from '../View/ViewPropTypes';
 
 import ProgressBarAndroidNativeComponent from './ProgressBarAndroidNativeComponent';
 
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
+const React = require('react');
 
 export type ProgressBarAndroidProps = $ReadOnly<{|
   ...ViewProps,

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 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 {Constructor} from '../../../types/private/Utilities';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ColorValue} from '../../StyleSheet/StyleSheet';
+import {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/progress-bar-android` instead of 'react-native'.
+ * @see https://github.com/react-native-community/progress-bar-android
+ * @deprecated
+ */
+export interface ProgressBarAndroidProps extends ViewProps {
+  /**
+     * Style of the ProgressBar. One of:
+         Horizontal
+         Normal (default)
+         Small
+         Large
+         Inverse
+         SmallInverse
+         LargeInverse
+     */
+  styleAttr?:
+    | 'Horizontal'
+    | 'Normal'
+    | 'Small'
+    | 'Large'
+    | 'Inverse'
+    | 'SmallInverse'
+    | 'LargeInverse'
+    | undefined;
+
+  /**
+   * If the progress bar will show indeterminate progress.
+   * Note that this can only be false if styleAttr is Horizontal.
+   */
+  indeterminate?: boolean | undefined;
+
+  /**
+   * The progress value (between 0 and 1).
+   */
+  progress?: number | undefined;
+
+  /**
+   * Whether to show the ProgressBar (true, the default) or hide it (false).
+   */
+  animating?: boolean | undefined;
+
+  /**
+   * Color of the progress bar.
+   */
+  color?: ColorValue | undefined;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string | undefined;
+}
+
+/**
+ * React component that wraps the Android-only `ProgressBar`. This component is used to indicate
+ * that the app is loading or there is some activity in the app.
+ */
+declare class ProgressBarAndroidComponent extends React.Component<ProgressBarAndroidProps> {}
+declare const ProgressBarAndroidBase: Constructor<NativeMethods> &
+  typeof ProgressBarAndroidComponent;
+/**
+ * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/progress-bar-android` instead of 'react-native'.
+ * @see https://github.com/react-native-progress-view/progress-bar-android
+ * @deprecated
+ */
+export class ProgressBarAndroid extends ProgressBarAndroidBase {}

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidNativeComponent.js

@@ -8,12 +8,12 @@
  * @format
  */
 
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {ViewProps} from '../View/ViewPropTypes';
 import type {Double, WithDefault} from '../../Types/CodegenTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js

@@ -8,10 +8,10 @@
  */
 
 'use strict';
-import * as React from 'react';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import View from '../View/View';
+import * as React from 'react';
 
 class DummyProgressViewIOS extends React.Component {
   render() {

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 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 {Constructor} from '../../../types/private/Utilities';
+import {ImageURISource} from '../../Image/ImageSource';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ColorValue} from '../../StyleSheet/StyleSheet';
+import {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * @see https://reactnative.dev/docs/progressviewios
+ * @see ProgressViewIOS.ios.js
+ */
+export interface ProgressViewIOSProps extends ViewProps {
+  /**
+   * The progress bar style.
+   */
+  progressViewStyle?: 'default' | 'bar' | undefined;
+
+  /**
+   * The progress value (between 0 and 1).
+   */
+  progress?: number | undefined;
+
+  /**
+   * The tint color of the progress bar itself.
+   */
+  progressTintColor?: ColorValue | undefined;
+
+  /**
+   * The tint color of the progress bar track.
+   */
+  trackTintColor?: ColorValue | undefined;
+
+  /**
+   * A stretchable image to display as the progress bar.
+   */
+  progressImage?: ImageURISource | ImageURISource[] | undefined;
+
+  /**
+   * A stretchable image to display behind the progress bar.
+   */
+  trackImage?: ImageURISource | ImageURISource[] | undefined;
+}
+
+declare class ProgressViewIOSComponent extends React.Component<ProgressViewIOSProps> {}
+declare const ProgressViewIOSBase: Constructor<NativeMethods> &
+  typeof ProgressViewIOSComponent;
+/**
+ * ProgressViewIOS has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/progress-view` instead of 'react-native'.
+ * @see https://github.com/react-native-community/progress-view
+ * @deprecated
+ */
+export class ProgressViewIOS extends ProgressViewIOSBase {}

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -8,13 +8,13 @@
  * @flow strict-local
  */
 
-import * as React from 'react';
-import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
-
-import RCTProgressViewNativeComponent from './RCTProgressViewNativeComponent';
 import type {ImageSource} from '../../Image/ImageSource';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
+import RCTProgressViewNativeComponent from './RCTProgressViewNativeComponent';
+import * as React from 'react';
+
 type Props = $ReadOnly<{|
   ...ViewProps,
 

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.win32.js

@@ -8,10 +8,10 @@
  */
 
 'use strict';
-import * as React from 'react';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import View from '../View/View';
+import * as React from 'react';
 
 class DummyProgressViewIOS extends React.Component {
   render() {

package/Libraries/Components/ProgressViewIOS/RCTProgressViewNativeComponent.js

@@ -8,13 +8,13 @@
  * @format
  */
 
-import type {Float, WithDefault} from '../../Types/CodegenTypes';
 import type {ImageSource} from '../../Image/ImageSource';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {Float, WithDefault} from '../../Types/CodegenTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,

package/Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js

@@ -8,20 +8,19 @@
  * @flow strict-local
  */
 
-import * as React from 'react';
-
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
   DirectEventHandler,
   Float,
   WithDefault,
 } from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
+import * as React from 'react';
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
 

package/Libraries/Components/RefreshControl/PullToRefreshViewNativeComponent.js

@@ -8,18 +8,18 @@
  * @flow strict-local
  */
 
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
   DirectEventHandler,
   Float,
   WithDefault,
 } from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
-import * as React from 'react';
 
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import * as React from 'react';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,

package/Libraries/Components/RefreshControl/RefreshControl.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 {Constructor} from '../../../types/private/Utilities';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ColorValue} from '../../StyleSheet/StyleSheet';
+import {ViewProps} from '../View/ViewPropTypes';
+
+export interface RefreshControlPropsIOS extends ViewProps {
+  /**
+   * The color of the refresh indicator.
+   */
+  tintColor?: ColorValue | undefined;
+
+  /**
+   * The title displayed under the refresh indicator.
+   */
+  title?: string | undefined;
+
+  /**
+   * Title color.
+   */
+  titleColor?: ColorValue | undefined;
+}
+
+export interface RefreshControlPropsAndroid extends ViewProps {
+  /**
+   * The colors (at least one) that will be used to draw the refresh indicator.
+   */
+  colors?: ColorValue[] | undefined;
+
+  /**
+   * Whether the pull to refresh functionality is enabled.
+   */
+  enabled?: boolean | undefined;
+
+  /**
+   * The background color of the refresh indicator.
+   */
+  progressBackgroundColor?: ColorValue | undefined;
+
+  /**
+   * Size of the refresh indicator, see RefreshControl.SIZE.
+   */
+  size?: number | undefined;
+}
+
+export interface RefreshControlProps
+  extends RefreshControlPropsIOS,
+    RefreshControlPropsAndroid {
+  /**
+   * Called when the view starts refreshing.
+   */
+  onRefresh?: (() => void) | undefined;
+
+  /**
+   * Whether the view should be indicating an active refresh.
+   */
+  refreshing: boolean;
+
+  /**
+   * Progress view top offset
+   */
+  progressViewOffset?: number | undefined;
+}
+
+/**
+ * This component is used inside a ScrollView or ListView to add pull to refresh
+ * functionality. When the ScrollView is at `scrollY: 0`, swiping down
+ * triggers an `onRefresh` event.
+ *
+ * __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
+ * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+ */
+declare class RefreshControlComponent extends React.Component<RefreshControlProps> {}
+declare const RefreshControlBase: Constructor<NativeMethods> &
+  typeof RefreshControlComponent;
+export class RefreshControl extends RefreshControlBase {
+  static SIZE: Object; // Undocumented
+}

package/Libraries/Components/RefreshControl/RefreshControl.js

@@ -8,11 +8,9 @@
  * @flow
  */
 
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
+
 import AndroidSwipeRefreshLayoutNativeComponent, {
   Commands as AndroidSwipeRefreshLayoutCommands,
 } from './AndroidSwipeRefreshLayoutNativeComponent';
@@ -20,6 +18,9 @@ import PullToRefreshViewNativeComponent, {
   Commands as PullToRefreshCommands,
 } from './PullToRefreshViewNativeComponent';
 
+const Platform = require('../../Utilities/Platform');
+const React = require('react');
+
 type IOSProps = $ReadOnly<{|
   /**
    * The color of the refresh indicator.

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -9,11 +9,10 @@
  */
 
 'use strict';
-import * as React from 'react';
+import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
 
 import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
-
-import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
+import * as React from 'react';
 
 const RCTRefreshControl: HostComponent<mixed> =
   requireNativeComponent<mixed>('RCTRefreshControl');

package/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js

@@ -8,10 +8,10 @@
  * @flow strict-local
  */
 
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,

package/Libraries/Components/SafeAreaView/SafeAreaView.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 {Constructor} from '../../../types/private/Utilities';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * Renders nested content and automatically applies paddings reflect the portion of the view
+ * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
+ * Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen,
+ * such as rounded corners or camera notches (aka sensor housing area on iPhone X).
+ */
+declare class SafeAreaViewComponent extends React.Component<ViewProps> {}
+declare const SafeAreaViewBase: Constructor<NativeMethods> &
+  typeof SafeAreaViewComponent;
+export class SafeAreaView extends SafeAreaViewBase {}

package/Libraries/Components/SafeAreaView/SafeAreaView.flow.js

@@ -0,0 +1,19 @@
+/**
+ * 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
+ */
+
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import View from '../View/View';
+import * as React from 'react';
+
+export type SafeAreaViewType = React.AbstractComponent<
+  ViewProps,
+  React.ElementRef<typeof View>,
+>;

package/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -8,11 +8,12 @@
  * @format
  */
 
+import type {ViewProps} from '../View/ViewPropTypes';
+import type {SafeAreaViewType} from './SafeAreaView.flow';
+
 import Platform from '../../Utilities/Platform';
-import * as React from 'react';
 import View from '../View/View';
-
-import type {ViewProps} from '../View/ViewPropTypes';
+import * as React from 'react';
 
 let exported: React.AbstractComponent<ViewProps, React.ElementRef<typeof View>>;
 
@@ -31,4 +32,4 @@ if (Platform.OS === 'android') {
   exported = require('./RCTSafeAreaViewNativeComponent').default;
 }
 
-export default exported;
+export default (exported: SafeAreaViewType);