@office-iss/react-native-win32 0.66.0 → 0.66.4

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"
@@ -423,6 +451,13 @@
       "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.0",
+  "version": "0.66.4",
   "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",
@@ -78,10 +78,10 @@
   },
   "peerDependencies": {
     "react": "17.0.2",
-    "react-native": "0.66.0"
+    "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