react-native-windows 0.0.0-canary.485 → 0.0.0-canary.488

package/.flowconfig

@@ -118,4 +118,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.175.0
+^0.175.1

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -46,20 +46,23 @@ function createInterpolation(
   }
 
   const outputRange: Array<number> = (config.outputRange: any);
-  checkInfiniteRange('outputRange', outputRange);
 
   const inputRange = config.inputRange;
-  checkInfiniteRange('inputRange', inputRange);
-  checkValidInputRange(inputRange);
 
-  invariant(
-    inputRange.length === outputRange.length,
-    'inputRange (' +
-      inputRange.length +
-      ') and outputRange (' +
-      outputRange.length +
-      ') must have the same length',
-  );
+  if (__DEV__) {
+    checkInfiniteRange('outputRange', outputRange);
+    checkInfiniteRange('inputRange', inputRange);
+    checkValidInputRange(inputRange);
+
+    invariant(
+      inputRange.length === outputRange.length,
+      'inputRange (' +
+        inputRange.length +
+        ') and outputRange (' +
+        outputRange.length +
+        ') must have the same length',
+    );
+  }
 
   const easing = config.easing || linear;
 
@@ -276,16 +279,10 @@ function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
 
 function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, 'inputRange must have at least 2 elements');
+  const message =
+    'inputRange must be monotonically non-decreasing ' + String(arr);
   for (let i = 1; i < arr.length; ++i) {
-    invariant(
-      arr[i] >= arr[i - 1],
-      /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
-       * below this comment, one or both of the operands may be something that
-       * doesn't cleanly convert to a string, like undefined, null, and object,
-       * etc. If you really mean this implicit string conversion, you can do
-       * something like String(myThing) */
-      'inputRange must be monotonically non-decreasing ' + arr,
-    );
+    invariant(arr[i] >= arr[i - 1], message);
   }
 }
 

package/Libraries/Components/View/ViewPropTypes.js

@@ -14,6 +14,7 @@ import type {
   BlurEvent,
   FocusEvent,
   MouseEvent,
+  PointerEvent,
   PressEvent,
   Layout,
   LayoutEvent,
@@ -84,8 +85,28 @@ type DirectEventProps = $ReadOnly<{|
 |}>;
 
 type MouseEventProps = $ReadOnly<{|
-  onMouseEnter?: (event: MouseEvent) => void,
-  onMouseLeave?: (event: MouseEvent) => void,
+  onMouseEnter?: ?(event: MouseEvent) => void,
+  onMouseLeave?: ?(event: MouseEvent) => void,
+|}>;
+
+type PointerEventProps = $ReadOnly<{|
+  onPointerEnter?: ?(event: PointerEvent) => void,
+  onPointerLeave?: ?(event: PointerEvent) => void,
+  onPointerMove?: ?(event: PointerEvent) => void,
+  onPointerCancel?: ?(e: PointerEvent) => void,
+  onPointerCancelCapture?: ?(e: PointerEvent) => void,
+  onPointerDown?: ?(e: PointerEvent) => void,
+  onPointerDownCapture?: ?(e: PointerEvent) => void,
+  onPointerUp?: ?(e: PointerEvent) => void,
+  onPointerUpCapture?: ?(e: PointerEvent) => void,
+
+  // FIXME: these events are temporary while we converge pointer event handling
+  onPointerEnter2?: ?(e: PointerEvent) => void,
+  onPointerEnter2Capture?: ?(e: PointerEvent) => void,
+  onPointerLeave2?: ?(e: PointerEvent) => void,
+  onPointerLeave2Capture?: ?(e: PointerEvent) => void,
+  onPointerMove2?: ?(e: PointerEvent) => void,
+  onPointerMove2Capture?: ?(e: PointerEvent) => void,
 |}>;
 
 type TouchEventProps = $ReadOnly<{|
@@ -99,20 +120,6 @@ type TouchEventProps = $ReadOnly<{|
   onTouchStartCapture?: ?(e: PressEvent) => void,
 |}>;
 
-type PointerEventCallbackProps = $ReadOnly<{|
-  onPointerCancel?: ?(e: PointerEvent) => void,
-  onPointerCancelCapture?: ?(e: PointerEvent) => void,
-  onPointerDown?: ?(e: PointerEvent) => void,
-  onPointerDownCapture?: ?(e: PointerEvent) => void,
-  onPointerEnter2?: ?(e: PointerEvent) => void,
-  onPointerLeave2?: ?(e: PointerEvent) => void,
-  onPointerEnter2Capture?: ?(e: PointerEvent) => void,
-  onPointerLeave2Capture?: ?(e: PointerEvent) => void,
-  onPointerMove2Capture?: ?(e: PointerEvent) => void,
-  onPointerUp?: ?(e: PointerEvent) => void,
-  onPointerUpCapture?: ?(e: PointerEvent) => void,
-|}>;
-
 /**
  * For most touch interactions, you'll simply want to wrap your component in
  * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
@@ -395,8 +402,8 @@ export type ViewProps = $ReadOnly<{|
   ...DirectEventProps,
   ...GestureResponderEventProps,
   ...MouseEventProps,
+  ...PointerEventProps,
   ...TouchEventProps,
-  ...PointerEventCallbackProps,
   ...AndroidViewProps,
   ...IOSViewProps,
 

package/Libraries/Components/View/ViewPropTypes.windows.js

@@ -14,6 +14,7 @@ import type {
   BlurEvent,
   FocusEvent,
   MouseEvent,
+  PointerEvent,
   PressEvent,
   Layout,
   LayoutEvent,
@@ -85,8 +86,28 @@ type DirectEventProps = $ReadOnly<{|
 |}>;
 
 type MouseEventProps = $ReadOnly<{|
-  onMouseEnter?: (event: MouseEvent) => void,
-  onMouseLeave?: (event: MouseEvent) => void,
+  onMouseEnter?: ?(event: MouseEvent) => void,
+  onMouseLeave?: ?(event: MouseEvent) => void,
+|}>;
+
+type PointerEventProps = $ReadOnly<{|
+  onPointerEnter?: ?(event: PointerEvent) => void,
+  onPointerLeave?: ?(event: PointerEvent) => void,
+  onPointerMove?: ?(event: PointerEvent) => void,
+  onPointerCancel?: ?(e: PointerEvent) => void,
+  onPointerCancelCapture?: ?(e: PointerEvent) => void,
+  onPointerDown?: ?(e: PointerEvent) => void,
+  onPointerDownCapture?: ?(e: PointerEvent) => void,
+  onPointerUp?: ?(e: PointerEvent) => void,
+  onPointerUpCapture?: ?(e: PointerEvent) => void,
+
+  // FIXME: these events are temporary while we converge pointer event handling
+  onPointerEnter2?: ?(e: PointerEvent) => void,
+  onPointerEnter2Capture?: ?(e: PointerEvent) => void,
+  onPointerLeave2?: ?(e: PointerEvent) => void,
+  onPointerLeave2Capture?: ?(e: PointerEvent) => void,
+  onPointerMove2?: ?(e: PointerEvent) => void,
+  onPointerMove2Capture?: ?(e: PointerEvent) => void,
 |}>;
 
 type TouchEventProps = $ReadOnly<{|
@@ -100,20 +121,6 @@ type TouchEventProps = $ReadOnly<{|
   onTouchStartCapture?: ?(e: PressEvent) => void,
 |}>;
 
-type PointerEventCallbackProps = $ReadOnly<{|
-  onPointerCancel?: ?(e: PointerEvent) => void,
-  onPointerCancelCapture?: ?(e: PointerEvent) => void,
-  onPointerDown?: ?(e: PointerEvent) => void,
-  onPointerDownCapture?: ?(e: PointerEvent) => void,
-  onPointerEnter2?: ?(e: PointerEvent) => void,
-  onPointerLeave2?: ?(e: PointerEvent) => void,
-  onPointerEnter2Capture?: ?(e: PointerEvent) => void,
-  onPointerLeave2Capture?: ?(e: PointerEvent) => void,
-  onPointerMove2Capture?: ?(e: PointerEvent) => void,
-  onPointerUp?: ?(e: PointerEvent) => void,
-  onPointerUpCapture?: ?(e: PointerEvent) => void,
-|}>;
-
 /**
  * For most touch interactions, you'll simply want to wrap your component in
  * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
@@ -443,8 +450,8 @@ export type ViewProps = $ReadOnly<{|
   ...DirectEventProps,
   ...GestureResponderEventProps,
   ...MouseEventProps,
+  ...PointerEventProps,
   ...TouchEventProps,
-  ...PointerEventCallbackProps,
   ...AndroidViewProps,
   ...IOSViewProps,
   ...WindowsViewProps, // [Windows]

package/Libraries/Core/ReactNativeVersion.js

@@ -13,5 +13,5 @@ exports.version = {
   major: 0,
   minor: 0,
   patch: 0,
-  prerelease: '20220404-2009-d5da70e17',
+  prerelease: '20220411-2010-f503b2120',
 };

package/Libraries/NativeComponent/PlatformBaseViewConfig.js

@@ -363,6 +363,32 @@ const PlatformBaseViewConfig: PartialViewConfigWithoutName =
               captured: 'onTouchEndCapture',
             },
           },
+
+          // Pointer Events
+          topPointerCancel: {
+            phasedRegistrationNames: {
+              captured: 'onPointerCancelCapture',
+              bubbled: 'onPointerCancel',
+            },
+          },
+          topPointerDown: {
+            phasedRegistrationNames: {
+              captured: 'onPointerDownCapture',
+              bubbled: 'onPointerDown',
+            },
+          },
+          topPointerMove2: {
+            phasedRegistrationNames: {
+              captured: 'onPointerMove2Capture',
+              bubbled: 'onPointerMove2',
+            },
+          },
+          topPointerUp: {
+            phasedRegistrationNames: {
+              captured: 'onPointerUpCapture',
+              bubbled: 'onPointerUp',
+            },
+          },
         },
         directEventTypes: {
           topAccessibilityAction: {

package/Libraries/StyleSheet/processTransform.windows.js

@@ -0,0 +1,272 @@
+/**
+ * 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
+ * @flow
+ */
+
+'use strict';
+
+const MatrixMath = require('../Utilities/MatrixMath');
+const Platform = require('../Utilities/Platform');
+
+const invariant = require('invariant');
+const stringifySafe = require('../Utilities/stringifySafe').default;
+
+/**
+ * Generate a transform matrix based on the provided transforms, and use that
+ * within the style object instead.
+ *
+ * This allows us to provide an API that is similar to CSS, where transforms may
+ * be applied in an arbitrary order, and yet have a universal, singular
+ * interface to native code.
+ */
+function processTransform(
+  transform: Array<Object>,
+): Array<Object> | Array<number> {
+  if (__DEV__) {
+    _validateTransforms(transform);
+  }
+
+  // Android & iOS implementations of transform property accept the list of
+  // transform properties as opposed to a transform Matrix. This is necessary
+  // to control transform property updates completely on the native thread.
+  if (
+    Platform.OS === 'android' ||
+    Platform.OS === 'ios' ||
+    Platform.OS === 'windows'
+  ) {
+    return transform;
+  }
+
+  const result = MatrixMath.createIdentityMatrix();
+
+  transform.forEach((transformation) => {
+    const key = Object.keys(transformation)[0];
+    const value = transformation[key];
+
+    switch (key) {
+      case 'matrix':
+        MatrixMath.multiplyInto(result, result, value);
+        break;
+      case 'perspective':
+        _multiplyTransform(result, MatrixMath.reusePerspectiveCommand, [value]);
+        break;
+      case 'rotateX':
+        _multiplyTransform(result, MatrixMath.reuseRotateXCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'rotateY':
+        _multiplyTransform(result, MatrixMath.reuseRotateYCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'rotate':
+      case 'rotateZ':
+        _multiplyTransform(result, MatrixMath.reuseRotateZCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'scale':
+        _multiplyTransform(result, MatrixMath.reuseScaleCommand, [value]);
+        break;
+      case 'scaleX':
+        _multiplyTransform(result, MatrixMath.reuseScaleXCommand, [value]);
+        break;
+      case 'scaleY':
+        _multiplyTransform(result, MatrixMath.reuseScaleYCommand, [value]);
+        break;
+      case 'translate':
+        _multiplyTransform(result, MatrixMath.reuseTranslate3dCommand, [
+          value[0],
+          value[1],
+          value[2] || 0,
+        ]);
+        break;
+      case 'translateX':
+        _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [
+          value,
+          0,
+        ]);
+        break;
+      case 'translateY':
+        _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [
+          0,
+          value,
+        ]);
+        break;
+      case 'skewX':
+        _multiplyTransform(result, MatrixMath.reuseSkewXCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'skewY':
+        _multiplyTransform(result, MatrixMath.reuseSkewYCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      default:
+        throw new Error('Invalid transform name: ' + key);
+    }
+  });
+
+  return result;
+}
+
+/**
+ * Performs a destructive operation on a transform matrix.
+ */
+function _multiplyTransform(
+  result: Array<number>,
+  matrixMathFunction: Function,
+  args: Array<number>,
+): void {
+  const matrixToApply = MatrixMath.createIdentityMatrix();
+  const argsWithIdentity = [matrixToApply].concat(args);
+  matrixMathFunction.apply(this, argsWithIdentity);
+  MatrixMath.multiplyInto(result, result, matrixToApply);
+}
+
+/**
+ * Parses a string like '0.5rad' or '60deg' into radians expressed in a float.
+ * Note that validation on the string is done in `_validateTransform()`.
+ */
+function _convertToRadians(value: string): number {
+  const floatValue = parseFloat(value);
+  return value.indexOf('rad') > -1 ? floatValue : (floatValue * Math.PI) / 180;
+}
+
+function _validateTransforms(transform: Array<Object>): void {
+  transform.forEach((transformation) => {
+    const keys = Object.keys(transformation);
+    invariant(
+      keys.length === 1,
+      'You must specify exactly one property per transform object. Passed properties: %s',
+      stringifySafe(transformation),
+    );
+    const key = keys[0];
+    const value = transformation[key];
+    _validateTransform(key, value, transformation);
+  });
+}
+
+function _validateTransform(
+  key:
+    | string
+    | $TEMPORARY$string<'matrix'>
+    | $TEMPORARY$string<'perspective'>
+    | $TEMPORARY$string<'rotate'>
+    | $TEMPORARY$string<'rotateX'>
+    | $TEMPORARY$string<'rotateY'>
+    | $TEMPORARY$string<'rotateZ'>
+    | $TEMPORARY$string<'scale'>
+    | $TEMPORARY$string<'scaleX'>
+    | $TEMPORARY$string<'scaleY'>
+    | $TEMPORARY$string<'skewX'>
+    | $TEMPORARY$string<'skewY'>
+    | $TEMPORARY$string<'translate'>
+    | $TEMPORARY$string<'translateX'>
+    | $TEMPORARY$string<'translateY'>,
+  value: any | number | string,
+  transformation: any,
+) {
+  invariant(
+    !value.getValue,
+    'You passed an Animated.Value to a normal component. ' +
+      'You need to wrap that component in an Animated. For example, ' +
+      'replace <View /> by <Animated.View />.',
+  );
+
+  const multivalueTransforms = ['matrix', 'translate'];
+  if (multivalueTransforms.indexOf(key) !== -1) {
+    invariant(
+      Array.isArray(value),
+      'Transform with key of %s must have an array as the value: %s',
+      key,
+      stringifySafe(transformation),
+    );
+  }
+  switch (key) {
+    case 'matrix':
+      invariant(
+        value.length === 9 || value.length === 16,
+        'Matrix transform must have a length of 9 (2d) or 16 (3d). ' +
+          'Provided matrix has a length of %s: %s',
+        /* $FlowFixMe[prop-missing] (>=0.84.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.84 was deployed. To
+         * see the error, delete this comment and run Flow. */
+        value.length,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'translate':
+      invariant(
+        value.length === 2 || value.length === 3,
+        'Transform with key translate must be an array of length 2 or 3, found %s: %s',
+        /* $FlowFixMe[prop-missing] (>=0.84.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.84 was deployed. To
+         * see the error, delete this comment and run Flow. */
+        value.length,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'rotateX':
+    case 'rotateY':
+    case 'rotateZ':
+    case 'rotate':
+    case 'skewX':
+    case 'skewY':
+      invariant(
+        typeof value === 'string',
+        'Transform with key of "%s" must be a string: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      invariant(
+        value.indexOf('deg') > -1 || value.indexOf('rad') > -1,
+        'Rotate transform must be expressed in degrees (deg) or radians ' +
+          '(rad): %s',
+        stringifySafe(transformation),
+      );
+      break;
+    case 'perspective':
+      invariant(
+        typeof value === 'number',
+        'Transform with key of "%s" must be a number: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      invariant(
+        value !== 0,
+        'Transform with key of "%s" cannot be zero: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'translateX':
+    case 'translateY':
+    case 'scale':
+    case 'scaleX':
+    case 'scaleY':
+      invariant(
+        typeof value === 'number',
+        'Transform with key of "%s" must be a number: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
+    default:
+      invariant(
+        false,
+        'Invalid transform %s: %s',
+        key,
+        stringifySafe(transformation),
+      );
+  }
+}
+
+module.exports = processTransform;

package/Libraries/Text/TextProps.js

@@ -12,6 +12,7 @@
 
 import type {
   LayoutEvent,
+  PointerEvent,
   PressEvent,
   TextLayoutEvent,
 } from '../Types/CoreEventTypes';
@@ -31,10 +32,18 @@ export type PressRetentionOffset = $ReadOnly<{|
   right: number,
 |}>;
 
+type PointerEventProps = $ReadOnly<{|
+  onPointerEnter?: (event: PointerEvent) => void,
+  onPointerLeave?: (event: PointerEvent) => void,
+  onPointerMove?: (event: PointerEvent) => void,
+|}>;
+
 /**
  * @see https://reactnative.dev/docs/text#reference
  */
 export type TextProps = $ReadOnly<{|
+  ...PointerEventProps,
+
   /**
    * Indicates whether the view is an accessibility element.
    *

package/Libraries/Utilities/Appearance.js

@@ -91,12 +91,4 @@ module.exports = {
   addChangeListener(listener: AppearanceListener): EventSubscription {
     return eventEmitter.addListener('change', listener);
   },
-
-  /**
-   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
-   */
-  removeChangeListener(listener: AppearanceListener): void {
-    // NOTE: This will report a deprecation notice via `console.error`.
-    eventEmitter.removeListener('change', listener);
-  },
 };

package/Libraries/Utilities/HMRClient.js

@@ -292,7 +292,7 @@ function registerBundleEntryPoints(client) {
 
 function flushEarlyLogs(client) {
   try {
-    pendingLogs.forEach(([level: LogLevel, data: Array<mixed>]) => {
+    pendingLogs.forEach(([level, data]) => {
       HMRClient.log(level, data);
     });
   } finally {

package/Microsoft.ReactNative/ReactRootView.cpp

@@ -13,6 +13,7 @@
 #include <winrt/Windows.UI.Core.h>
 #include "ReactNativeHost.h"
 #include "ReactViewInstance.h"
+#include "XamlUtils.h"
 
 #include <winrt/Microsoft.UI.Xaml.Controls.h>
 
@@ -269,7 +270,7 @@ void ReactRootView::EnsureLoadingUI() noexcept {
       m_greenBoxGrid.ColumnDefinitions().Append(c);
 
       m_waitingTextBlock.SetValue(xaml::Controls::Grid::ColumnProperty(), winrt::box_value(1));
-      m_greenBoxGrid.Background(xaml::Media::SolidColorBrush(winrt::ColorHelper::FromArgb(0x80, 0x03, 0x29, 0x29)));
+      m_greenBoxGrid.Background(xaml::Media::SolidColorBrush(xaml::FromArgb(0x80, 0x03, 0x29, 0x29)));
       m_greenBoxGrid.Children().Append(m_waitingTextBlock);
       m_greenBoxGrid.VerticalAlignment(xaml::VerticalAlignment::Center);
       Microsoft::UI::Xaml::Controls::ProgressRing ring{};

package/Microsoft.ReactNative/RedBox.cpp

@@ -27,6 +27,7 @@
 #include <winrt/Windows.Web.Http.h>
 #include "CppWinRTIncludes.h"
 #include "Utils/Helpers.h"
+#include "XamlUtils.h"
 #endif
 
 using namespace winrt::Windows::Foundation;
@@ -274,7 +275,7 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
             xaml::Documents::Run linkRun;
 
             linkRun.Text(Microsoft::Common::Unicode::Utf8ToUtf16(METRO_TROUBLESHOOTING_URL));
-            link.Foreground(xaml::Media::SolidColorBrush(winrt::ColorHelper::FromArgb(0xff, 0xff, 0xff, 0xff)));
+            link.Foreground(xaml::Media::SolidColorBrush(xaml::FromArgb(0xff, 0xff, 0xff, 0xff)));
             link.Inlines().Append(linkRun);
             xaml::Documents::Run normalRun;
             normalRun.Text(Microsoft::Common::Unicode::Utf8ToUtf16(json["type"].asString() + (" ─ See ")));

package/Microsoft.ReactNative/Utils/ValueUtils.cpp

@@ -9,6 +9,7 @@
 #include <Utils/ValueUtils.h>
 #include <winrt/Windows.UI.ViewManagement.h>
 #include "Unicode.h"
+#include "XamlUtils.h"
 
 #include <JSValue.h>
 #include <folly/dynamic.h>
@@ -157,7 +158,7 @@ xaml::Media::Brush BrushFromColorObject(const winrt::Microsoft::ReactNative::JSV
 }
 
 winrt::Color ColorFromNumber(DWORD argb) noexcept {
-  return winrt::ColorHelper::FromArgb(GetAFromArgb(argb), GetRFromArgb(argb), GetGFromArgb(argb), GetBFromArgb(argb));
+  return xaml::FromArgb(GetAFromArgb(argb), GetRFromArgb(argb), GetGFromArgb(argb), GetBFromArgb(argb));
 }
 
 REACTWINDOWS_API_(winrt::Color) ColorFrom(const folly::dynamic &d) {