@office-iss/react-native-win32 0.78.4 → 0.79.0-preview.2

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

@@ -5,68 +5,97 @@
  * @flow strict-local
  * @format
  */
-
 'use strict';
 
-import * as React from 'react';
-import requireNativeComponent from '../../ReactNative/requireNativeComponent';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
-
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
-  /**
-   * Determines the type of background drawable that's going to be used to
-   * display feedback. It takes an object with `type` property and extra data
-   * depending on the `type`. It's recommended to use one of the static
-   * methods to generate that dictionary.
-   */
-  background?: ?(
-    | $ReadOnly<{|
-        type: 'ThemeAttrAndroid',
-        attribute:
-          | 'selectableItemBackground'
-          | 'selectableItemBackgroundBorderless',
-        rippleRadius: ?number,
-      |}>
-    | $ReadOnly<{|
-        type: 'RippleAndroid',
-        color: ?number,
-        borderless: boolean,
-        rippleRadius: ?number,
-      |}>
-  ),
+import Pressability, {
+  type PressabilityConfig,
+} from '../../Pressability/Pressability';
+import {findHostInstance_DEPRECATED} from '../../ReactNative/RendererProxy';
+import processColor from '../../StyleSheet/processColor';
+import Platform from '../../Utilities/Platform';
+import {Commands} from '../View/ViewNativeComponent';
+import invariant from 'invariant';
+import * as React from 'react';
 
+type TVProps = {
   /**
-   * TV preferred focus (see documentation for the View component).
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
    */
   hasTVPreferredFocus?: ?boolean,
 
   /**
-   * TV next focus down (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusDown?: ?number,
 
   /**
-   * TV next focus forward (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusForward?: ?number,
 
   /**
-   * TV next focus left (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusLeft?: ?number,
 
   /**
-   * TV next focus right (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusRight?: ?number,
 
   /**
-   * TV next focus up (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusUp?: ?number,
+};
 
+export type TouchableNativeFeedbackProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...TVProps,
+  /**
+   * Determines the type of background drawable that's going to be used to display feedback.
+   * It takes an object with type property and extra data depending on the type.
+   * It's recommended to use one of the following static methods to generate that dictionary:
+   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
+   *         default background for selectable elements (?android:attr/selectableItemBackground)
+   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
+   *         theme's default background for borderless selectable elements
+   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
+   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
+   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
+   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
+   *         type is available on Android API level 21+
+   */
+  background?: ?(
+    | $ReadOnly<{
+        type: 'ThemeAttrAndroid',
+        attribute:
+          | 'selectableItemBackground'
+          | 'selectableItemBackgroundBorderless',
+        rippleRadius: ?number,
+      }>
+    | $ReadOnly<{
+        type: 'RippleAndroid',
+        color: ?number,
+        borderless: boolean,
+        rippleRadius: ?number,
+      }>
+  ),
   /**
    * Set to true to add the ripple effect to the foreground of the view, instead
    * of the background. This is useful if one of your child views has a
@@ -80,20 +109,196 @@ type Props = $ReadOnly<{|
   useForeground?: ?boolean,
 
   tooltip?: string, // Win32
-|}>;
-
-const RCTTouchableNativeFeedback = requireNativeComponent<Props>(
-  'RCTTouchableNativeFeedback',
-);
-
-class TouchableNativeFeedback extends React.Component<Props, {}> {
-  render(): React.Node {
-    return (
-      <RCTTouchableNativeFeedback {...this.props}>
-        {this.props.children}
-      </RCTTouchableNativeFeedback>
+}>;
+
+type State = $ReadOnly<{
+  pressability: Pressability,
+}>;
+
+/**
+ * A wrapper for making views respond properly to touches (Android only).
+ * On Android this component uses native state drawable to display touch feedback.
+ * At the moment it only supports having a single View instance as a child node,
+ * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ *
+ * Background drawable of native feedback touchable can be customized with background property.
+ *
+ * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ */
+class TouchableNativeFeedback extends React.Component<
+  TouchableNativeFeedbackProps,
+  State,
+> {
+  /**
+   * Creates an object that represents android theme's default background for
+   * selectable elements (?android:attr/selectableItemBackground).
+   *
+   * @param rippleRadius The radius of ripple effect
+   */
+  static SelectableBackground: (rippleRadius?: ?number) => $ReadOnly<{
+    attribute: 'selectableItemBackground',
+    type: 'ThemeAttrAndroid',
+    rippleRadius: ?number,
+  }> = (rippleRadius?: ?number) => ({
+    type: 'ThemeAttrAndroid',
+    attribute: 'selectableItemBackground',
+    rippleRadius,
+  });
+
+  /**
+   * Creates an object that represent android theme's default background for borderless
+   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
+   * Available on android API level 21+.
+   *
+   * @param rippleRadius The radius of ripple effect
+   */
+  static SelectableBackgroundBorderless: (rippleRadius?: ?number) => $ReadOnly<{
+    attribute: 'selectableItemBackgroundBorderless',
+    type: 'ThemeAttrAndroid',
+    rippleRadius: ?number,
+  }> = (rippleRadius?: ?number) => ({
+    type: 'ThemeAttrAndroid',
+    attribute: 'selectableItemBackgroundBorderless',
+    rippleRadius,
+  });
+
+  /**
+   * Creates an object that represents ripple drawable with specified color (as a
+   * string). If property `borderless` evaluates to true the ripple will
+   * render outside of the view bounds (see native actionbar buttons as an
+   * example of that behavior). This background type is available on Android
+   * API level 21+.
+   *
+   * @param color The ripple color
+   * @param borderless If the ripple can render outside it's bounds
+   * @param rippleRadius The radius of ripple effect
+   */
+  static Ripple: (
+    color: string,
+    borderless: boolean,
+    rippleRadius?: ?number,
+  ) => $ReadOnly<{
+    borderless: boolean,
+    color: ?number,
+    rippleRadius: ?number,
+    type: 'RippleAndroid',
+  }> = (color: string, borderless: boolean, rippleRadius?: ?number) => {
+    const processedColor = processColor(color);
+    invariant(
+      processedColor == null || typeof processedColor === 'number',
+      'Unexpected color given for Ripple color',
     );
+    return {
+      type: 'RippleAndroid',
+      // $FlowFixMe[incompatible-type]
+      color: processedColor,
+      borderless,
+      rippleRadius,
+    };
+  };
+
+  /**
+   * Whether `useForeground` is supported.
+   */
+  static canUseNativeForeground: () => boolean = () =>
+    Platform.OS === 'android';
+
+  state: State = {
+    pressability: new Pressability(this._createPressabilityConfig()),
+  };
+
+  _createPressabilityConfig(): PressabilityConfig {
+    const accessibilityStateDisabled =
+      this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled;
+    return {
+      cancelable: !this.props.rejectResponderTermination,
+      disabled:
+        this.props.disabled != null
+          ? this.props.disabled
+          : accessibilityStateDisabled,
+      hitSlop: this.props.hitSlop,
+      delayLongPress: this.props.delayLongPress,
+      delayPressIn: this.props.delayPressIn,
+      delayPressOut: this.props.delayPressOut,
+      minPressDuration: 0,
+      pressRectOffset: this.props.pressRetentionOffset,
+      android_disableSound: this.props.touchSoundDisabled,
+      onLongPress: this.props.onLongPress,
+      onPress: this.props.onPress,
+      onPressIn: event => {
+        if (Platform.OS === 'android') {
+          this._dispatchHotspotUpdate(event);
+          this._dispatchPressedStateChange(true);
+        }
+        if (this.props.onPressIn != null) {
+          this.props.onPressIn(event);
+        }
+      },
+      onPressMove: event => {
+        if (Platform.OS === 'android') {
+          this._dispatchHotspotUpdate(event);
+        }
+      },
+      onPressOut: event => {
+        if (Platform.OS === 'android') {
+          this._dispatchPressedStateChange(false);
+        }
+        if (this.props.onPressOut != null) {
+          this.props.onPressOut(event);
+        }
+      },
+    };
+  }
+
+  _dispatchPressedStateChange(pressed: boolean): void {
+    if (Platform.OS === 'android') {
+      const hostComponentRef = findHostInstance_DEPRECATED(this);
+      if (hostComponentRef == null) {
+        console.warn(
+          'Touchable: Unable to find HostComponent instance. ' +
+            'Has your Touchable component been unmounted?',
+        );
+      } else {
+        Commands.setPressed(hostComponentRef, pressed);
+      }
+    }
+  }
+
+  _dispatchHotspotUpdate(event: GestureResponderEvent): void {
+    if (Platform.OS === 'android') {
+      const {locationX, locationY} = event.nativeEvent;
+      const hostComponentRef = findHostInstance_DEPRECATED(this);
+      if (hostComponentRef == null) {
+        console.warn(
+          'Touchable: Unable to find HostComponent instance. ' +
+            'Has your Touchable component been unmounted?',
+        );
+      } else {
+        Commands.hotspotUpdate(
+          hostComponentRef,
+          locationX ?? 0,
+          locationY ?? 0,
+        );
+      }
+    }
+  }
+
+  componentDidUpdate(
+    prevProps: TouchableNativeFeedbackProps,
+    prevState: State,
+  ) {
+    this.state.pressability.configure(this._createPressabilityConfig());
+  }
+
+  componentDidMount(): mixed {
+    this.state.pressability.configure(this._createPressabilityConfig());
+  }
+
+  componentWillUnmount(): void {
+    this.state.pressability.reset();
   }
 }
 
-module.exports = TouchableNativeFeedback;
+TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
+
+export default TouchableNativeFeedback;

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -9,7 +9,7 @@
  */
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import Animated from '../../Animated/Animated';
 import Easing from '../../Animated/Easing';
@@ -21,29 +21,71 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type TVProps = $ReadOnly<{|
+export type TVProps = $ReadOnly<{
+  /**
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
+   */
   hasTVPreferredFocus?: ?boolean,
+
+  /**
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusDown?: ?number,
+
+  /**
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusForward?: ?number,
+
+  /**
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusLeft?: ?number,
+
+  /**
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
+   */
   nextFocusRight?: ?number,
-  nextFocusUp?: ?number,
-|}>;
 
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-  ...TVProps,
+  /**
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
+   */
+  nextFocusUp?: ?number,
+}>;
 
+type TouchableOpacityBaseProps = $ReadOnly<{
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   * Defaults to 0.2
+   */
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
 
   hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
-|}>;
+}>;
+
+export type TouchableOpacityProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...TVProps,
+  ...TouchableOpacityBaseProps,
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   anim: Animated.Value,
   pressability: Pressability,
-|}>;
+}>;
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -129,7 +171,7 @@ type State = $ReadOnly<{|
  * ```
  *
  */
-class TouchableOpacity extends React.Component<Props, State> {
+class TouchableOpacity extends React.Component<TouchableOpacityProps, State> {
   state: State = {
     anim: new Animated.Value(this._getChildStyleOpacityWithDefault()),
     pressability: new Pressability(this._createPressabilityConfig()),
@@ -302,7 +344,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     );
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: TouchableOpacityProps, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
     if (
       this.props.disabled !== prevProps.disabled ||
@@ -328,12 +370,12 @@ class TouchableOpacity extends React.Component<Props, State> {
 }
 
 const Touchable: component(
-  ref: React.RefSetter<React.ElementRef<typeof Animated.View>>,
-  ...props: Props
+  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ...props: TouchableOpacityProps
 ) = React.forwardRef((props, ref) => (
   <TouchableOpacity {...props} hostRef={ref} />
 ));
 
 Touchable.displayName = 'TouchableOpacity';
 
-module.exports = Touchable;
+export default Touchable;

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -8,81 +8,125 @@
  * @format
  */
 
-import type {
-  AccessibilityActionEvent,
-  AccessibilityActionInfo,
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityValue,
-} from '../../Components/View/ViewAccessibility';
+import type {AccessibilityActionEvent} from '../../Components/View/ViewAccessibility';
 import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
-  LayoutEvent,
-  PressEvent,
+  GestureResponderEvent,
+  LayoutChangeEvent,
 } from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
+import {type AccessibilityProps} from '../../Components/View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
+import {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-type Props = $ReadOnly<{|
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
-  accessibilityElementsHidden?: ?boolean,
-  accessibilityHint?: ?Stringish,
-  accessibilityLanguage?: ?Stringish,
-  accessibilityIgnoresInvertColors?: ?boolean,
-  accessibilityLabel?: ?Stringish,
-  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
-  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,
+export type TouchableWithoutFeedbackPropsIOS = {};
+
+export type TouchableWithoutFeedbackPropsAndroid = {
   /**
-   * alias for accessibilityState
+   * If true, doesn't play a system sound on touch.
    *
-   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   * @platform android
    */
-  'aria-busy'?: ?boolean,
-  'aria-checked'?: ?boolean | 'mixed',
-  'aria-disabled'?: ?boolean,
-  'aria-expanded'?: ?boolean,
-  'aria-selected'?: ?boolean,
-  'aria-hidden'?: ?boolean,
-  'aria-live'?: ?('polite' | 'assertive' | 'off'),
-  'aria-label'?: ?Stringish,
-  children?: ?React.Node,
-  delayLongPress?: ?number,
-  delayPressIn?: ?number,
-  delayPressOut?: ?number,
-  disabled?: ?boolean,
-  focusable?: ?boolean,
-  hitSlop?: ?EdgeInsetsOrSizeProp,
-  id?: string,
-  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
-  nativeID?: ?string,
-  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
-  onBlur?: ?(event: BlurEvent) => mixed,
-  onFocus?: ?(event: FocusEvent) => mixed,
-  onLayout?: ?(event: LayoutEvent) => mixed,
-  onLongPress?: ?(event: PressEvent) => mixed,
-  onPress?: ?(event: PressEvent) => mixed,
-  onPressIn?: ?(event: PressEvent) => mixed,
-  onPressOut?: ?(event: PressEvent) => mixed,
-  pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
-  rejectResponderTermination?: ?boolean,
-  testID?: ?string,
   touchSoundDisabled?: ?boolean,
-|}>;
+};
+
+export type TouchableWithoutFeedbackProps = $ReadOnly<
+  {
+    children?: ?React.Node,
+    /**
+     * Delay in ms, from onPressIn, before onLongPress is called.
+     */
+    delayLongPress?: ?number,
+    /**
+     * Delay in ms, from the start of the touch, before onPressIn is called.
+     */
+    delayPressIn?: ?number,
+    /**
+     * Delay in ms, from the release of the touch, before onPressOut is called.
+     */
+    delayPressOut?: ?number,
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled?: ?boolean,
+    /**
+     * Whether this View should be focusable with a non-touch input device,
+     * eg. receive focus with a hardware keyboard / TV remote.
+     */
+    focusable?: ?boolean,
+    /**
+     * This defines how far your touch can start away from the button.
+     * This is added to pressRetentionOffset when moving off of the button.
+     * NOTE The touch area never extends past the parent view bounds and
+     * the Z-index of sibling views always takes precedence if a touch hits
+     * two overlapping views.
+     */
+    hitSlop?: ?EdgeInsetsOrSizeProp,
+    /**
+     * Used to reference react managed views from native code.
+     */
+    id?: string,
+    importantForAccessibility?: ?(
+      | 'auto'
+      | 'yes'
+      | 'no'
+      | 'no-hide-descendants'
+    ),
+    nativeID?: ?string,
+    onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+    /**
+     * When `accessible` is true (which is the default) this may be called when
+     * the OS-specific concept of "blur" occurs, meaning the element lost focus.
+     * Some platforms may not have the concept of blur.
+     */
+    onBlur?: ?(event: BlurEvent) => mixed,
+    /**
+     * When `accessible` is true (which is the default) this may be called when
+     * the OS-specific concept of "focus" occurs. Some platforms may not have
+     * the concept of focus.
+     */
+    onFocus?: ?(event: FocusEvent) => mixed,
+    /**
+     * Invoked on mount and layout changes with
+     * {nativeEvent: {layout: {x, y, width, height}}}
+     */
+    onLayout?: ?(event: LayoutChangeEvent) => mixed,
+    onLongPress?: ?(event: GestureResponderEvent) => mixed,
+    /**
+     * Called when the touch is released,
+     * but not if cancelled (e.g. by a scroll that steals the responder lock).
+     */
+    onPress?: ?(event: GestureResponderEvent) => mixed,
+    onPressIn?: ?(event: GestureResponderEvent) => mixed,
+    onPressOut?: ?(event: GestureResponderEvent) => mixed,
+    /**
+     * When the scroll view is disabled, this defines how far your
+     * touch may move off of the button, before deactivating the button.
+     * Once deactivated, try moving it back and you'll see that the button
+     * is once again reactivated! Move it back and forth several times
+     * while the scroll view is disabled. Ensure you pass in a constant
+     * to reduce memory allocations.
+     */
+    pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
+    rejectResponderTermination?: ?boolean,
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID?: ?string,
+    /**
+     * //FIXME: not in doc but available in examples
+     */
+    style?: ?ViewStyleProp,
+  } & TouchableWithoutFeedbackPropsAndroid &
+    TouchableWithoutFeedbackPropsIOS &
+    AccessibilityProps,
+>;
 
 const PASSTHROUGH_PROPS = [
   'accessibilityActions',
@@ -110,7 +154,16 @@ const PASSTHROUGH_PROPS = [
   'testID',
 ];
 
-module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
+/**
+ * Do not use unless you have a very good reason.
+ * All the elements that respond to press should have a visual feedback when touched.
+ * This is one of the primary reason a "web" app doesn't feel "native".
+ *
+ * @see https://reactnative.dev/docs/touchablewithoutfeedback
+ */
+export default function TouchableWithoutFeedback(
+  props: TouchableWithoutFeedbackProps,
+): React.Node {
   const {
     disabled,
     rejectResponderTermination,
@@ -231,4 +284,4 @@ module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
 
   // $FlowFixMe[incompatible-call]
   return React.cloneElement(element, elementProps, ...children);
-};
+}

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

@@ -8,6 +8,6 @@
  * @flow strict-local
  */
 
-export * from '../../../src/private/specs/components/UnimplementedNativeViewNativeComponent';
-import UnimplementedNativeViewNativeComponent from '../../../src/private/specs/components/UnimplementedNativeViewNativeComponent';
+export * from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
+import UnimplementedNativeViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
 export default UnimplementedNativeViewNativeComponent;