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

package/Libraries/Components/Keyboard/Keyboard.js

@@ -8,12 +8,13 @@
  * @flow strict-local
  */
 
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+
 import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
-import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 
 export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
 
@@ -24,7 +25,7 @@ export type KeyboardEventEasing =
   | 'linear'
   | 'keyboard';
 
-export type KeyboardEventCoordinates = $ReadOnly<{|
+export type KeyboardMetrics = $ReadOnly<{|
   screenX: number,
   screenY: number,
   width: number,
@@ -36,7 +37,7 @@ export type KeyboardEvent = AndroidKeyboardEvent | IOSKeyboardEvent;
 type BaseKeyboardEvent = {|
   duration: number,
   easing: KeyboardEventEasing,
-  endCoordinates: KeyboardEventCoordinates,
+  endCoordinates: KeyboardMetrics,
 |};
 
 export type AndroidKeyboardEvent = $ReadOnly<{|
@@ -47,7 +48,7 @@ export type AndroidKeyboardEvent = $ReadOnly<{|
 
 export type IOSKeyboardEvent = $ReadOnly<{|
   ...BaseKeyboardEvent,
-  startCoordinates: KeyboardEventCoordinates,
+  startCoordinates: KeyboardMetrics,
   isEventFromThisApp: boolean,
 |}>;
 
@@ -103,6 +104,8 @@ type KeyboardEventDefinitions = {
  */
 
 class Keyboard {
+  _currentlyShowing: ?KeyboardEvent;
+
   _emitter: NativeEventEmitter<KeyboardEventDefinitions> =
     new NativeEventEmitter(
       // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
@@ -110,6 +113,15 @@ class Keyboard {
       Platform.OS !== 'ios' ? null : NativeKeyboardObserver,
     );
 
+  constructor() {
+    this.addListener('keyboardDidShow', ev => {
+      this._currentlyShowing = ev;
+    });
+    this.addListener('keyboardDidHide', _ev => {
+      this._currentlyShowing = null;
+    });
+  }
+
   /**
    * The `addListener` function connects a JavaScript function to an identified native
    * keyboard notification event.
@@ -126,10 +138,11 @@ class Keyboard {
    * - `keyboardWillChangeFrame`
    * - `keyboardDidChangeFrame`
    *
-   * Note that if you set `android:windowSoftInputMode` to `adjustResize`  or `adjustNothing`,
-   * only `keyboardDidShow` and `keyboardDidHide` events will be available on Android.
-   * `keyboardWillShow` as well as `keyboardWillHide` are generally not available on Android
-   * since there is no native corresponding event.
+   * Android versions prior to API 30 rely on observing layout changes when
+   * `android:windowSoftInputMode` is set to `adjustResize` or `adjustPan`.
+   *
+   * `keyboardWillShow` as well as `keyboardWillHide` are not available on Android since there is
+   * no native corresponding event.
    *
    * @param {function} callback function to be called when the event fires.
    */
@@ -157,6 +170,20 @@ class Keyboard {
     dismissKeyboard();
   }
 
+  /**
+   * Whether the keyboard is last known to be visible.
+   */
+  isVisible(): boolean {
+    return !!this._currentlyShowing;
+  }
+
+  /**
+   * Return the metrics of the soft-keyboard if visible.
+   */
+  metrics(): ?KeyboardMetrics {
+    return this._currentlyShowing?.endCoordinates;
+  }
+
   /**
    * Useful for syncing TextInput (or other keyboard accessory view) size of
    * position changes with keyboard movements.

package/Libraries/Components/Keyboard/KeyboardAvoidingView.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 {TimerMixin} from '../../../types/private/TimerMixin';
+import {StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
+ * It can automatically adjust either its position or bottom padding based on the position of the keyboard.
+ */
+declare class KeyboardAvoidingViewComponent extends React.Component<KeyboardAvoidingViewProps> {}
+declare const KeyboardAvoidingViewBase: Constructor<TimerMixin> &
+  typeof KeyboardAvoidingViewComponent;
+export class KeyboardAvoidingView extends KeyboardAvoidingViewBase {}
+
+export interface KeyboardAvoidingViewProps extends ViewProps {
+  behavior?: 'height' | 'position' | 'padding' | undefined;
+
+  /**
+   * The style of the content container(View) when behavior is 'position'.
+   */
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * This is the distance between the top of the user screen and the react native view,
+   * may be non-zero in some use cases.
+   */
+  keyboardVerticalOffset?: number | undefined;
+
+  /**
+   * Enables or disables the KeyboardAvoidingView.
+   *
+   * Default is true
+   */
+  enabled?: boolean | undefined;
+}

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -8,21 +8,22 @@
  * @flow strict-local
  */
 
-import Keyboard from './Keyboard';
-import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
-import Platform from '../../Utilities/Platform';
-import * as React from 'react';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import View from '../View/View';
-
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {
-  ViewProps,
   ViewLayout,
   ViewLayoutEvent,
+  ViewProps,
 } from '../View/ViewPropTypes';
-import type {KeyboardEvent, KeyboardEventCoordinates} from './Keyboard';
+import type {KeyboardEvent, KeyboardMetrics} from './Keyboard';
+
+import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
+import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
+import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
+import View from '../View/View';
+import Keyboard from './Keyboard';
+import * as React from 'react';
 
 type Props = $ReadOnly<{|
   ...ViewProps,
@@ -71,15 +72,34 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame: KeyboardEventCoordinates): number {
+  async _relativeKeyboardHeight(
+    keyboardFrame: KeyboardMetrics,
+  ): Promise<number> {
     const frame = this._frame;
     if (!frame || !keyboardFrame) {
       return 0;
     }
 
+    // On iOS when Prefer Cross-Fade Transitions is enabled, the keyboard position
+    // & height is reported differently (0 instead of Y position value matching height of frame)
+    if (
+      Platform.OS === 'ios' &&
+      keyboardFrame.screenY === 0 &&
+      (await AccessibilityInfo.prefersCrossFadeTransitions())
+    ) {
+      return 0;
+    }
+
     const keyboardY =
       keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
 
+    if (this.props.behavior === 'height') {
+      return Math.max(
+        this.state.bottom + frame.y + frame.height - keyboardY,
+        0,
+      );
+    }
+
     // Calculate the displacement needed for the view such that it
     // no longer overlaps with the keyboard
     return Math.max(frame.y + frame.height - keyboardY, 0);
@@ -90,7 +110,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     this._updateBottomIfNecessary();
   };
 
-  _onLayout = (event: ViewLayoutEvent) => {
+  _onLayout = async (event: ViewLayoutEvent) => {
     const wasFrameNull = this._frame == null;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
@@ -99,7 +119,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
 
     if (wasFrameNull) {
-      this._updateBottomIfNecessary();
+      await this._updateBottomIfNecessary();
     }
 
     if (this.props.onLayout) {
@@ -107,14 +127,14 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
   };
 
-  _updateBottomIfNecessary = () => {
+  _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
       this.setState({bottom: 0});
       return;
     }
 
     const {duration, easing, endCoordinates} = this._keyboardEvent;
-    const height = this._relativeKeyboardHeight(endCoordinates);
+    const height = await this._relativeKeyboardHeight(endCoordinates);
 
     if (this.state.bottom === height) {
       return;

package/Libraries/Components/Keyboard/NativeKeyboardObserver.js

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

package/Libraries/Components/Pressable/Pressable.d.ts

@@ -0,0 +1,167 @@
+/**
+ * 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 {Insets} from '../../../types/public/Insets';
+import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {
+  GestureResponderEvent,
+  MouseEvent,
+  NativeSyntheticEvent,
+  TargetedEvent,
+} from '../../Types/CoreEventTypes';
+import {View} from '../View/View';
+import {AccessibilityProps} from '../View/ViewAccessibility';
+import {ViewProps} from '../View/ViewPropTypes';
+
+export interface PressableStateCallbackType {
+  readonly pressed: boolean;
+}
+
+export interface PressableAndroidRippleConfig {
+  color?: null | ColorValue | undefined;
+  borderless?: null | boolean | undefined;
+  radius?: null | number | undefined;
+  foreground?: null | boolean | undefined;
+}
+
+export interface PressableProps
+  extends AccessibilityProps,
+    Omit<ViewProps, 'children' | 'style' | 'hitSlop'> {
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: null | ((event: MouseEvent) => void) | undefined;
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: null | ((event: MouseEvent) => void) | undefined;
+
+  /**
+   * Called when a single tap gesture is detected.
+   */
+  onPress?: null | ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * Called when a touch is engaged before `onPress`.
+   */
+  onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * Called when a touch is released before `onPress`.
+   */
+  onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * Called when a long-tap gesture is detected.
+   */
+  onLongPress?: null | ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * Called after the element loses focus.
+   * @platform macos windows
+   */
+  onBlur?:
+    | null
+    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
+    | undefined;
+
+  /**
+   * Called after the element is focused.
+   * @platform macos windows
+   */
+  onFocus?:
+    | null
+    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
+    | undefined;
+
+  /**
+   * Either children or a render prop that receives a boolean reflecting whether
+   * the component is currently pressed.
+   */
+  children?:
+    | React.ReactNode
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+    | undefined;
+
+  /**
+   * Whether a press gesture can be interrupted by a parent gesture such as a
+   * scroll event. Defaults to true.
+   */
+  cancelable?: null | boolean | undefined;
+
+  /**
+   * Duration to wait after hover in before calling `onHoverIn`.
+   * @platform macos windows
+   */
+  delayHoverIn?: number | null | undefined;
+
+  /**
+   * Duration to wait after hover out before calling `onHoverOut`.
+   * @platform macos windows
+   */
+  delayHoverOut?: number | null | undefined;
+
+  /**
+   * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+   */
+  delayLongPress?: null | number | undefined;
+
+  /**
+   * Whether the press behavior is disabled.
+   */
+  disabled?: null | boolean | undefined;
+
+  /**
+   * Additional distance outside of this view in which a press is detected.
+   */
+  hitSlop?: null | Insets | number | undefined;
+
+  /**
+   * Additional distance outside of this view in which a touch is considered a
+   * press before `onPressOut` is triggered.
+   */
+  pressRetentionOffset?: null | Insets | number | undefined;
+
+  /**
+   * If true, doesn't play system sound on touch.
+   */
+  android_disableSound?: null | boolean | undefined;
+
+  /**
+   * Enables the Android ripple effect and configures its color.
+   */
+  android_ripple?: null | PressableAndroidRippleConfig | undefined;
+
+  /**
+   * Used only for documentation or testing (e.g. snapshot testing).
+   */
+  testOnly_pressed?: null | boolean | undefined;
+
+  /**
+   * Either view styles or a function that receives a boolean reflecting whether
+   * the component is currently pressed and returns view styles.
+   */
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
+    | undefined;
+
+  /**
+   * Duration (in milliseconds) to wait after press down before calling onPressIn.
+   */
+  unstable_pressDelay?: number;
+}
+
+// TODO use React.AbstractComponent when available
+export const Pressable: React.ForwardRefExoticComponent<
+  PressableProps & React.RefAttributes<View>
+>;

package/Libraries/Components/Pressable/Pressable.js

@@ -8,11 +8,11 @@
  * @format
  */
 
-import * as React from 'react';
-import {useMemo, useState, useRef, useImperativeHandle} from 'react';
-import useAndroidRippleForView, {
-  type RippleConfig,
-} from './useAndroidRippleForView';
+import type {
+  LayoutEvent,
+  MouseEvent,
+  PressEvent,
+} from '../../Types/CoreEventTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -20,15 +20,16 @@ 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,
-} from '../../Types/CoreEventTypes';
 import View from '../View/View';
+import useAndroidRippleForView, {
+  type RippleConfig,
+} from './useAndroidRippleForView';
+import * as React from 'react';
+import {useImperativeHandle, useMemo, useRef, useState} from 'react';
 
 type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
 
@@ -50,8 +51,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,
@@ -164,6 +187,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,
 |}>;
 
 /**
@@ -175,8 +203,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,
@@ -205,17 +241,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,
   };