@office-iss/react-native-win32 0.66.1 → 0.66.5

package/Libraries/Text/Text.win32.js

@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 DeprecatedTextPropTypes from '../DeprecatedPropTypes/DeprecatedTextPropTypes';
+import * as PressabilityDebug from '../Pressability/PressabilityDebug';
+import usePressability from '../Pressability/usePressability';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import processColor from '../StyleSheet/processColor';
+import TextAncestor from './TextAncestor';
+import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import {type TextProps} from './TextProps';
+import * as React from 'react';
+import {useContext, useMemo, useState} from 'react';
+import invariant from 'invariant';
+
+/**
+ * Text is the fundamental component for displaying text.
+ *
+ * @see https://reactnative.dev/docs/text.html
+ */
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  const {
+    accessible,
+    allowFontScaling,
+    ellipsizeMode,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onStartShouldSetResponder,
+    pressRetentionOffset,
+    suppressHighlighting,
+    ...restProps
+  } = props;
+
+  const [isHighlighted, setHighlighted] = useState(false);
+
+  const isPressable =
+    (onPress != null ||
+      onLongPress != null ||
+      onStartShouldSetResponder != null) &&
+    restProps.disabled !== true;
+
+  const initialized = useLazyInitialization(isPressable);
+  const config = useMemo(
+    () =>
+      initialized
+        ? {
+            disabled: !isPressable,
+            pressRectOffset: pressRetentionOffset,
+            onLongPress,
+            onPress,
+            onPressIn(event) {
+              setHighlighted(!suppressHighlighting);
+              onPressIn?.(event);
+            },
+            onPressOut(event) {
+              setHighlighted(false);
+              onPressOut?.(event);
+            },
+            onResponderTerminationRequest_DEPRECATED: onResponderTerminationRequest,
+            onStartShouldSetResponder_DEPRECATED: onStartShouldSetResponder,
+          }
+        : null,
+    [
+      initialized,
+      isPressable,
+      pressRetentionOffset,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onResponderTerminationRequest,
+      onStartShouldSetResponder,
+      suppressHighlighting,
+    ],
+  );
+
+  const eventHandlers = usePressability(config);
+  const eventHandlersForText = useMemo(
+    () =>
+      eventHandlers == null
+        ? null
+        : {
+            onResponderGrant(event) {
+              eventHandlers.onResponderGrant(event);
+              if (onResponderGrant != null) {
+                onResponderGrant(event);
+              }
+            },
+            onResponderMove(event) {
+              eventHandlers.onResponderMove(event);
+              if (onResponderMove != null) {
+                onResponderMove(event);
+              }
+            },
+            onResponderRelease(event) {
+              eventHandlers.onResponderRelease(event);
+              if (onResponderRelease != null) {
+                onResponderRelease(event);
+              }
+            },
+            onResponderTerminate(event) {
+              eventHandlers.onResponderTerminate(event);
+              if (onResponderTerminate != null) {
+                onResponderTerminate(event);
+              }
+            },
+            onResponderTerminationRequest:
+              eventHandlers.onResponderTerminationRequest,
+            onStartShouldSetResponder: eventHandlers.onStartShouldSetResponder,
+          },
+    [
+      eventHandlers,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+    ],
+  );
+
+  // TODO: Move this processing to the view configuration.
+  const selectionColor =
+    restProps.selectionColor == null
+      ? null
+      : processColor(restProps.selectionColor);
+
+  let style = restProps.style;
+  if (__DEV__) {
+    if (PressabilityDebug.isEnabled() && onPress != null) {
+      style = StyleSheet.compose(restProps.style, {
+        color: 'magenta',
+      });
+    }
+  }
+
+  let numberOfLines = restProps.numberOfLines;
+  if (numberOfLines != null && !(numberOfLines >= 0)) {
+    console.error(
+      `'numberOfLines' in <Text> must be a non-negative number, received: ${numberOfLines}. The value will be set to 0.`,
+    );
+    numberOfLines = 0;
+  }
+
+  const hasTextAncestor = useContext(TextAncestor);
+
+  return hasTextAncestor ? (
+    <NativeVirtualText
+      {...restProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={isPressable} // This was added upstream in https://github.com/facebook/react-native/commit/f3bf2e4f51897f1bb71e37002c288ebf3b23cf78
+      numberOfLines={numberOfLines}
+      selectionColor={selectionColor}
+      style={style}
+      ref={forwardedRef}
+    />
+  ) : (
+    <TextAncestor.Provider value={true}>
+      <NativeText
+        {...restProps}
+        {...eventHandlersForText}
+        accessible={accessible !== false}
+        allowFontScaling={allowFontScaling !== false}
+        ellipsizeMode={ellipsizeMode ?? 'tail'}
+        isHighlighted={isHighlighted}
+        isPressable={isPressable} // [Win32] - We use this to optimize text hit testing
+        numberOfLines={numberOfLines}
+        selectionColor={selectionColor}
+        style={style}
+        ref={forwardedRef}
+      />
+    </TextAncestor.Provider>
+  );
+});
+
+Text.displayName = 'Text';
+
+// TODO: Delete this.
+Text.propTypes = DeprecatedTextPropTypes;
+
+/**
+ * Returns false until the first time `newValue` is true, after which this will
+ * always return true. This is necessary to lazily initialize `Pressability` so
+ * we do not eagerly create one for every pressable `Text` component.
+ */
+function useLazyInitialization(newValue: boolean): boolean {
+  const [oldValue, setValue] = useState(newValue);
+  if (!oldValue && newValue) {
+    setValue(newValue);
+  }
+  return oldValue;
+}
+
+// $FlowFixMe[incompatible-cast] - No good way to type a React.AbstractComponent with statics.
+module.exports = (Text: typeof Text &
+  $ReadOnly<{
+    propTypes: typeof DeprecatedTextPropTypes,
+  }>);

package/Libraries/Text/TextNativeComponent.win32.js

@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
 import ReactNativeViewAttributes from '../Components/View/ReactNativeViewAttributes';
 import UIManager from '../ReactNative/UIManager';
 import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
@@ -9,6 +19,10 @@ type NativeTextProps = $ReadOnly<{
   ...TextProps,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,
+  // This is only needed for platforms that optimize text hit testing, e.g.,
+  // react-native-windows. It can be used to only hit test virtual text spans
+  // that have pressable events attached to them.
+  isPressable?: ?boolean,
 }>;
 
 export const NativeText: HostComponent<NativeTextProps> = (createReactNativeComponentClass(
@@ -18,6 +32,7 @@ export const NativeText: HostComponent<NativeTextProps> = (createReactNativeComp
     validAttributes: {
       ...ReactNativeViewAttributes.UIView,
       isHighlighted: true,
+      isPressable: true,
       numberOfLines: true,
       ellipsizeMode: true,
       allowFontScaling: true,
@@ -53,14 +68,14 @@ export const NativeText: HostComponent<NativeTextProps> = (createReactNativeComp
 ): any);
 
 export const NativeVirtualText: HostComponent<NativeTextProps> =
-  !global.RN$Bridgeless &&
-  UIManager.getViewManagerConfig('RCTVirtualText') == null
+  !global.RN$Bridgeless && !UIManager.hasViewManagerConfig('RCTVirtualText')
     ? NativeText
     : (createReactNativeComponentClass('RCTVirtualText', () => ({
         // $FlowFixMe[incompatible-call]
         validAttributes: {
           ...ReactNativeViewAttributes.UIView,
           isHighlighted: true,
+          isPressable: true,
           maxFontSizeMultiplier: true,
         },
         uiViewClassName: 'RCTVirtualText',

package/Libraries/Types/CoreEventTypes.win32.js

@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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
+ * @format
+ */
+
+import * as React from 'react';
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+
+export type SyntheticEvent<T> = $ReadOnly<{|
+  bubbles: ?boolean,
+  cancelable: ?boolean,
+  currentTarget: number | React.ElementRef<HostComponent<mixed>>,
+  defaultPrevented: ?boolean,
+  dispatchConfig: $ReadOnly<{|
+    registrationName: string,
+  |}>,
+  eventPhase: ?number,
+  preventDefault: () => void,
+  isDefaultPrevented: () => boolean,
+  stopPropagation: () => void,
+  isPropagationStopped: () => boolean,
+  isTrusted: ?boolean,
+  nativeEvent: T,
+  persist: () => void,
+  target: ?number | React.ElementRef<HostComponent<mixed>>,
+  timeStamp: number,
+  type: ?string,
+|}>;
+
+export type ResponderSyntheticEvent<T> = $ReadOnly<{|
+  ...SyntheticEvent<T>,
+  touchHistory: $ReadOnly<{|
+    indexOfSingleActiveTouch: number,
+    mostRecentTimeStamp: number,
+    numberActiveTouches: number,
+    touchBank: $ReadOnlyArray<
+      $ReadOnly<{|
+        touchActive: boolean,
+        startPageX: number,
+        startPageY: number,
+        startTimeStamp: number,
+        currentPageX: number,
+        currentPageY: number,
+        currentTimeStamp: number,
+        previousPageX: number,
+        previousPageY: number,
+        previousTimeStamp: number,
+      |}>,
+    >,
+  |}>,
+|}>;
+
+export type Layout = $ReadOnly<{|
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+|}>;
+
+export type TextLayout = $ReadOnly<{|
+  ...Layout,
+  ascender: number,
+  capHeight: number,
+  descender: number,
+  text: string,
+  xHeight: number,
+|}>;
+
+export type LayoutEvent = SyntheticEvent<
+  $ReadOnly<{|
+    layout: Layout,
+  |}>,
+>;
+
+export type TextLayoutEvent = SyntheticEvent<
+  $ReadOnly<{|
+    lines: Array<TextLayout>,
+  |}>,
+>;
+
+export type PressEvent = ResponderSyntheticEvent<
+  $ReadOnly<{|
+    altKey: ?boolean, // TODO(macOS)
+    button: ?number, // TODO(macOS)
+    changedTouches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
+    ctrlKey: ?boolean, // TODO(macOS)
+    force?: number,
+    identifier: number,
+    locationX: number,
+    locationY: number,
+    metaKey: ?boolean, // TODO(macOS)
+    pageX: number,
+    pageY: number,
+    shiftKey: ?boolean, // TODO(macOS)
+    target: ?number,
+    timestamp: number,
+    touches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
+  |}>,
+>;
+
+export type ScrollEvent = SyntheticEvent<
+  $ReadOnly<{|
+    contentInset: $ReadOnly<{|
+      bottom: number,
+      left: number,
+      right: number,
+      top: number,
+    |}>,
+    contentOffset: $ReadOnly<{|
+      y: number,
+      x: number,
+    |}>,
+    contentSize: $ReadOnly<{|
+      height: number,
+      width: number,
+    |}>,
+    layoutMeasurement: $ReadOnly<{|
+      height: number,
+      width: number,
+    |}>,
+    targetContentOffset?: $ReadOnly<{|
+      y: number,
+      x: number,
+    |}>,
+    velocity?: $ReadOnly<{|
+      y: number,
+      x: number,
+    |}>,
+    zoomScale?: number,
+    responderIgnoreScroll?: boolean,
+    key?: string, // TODO(macOS)
+  |}>,
+>;
+
+export type BlurEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+export type FocusEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+// [Windows Mouse events on Windows don't match up with the version in core
+// introduced for react-native-web. Replace typings with our values to catch
+// anything dependent on react-native-web specific values
+export type MouseEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+    identifier: number,
+    pageX: number,
+    pageY: number,
+    locationX: number,
+    locationY: number,
+    timestamp: number,
+    pointerType: string,
+    force: number,
+    isLeftButton: boolean,
+    isRightButton: boolean,
+    isMiddleButton: boolean,
+    isBarrelButtonPressed: boolean,
+    isHorizontalScrollWheel: boolean,
+    isEraser: boolean,
+    shiftKey: boolean,
+    ctrlKey: boolean,
+    altKey: boolean,
+  |}>,
+>;
+// Windows]
+
+// [Windows
+export type KeyEvent = SyntheticEvent<
+  $ReadOnly<{|
+    altKey: boolean,
+    ctrlKey: boolean,
+    metaKey: boolean,
+    shiftKey: boolean,
+    key: string,
+    code: string,
+    eventPhase: number,
+  |}>,
+>;
+// Windows]

package/overrides.json

@@ -80,6 +80,13 @@
       "baseHash": "0b409391c852a1001cee74a84414a13c4fe88f8b",
       "issue": 4378
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Components/Pressable/Pressable.win32.js",
+      "baseFile": "Libraries/Components/Pressable/Pressable.js",
+      "baseHash": "614553aa8396b42e932f8c717ebc8b493d772d93",
+      "issue": 6240
+    },
     {
       "type": "copy",
       "file": "src/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
@@ -191,6 +198,13 @@
       "baseFile": "Libraries/Components/View/View.js",
       "baseHash": "77bfbef8e835e4fee49311779bb039a99ae44372"
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Components/View/ViewPropTypes.win32.js",
+      "baseFile": "Libraries/Components/View/ViewPropTypes.js",
+      "baseHash": "2b12228aa1ab0e12844996a99ff5d38fbff689a1",
+      "issue": 6240
+    },
     {
       "type": "platform",
       "file": "src/Libraries/Components/View/ViewWin32.Props.ts"
@@ -370,6 +384,20 @@
       "type": "platform",
       "file": "src/Libraries/PersonaCoin/PersonaCoinTypes.ts"
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Pressability/HoverState.win32.js",
+      "baseFile": "Libraries/Pressability/HoverState.js",
+      "baseHash": "2807a1cddb7c5135f63e5dd4d0706ac660f25d76",
+      "issue": 6240
+    },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Pressability/Pressability.win32.js",
+      "baseFile": "Libraries/Pressability/Pressability.js",
+      "baseHash": "f0ff8ce99b09be692f6beb9231c7dec3140da02d",
+      "issue": 6240
+    },
     {
       "type": "platform",
       "file": "src/Libraries/QuirkSettings/CachingNativeQuirkSettings.js"
@@ -417,12 +445,26 @@
       "baseHash": "afe4fc1e9aa91d08a7a1098e3bbd3b17a73b4a65"
     },
     {
-      "type": "derived",
+      "type": "patch",
+      "file": "src/Libraries/Text/Text.win32.js",
+      "baseFile": "Libraries/Text/Text.js",
+      "baseHash": "8b90eb090dcfed88a40a38bbb51cbbd1e0d9ca9e",
+      "issue": 7074
+    },
+    {
+      "type": "patch",
       "file": "src/Libraries/Text/TextNativeComponent.win32.js",
       "baseFile": "Libraries/Text/TextNativeComponent.js",
       "baseHash": "1a196691fb0e9b656c348b7d42427c1c6163c9bb",
       "issue": 7074
     },
+    {
+      "type": "patch",
+      "file": "src/Libraries/Types/CoreEventTypes.win32.js",
+      "baseFile": "Libraries/Types/CoreEventTypes.js",
+      "baseHash": "22c50d13820ca4db6c6cf5e6563f8437d55c24af",
+      "issue": 6240
+    },
     {
       "type": "copy",
       "file": "src/Libraries/Utilities/BackHandler.win32.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.66.1",
+  "version": "0.66.5",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "license": "MIT",
   "main": "./index.win32.js",
@@ -25,7 +25,7 @@
     "@react-native-community/cli": "^6.0.0",
     "@react-native-community/cli-platform-android": "^6.0.0",
     "@react-native-community/cli-platform-ios": "^6.0.0",
-    "@react-native-windows/virtualized-list": "0.66.0",
+    "@react-native-windows/virtualized-list": "0.66.1",
     "@react-native/assets": "1.0.0",
     "@react-native/normalize-color": "1.0.0",
     "@react-native/polyfills": "2.0.0",
@@ -81,7 +81,7 @@
     "react-native": "^0.66.0"
   },
   "beachball": {
-    "defaultNpmTag": "latest",
+    "defaultNpmTag": "v0.66-stable",
     "disallowedChangeTypes": [
       "major",
       "minor",

package/src/Libraries/Components/View/Tests/ViewWin32Test.tsx

@@ -54,6 +54,7 @@ class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentSta
           style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
+          enableFocusRing={false}
         >
           <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
         </ViewWin32>
@@ -118,6 +119,7 @@ class KeyboardTestComponent extends React.Component<{}, IFocusableComponentState
           onKeyDown={this._onKeyDown}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
+          enableFocusRing={false}
         >
           <ViewWin32 style={styles.keyEnterVisualizer}>
             <Text>OnKeyDown</Text>
@@ -244,6 +246,61 @@ const CursorExample: React.FunctionComponent = () => {
     </ViewWin32>
   );
 }
+class EnableFocusRingExample extends React.Component<{}, IFocusableComponentState> {
+  public constructor(props) {
+    super(props);
+    this.state = {
+      hasFocus: false,
+    };
+  }
+  
+  public render() {
+    return (
+      <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
+        <ViewWin32
+          style={{
+            backgroundColor: 'pink',
+            height: 100,
+            width: 100,
+          }}
+          enableFocusRing={true}
+          focusable
+        >
+          <Text>enableFocusRing set to true</Text>
+        </ViewWin32>
+        <ViewWin32
+          style={{
+            backgroundColor: 'pink',
+            height: 100,
+            width: 100,
+          }}
+          enableFocusRing={false}
+          focusable
+          onFocus={this._onFocus}
+          onBlur={this._onBlur}
+        >
+          <>
+            <Text>enableFocusRing set to false</Text>
+            <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
+          </>
+        </ViewWin32>
+      </ViewWin32>
+    );
+  }
+
+  private readonly _onFocus = () => {
+    this.setState({
+      hasFocus: true,
+    });
+  };
+
+  private readonly _onBlur = () => {
+    this.setState({
+      hasFocus: false,
+    });
+  };
+}
+
 
 export const title = 'ViewWin32';
 export const displayName = 'ViewWin32 Example';
@@ -290,4 +347,11 @@ export const examples = [
       return <CursorExample />;
     },
   },
+  {
+    title: 'EnableFocusRing example',
+    description: 'Displays focus visuals that are driven by native',
+    render(): JSX.Element {
+      return <EnableFocusRingExample />;
+    },
+  },
 ];

package/src/Libraries/Components/View/ViewWin32.Props.ts

@@ -217,6 +217,7 @@ export interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>,
   accessibilitySetSize?: number;
   animationClass?: string;
   focusable?: boolean;
+  enableFocusRing?: boolean;
 
   /**
    * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React