@office-iss/react-native-win32 0.68.0-preview.2 → 0.69.0-preview.1

package/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -9,12 +9,9 @@
  */
 
 import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
-// $FlowFixMe[nonstrict-import]
-import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
-// $FlowFixMe[nonstrict-import]
-import {createViewConfig} from './ViewConfig';
+import {isIgnored} from './ViewConfigIgnore';
 
-type Difference =
+export type Difference =
   | {
       type: 'missing',
       path: Array<string>,
@@ -32,7 +29,7 @@ type Difference =
       staticValue: mixed,
     };
 
-type ValidationResult = ValidResult | InvalidResult;
+export type ValidationResult = ValidResult | InvalidResult;
 type ValidResult = {
   type: 'valid',
 };
@@ -41,41 +38,6 @@ type InvalidResult = {
   differences: Array<Difference>,
 };
 
-type ViewConfigValidationResult = {
-  componentName: string,
-  nativeViewConfig?: ?ViewConfig,
-  staticViewConfig?: ?ViewConfig,
-  validationResult?: ?ValidationResult,
-};
-
-// e.g. require('MyNativeComponent') where MyNativeComponent.js exports a HostComponent
-type JSModule = $FlowFixMe;
-
-export function validateStaticViewConfigs(
-  nativeComponent: JSModule,
-): ViewConfigValidationResult {
-  const nativeViewConfig = getNativeComponentAttributes(
-    nativeComponent.default || nativeComponent,
-  );
-
-  const generatedPartialViewConfig = nativeComponent.__INTERNAL_VIEW_CONFIG;
-  const staticViewConfig: ?ViewConfig =
-    generatedPartialViewConfig && createViewConfig(generatedPartialViewConfig);
-
-  const componentName: string = nativeComponent.default || nativeComponent;
-  const validationResult: ?ValidationResult =
-    nativeViewConfig &&
-    staticViewConfig &&
-    validate(componentName, nativeViewConfig, staticViewConfig);
-
-  return {
-    componentName,
-    nativeViewConfig,
-    staticViewConfig,
-    validationResult,
-  };
-}
-
 /**
  * During the migration from native view configs to static view configs, this is
  * used to validate that the two are equivalent.
@@ -183,7 +145,10 @@ function accumulateDifferences(
   }
 
   for (const staticKey in staticObject) {
-    if (!nativeObject.hasOwnProperty(staticKey)) {
+    if (
+      !nativeObject.hasOwnProperty(staticKey) &&
+      !isIgnored(staticObject[staticKey])
+    ) {
       differences.push({
         path: [...path, staticKey],
         type: 'unexpected',

package/Libraries/NativeComponent/ViewConfig.js

@@ -8,11 +8,11 @@
  * @format
  */
 
-import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
 import type {
   PartialViewConfig,
   ViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
+import PlatformBaseViewConfig from './PlatformBaseViewConfig';
 
 /**
  * Creates a complete `ViewConfig` from a `PartialViewConfig`.
@@ -24,16 +24,16 @@ export function createViewConfig(
     uiViewClassName: partialViewConfig.uiViewClassName,
     Commands: {},
     bubblingEventTypes: composeIndexers(
-      ReactNativeViewViewConfig.bubblingEventTypes,
+      PlatformBaseViewConfig.bubblingEventTypes,
       partialViewConfig.bubblingEventTypes,
     ),
     directEventTypes: composeIndexers(
-      ReactNativeViewViewConfig.directEventTypes,
+      PlatformBaseViewConfig.directEventTypes,
       partialViewConfig.directEventTypes,
     ),
     validAttributes: composeIndexers(
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
-      ReactNativeViewViewConfig.validAttributes,
+      PlatformBaseViewConfig.validAttributes,
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
       partialViewConfig.validAttributes,
     ),

package/Libraries/NativeComponent/ViewConfigIgnore.js

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+import Platform from '../Utilities/Platform';
+
+const ignoredViewConfigProps = new WeakSet<{...}>();
+
+/**
+ * Decorates ViewConfig values that are dynamically injected by the library,
+ * react-native-gesture-handler. (T45765076)
+ */
+export function DynamicallyInjectedByGestureHandler<T: {...}>(object: T): T {
+  ignoredViewConfigProps.add(object);
+  return object;
+}
+
+/**
+ * On iOS, ViewManager event declarations generate {eventName}: true entries
+ * in ViewConfig valueAttributes. These entries aren't generated for Android.
+ * This annotation allows Static ViewConfigs to insert these entries into
+ * iOS but not Android.
+ *
+ * In the future, we want to remove this platform-inconsistency. We want
+ * to set RN$ViewConfigEventValidAttributesDisabled = true server-side,
+ * so that iOS does not generate validAttributes from event props in iOS RCTViewManager,
+ * since Android does not generate validAttributes from events props in Android ViewManager.
+ *
+ * TODO(T110872225): Remove this logic, after achieving platform-consistency
+ */
+export function ConditionallyIgnoredEventHandlers<T: {[name: string]: true}>(
+  value: T,
+): T | void {
+  if (
+    Platform.OS === 'ios' &&
+    !(global.RN$ViewConfigEventValidAttributesDisabled === true)
+  ) {
+    return value;
+  }
+  return undefined;
+}
+
+export function isIgnored(value: mixed): boolean {
+  if (typeof value === 'object' && value != null) {
+    return ignoredViewConfigProps.has(value);
+  }
+  return false;
+}

package/Libraries/Network/FormData.js

@@ -64,6 +64,12 @@ class FormData {
     this._parts.push([key, value]);
   }
 
+  getAll(key: string): Array<FormDataValue> {
+    return this._parts
+      .filter(([name]) => name === key)
+      .map(([, value]) => value);
+  }
+
   getParts(): Array<FormDataPart> {
     return this._parts.map(([name, value]) => {
       const contentDisposition = 'form-data; name="' + name + '"';
@@ -74,7 +80,7 @@ class FormData {
       // an object with a `uri` attribute. Optionally, it can also
       // have a `name` and `type` attribute to specify filename and
       // content type (cf. web Blob interface.)
-      if (typeof value === 'object' && value) {
+      if (typeof value === 'object' && !Array.isArray(value) && value) {
         if (typeof value.name === 'string') {
           headers['content-disposition'] += '; filename="' + value.name + '"';
         }

package/Libraries/Network/RCTNetworking.win32.js

@@ -60,7 +60,7 @@ class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
   ) {
     const body = convertRequestBody(data);
     if (body && body.formData) {
-      body.formData = body.formData.map((part) => ({
+      body.formData = body.formData.map(part => ({
         ...part,
         headers: convertHeadersMapToArray(part.headers),
       }));

package/Libraries/Pressability/Pressability.js

@@ -24,6 +24,8 @@ import Platform from '../Utilities/Platform';
 import UIManager from '../ReactNative/UIManager';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import * as React from 'react';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import {type PointerEvent} from '../Types/CoreEventTypes';
 
 export type PressabilityConfig = $ReadOnly<{|
   /**
@@ -158,6 +160,8 @@ export type EventHandlers = $ReadOnly<{|
   onFocus: (event: FocusEvent) => void,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
+  onPointerEnter2?: (event: PointerEvent) => void,
+  onPointerLeave2?: (event: PointerEvent) => void,
   onResponderGrant: (event: PressEvent) => void,
   onResponderMove: (event: PressEvent) => void,
   onResponderRelease: (event: PressEvent) => void,
@@ -549,58 +553,108 @@ export default class Pressability {
         () => this._config;
     }
 
-    const mouseEventHandlers =
-      Platform.OS === 'ios' || Platform.OS === 'android'
-        ? null
-        : {
-            onMouseEnter: (event: MouseEvent): void => {
-              if (isHoverEnabled()) {
-                this._isHovered = true;
-                this._cancelHoverOutDelayTimeout();
-                const {onHoverIn} = this._config;
-                if (onHoverIn != null) {
-                  const delayHoverIn = normalizeDelay(
-                    this._config.delayHoverIn,
-                  );
-                  if (delayHoverIn > 0) {
-                    event.persist();
-                    this._hoverInDelayTimeout = setTimeout(() => {
+    if (
+      ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
+    ) {
+      const hoverPointerEvents = {
+        onPointerEnter2: undefined,
+        onPointerLeave2: undefined,
+      };
+      const {onHoverIn, onHoverOut} = this._config;
+      if (onHoverIn != null) {
+        hoverPointerEvents.onPointerEnter2 = (event: PointerEvent) => {
+          this._isHovered = true;
+          this._cancelHoverOutDelayTimeout();
+          if (onHoverIn != null) {
+            const delayHoverIn = normalizeDelay(this._config.delayHoverIn);
+            if (delayHoverIn > 0) {
+              event.persist();
+              this._hoverInDelayTimeout = setTimeout(() => {
+                onHoverIn(convertPointerEventToMouseEvent(event));
+              }, delayHoverIn);
+            } else {
+              onHoverIn(convertPointerEventToMouseEvent(event));
+            }
+          }
+        };
+      }
+      if (onHoverOut != null) {
+        hoverPointerEvents.onPointerLeave2 = (event: PointerEvent) => {
+          if (this._isHovered) {
+            this._isHovered = false;
+            this._cancelHoverInDelayTimeout();
+            if (onHoverOut != null) {
+              const delayHoverOut = normalizeDelay(this._config.delayHoverOut);
+              if (delayHoverOut > 0) {
+                event.persist();
+                this._hoverOutDelayTimeout = setTimeout(() => {
+                  onHoverOut(convertPointerEventToMouseEvent(event));
+                }, delayHoverOut);
+              } else {
+                onHoverOut(convertPointerEventToMouseEvent(event));
+              }
+            }
+          }
+        };
+      }
+      return {
+        ...focusEventHandlers,
+        ...responderEventHandlers,
+        ...hoverPointerEvents,
+      };
+    } else {
+      const mouseEventHandlers =
+        Platform.OS === 'ios' || Platform.OS === 'android'
+          ? null
+          : {
+              onMouseEnter: (event: MouseEvent): void => {
+                if (isHoverEnabled()) {
+                  this._isHovered = true;
+                  this._cancelHoverOutDelayTimeout();
+                  const {onHoverIn} = this._config;
+                  if (onHoverIn != null) {
+                    const delayHoverIn = normalizeDelay(
+                      this._config.delayHoverIn,
+                    );
+                    if (delayHoverIn > 0) {
+                      event.persist();
+                      this._hoverInDelayTimeout = setTimeout(() => {
+                        onHoverIn(event);
+                      }, delayHoverIn);
+                    } else {
                       onHoverIn(event);
-                    }, delayHoverIn);
-                  } else {
-                    onHoverIn(event);
+                    }
                   }
                 }
-              }
-            },
-
-            onMouseLeave: (event: MouseEvent): void => {
-              if (this._isHovered) {
-                this._isHovered = false;
-                this._cancelHoverInDelayTimeout();
-                const {onHoverOut} = this._config;
-                if (onHoverOut != null) {
-                  const delayHoverOut = normalizeDelay(
-                    this._config.delayHoverOut,
-                  );
-                  if (delayHoverOut > 0) {
-                    event.persist();
-                    this._hoverInDelayTimeout = setTimeout(() => {
+              },
+
+              onMouseLeave: (event: MouseEvent): void => {
+                if (this._isHovered) {
+                  this._isHovered = false;
+                  this._cancelHoverInDelayTimeout();
+                  const {onHoverOut} = this._config;
+                  if (onHoverOut != null) {
+                    const delayHoverOut = normalizeDelay(
+                      this._config.delayHoverOut,
+                    );
+                    if (delayHoverOut > 0) {
+                      event.persist();
+                      this._hoverInDelayTimeout = setTimeout(() => {
+                        onHoverOut(event);
+                      }, delayHoverOut);
+                    } else {
                       onHoverOut(event);
-                    }, delayHoverOut);
-                  } else {
-                    onHoverOut(event);
+                    }
                   }
                 }
-              }
-            },
-          };
-
-    return {
-      ...focusEventHandlers,
-      ...responderEventHandlers,
-      ...mouseEventHandlers,
-    };
+              },
+            };
+      return {
+        ...focusEventHandlers,
+        ...responderEventHandlers,
+        ...mouseEventHandlers,
+      };
+    }
   }
 
   /**
@@ -879,3 +933,18 @@ const getTouchFromPressEvent = (event: PressEvent) => {
   }
   return event.nativeEvent;
 };
+
+function convertPointerEventToMouseEvent(input: PointerEvent): MouseEvent {
+  const {touchHistory: _, ...synthEvent} = input;
+  const {clientX, clientY, timestamp} = input.nativeEvent;
+  return {
+    ...synthEvent,
+    nativeEvent: {
+      clientX,
+      clientY,
+      pageX: clientX,
+      pageY: clientY,
+      timestamp,
+    },
+  };
+}

package/Libraries/Pressability/Pressability.win32.js

@@ -25,6 +25,8 @@ import Platform from '../Utilities/Platform';
 import {isHoverEnabled} from './HoverState';
 import PressabilityPerformanceEventEmitter from './PressabilityPerformanceEventEmitter.js';
 import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import {type PointerEvent} from '../Types/CoreEventTypes';
 
 export type PressabilityConfig = $ReadOnly<{|
   /**
@@ -185,6 +187,8 @@ export type EventHandlers = $ReadOnly<{|
   onFocus: (event: FocusEvent) => void,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
+  onPointerEnter2?: (event: PointerEvent) => void,
+  onPointerLeave2?: (event: PointerEvent) => void,
   onResponderGrant: (event: PressEvent) => void,
   onResponderMove: (event: PressEvent) => void,
   onResponderRelease: (event: PressEvent) => void,
@@ -282,20 +286,20 @@ const Transitions = Object.freeze({
   },
 });
 
-const isActiveSignal = (signal) =>
+const isActiveSignal = signal =>
   signal === 'RESPONDER_ACTIVE_PRESS_IN' ||
   signal === 'RESPONDER_ACTIVE_LONG_PRESS_IN';
 
-const isActivationSignal = (signal) =>
+const isActivationSignal = signal =>
   signal === 'RESPONDER_ACTIVE_PRESS_OUT' ||
   signal === 'RESPONDER_ACTIVE_PRESS_IN';
 
-const isPressInSignal = (signal) =>
+const isPressInSignal = signal =>
   signal === 'RESPONDER_INACTIVE_PRESS_IN' ||
   signal === 'RESPONDER_ACTIVE_PRESS_IN' ||
   signal === 'RESPONDER_ACTIVE_LONG_PRESS_IN';
 
-const isTerminalSignal = (signal) =>
+const isTerminalSignal = signal =>
   signal === 'RESPONDER_TERMINATED' || signal === 'RESPONDER_RELEASE';
 
 const DEFAULT_LONG_PRESS_DELAY_MS = 500;
@@ -580,65 +584,6 @@ export default class Pressability {
         () => this._config;
     }
 
-    const mouseEventHandlers =
-      Platform.OS === 'ios' || Platform.OS === 'android'
-        ? null
-        : {
-            onMouseEnter: (event: MouseEvent): void => {
-              // [Windows Add attached raw mouse event handler for compat
-              if (this._config.onMouseEnter) {
-                this._config.onMouseEnter(event);
-              }
-              // Windows]
-
-              if (isHoverEnabled()) {
-                this._isHovered = true;
-                this._cancelHoverOutDelayTimeout();
-                const {onHoverIn} = this._config;
-                if (onHoverIn != null) {
-                  const delayHoverIn = normalizeDelay(
-                    this._config.delayHoverIn,
-                  );
-                  if (delayHoverIn > 0) {
-                    event.persist();
-                    this._hoverInDelayTimeout = setTimeout(() => {
-                      onHoverIn(event);
-                    }, delayHoverIn);
-                  } else {
-                    onHoverIn(event);
-                  }
-                }
-              }
-            },
-
-            onMouseLeave: (event: MouseEvent): void => {
-              // [Windows Add attached raw mouse event handler for compat
-              if (this._config.onMouseLeave) {
-                this._config.onMouseLeave(event);
-              }
-              // Windows]
-
-              if (this._isHovered) {
-                this._isHovered = false;
-                this._cancelHoverInDelayTimeout();
-                const {onHoverOut} = this._config;
-                if (onHoverOut != null) {
-                  const delayHoverOut = normalizeDelay(
-                    this._config.delayHoverOut,
-                  );
-                  if (delayHoverOut > 0) {
-                    event.persist();
-                    this._hoverInDelayTimeout = setTimeout(() => {
-                      onHoverOut(event);
-                    }, delayHoverOut);
-                  } else {
-                    onHoverOut(event);
-                  }
-                }
-              }
-            },
-          };
-
     // [Windows
     const keyboardEventHandlers = {
       onKeyUp: (event: KeyEvent): void => {
@@ -676,12 +621,123 @@ export default class Pressability {
     };
     // Windows]
 
-    return {
-      ...focusEventHandlers,
-      ...responderEventHandlers,
-      ...mouseEventHandlers,
-      ...keyboardEventHandlers, // [Windows]
-    };
+    if (
+      ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
+    ) {
+      const hoverPointerEvents = {
+        onPointerEnter2: undefined,
+        onPointerLeave2: undefined,
+      };
+      const {onHoverIn, onHoverOut} = this._config;
+      if (onHoverIn != null) {
+        hoverPointerEvents.onPointerEnter2 = (event: PointerEvent) => {
+          this._isHovered = true;
+          this._cancelHoverOutDelayTimeout();
+          if (onHoverIn != null) {
+            const delayHoverIn = normalizeDelay(this._config.delayHoverIn);
+            if (delayHoverIn > 0) {
+              event.persist();
+              this._hoverInDelayTimeout = setTimeout(() => {
+                onHoverIn(convertPointerEventToMouseEvent(event));
+              }, delayHoverIn);
+            } else {
+              onHoverIn(convertPointerEventToMouseEvent(event));
+            }
+          }
+        };
+      }
+      if (onHoverOut != null) {
+        hoverPointerEvents.onPointerLeave2 = (event: PointerEvent) => {
+          if (this._isHovered) {
+            this._isHovered = false;
+            this._cancelHoverInDelayTimeout();
+            if (onHoverOut != null) {
+              const delayHoverOut = normalizeDelay(this._config.delayHoverOut);
+              if (delayHoverOut > 0) {
+                event.persist();
+                this._hoverOutDelayTimeout = setTimeout(() => {
+                  onHoverOut(convertPointerEventToMouseEvent(event));
+                }, delayHoverOut);
+              } else {
+                onHoverOut(convertPointerEventToMouseEvent(event));
+              }
+            }
+          }
+        };
+      }
+      return {
+        ...focusEventHandlers,
+        ...responderEventHandlers,
+        ...hoverPointerEvents,
+        ...keyboardEventHandlers, // [Windows]
+      };
+    } else {
+      const mouseEventHandlers =
+        Platform.OS === 'ios' || Platform.OS === 'android'
+          ? null
+          : {
+              onMouseEnter: (event: MouseEvent): void => {
+                // [Windows Add attached raw mouse event handler for compat
+                if (this._config.onMouseEnter) {
+                  this._config.onMouseEnter(event);
+                }
+                // Windows]
+
+                if (isHoverEnabled()) {
+                  this._isHovered = true;
+                  this._cancelHoverOutDelayTimeout();
+                  const {onHoverIn} = this._config;
+                  if (onHoverIn != null) {
+                    const delayHoverIn = normalizeDelay(
+                      this._config.delayHoverIn,
+                    );
+                    if (delayHoverIn > 0) {
+                      event.persist();
+                      this._hoverInDelayTimeout = setTimeout(() => {
+                        onHoverIn(event);
+                      }, delayHoverIn);
+                    } else {
+                      onHoverIn(event);
+                    }
+                  }
+                }
+              },
+
+              onMouseLeave: (event: MouseEvent): void => {
+                // [Windows Add attached raw mouse event handler for compat
+                if (this._config.onMouseLeave) {
+                  this._config.onMouseLeave(event);
+                }
+                // Windows]
+
+                if (this._isHovered) {
+                  this._isHovered = false;
+                  this._cancelHoverInDelayTimeout();
+                  const {onHoverOut} = this._config;
+                  if (onHoverOut != null) {
+                    const delayHoverOut = normalizeDelay(
+                      this._config.delayHoverOut,
+                    );
+                    if (delayHoverOut > 0) {
+                      event.persist();
+                      this._hoverInDelayTimeout = setTimeout(() => {
+                        onHoverOut(event);
+                      }, delayHoverOut);
+                    } else {
+                      onHoverOut(event);
+                    }
+                  }
+                }
+              },
+            };
+
+      return {
+        ...focusEventHandlers,
+        ...responderEventHandlers,
+        ...mouseEventHandlers,
+        ...keyboardEventHandlers, // [Windows]
+      };
+    }
   }
 
   /**
@@ -960,3 +1016,52 @@ const getTouchFromPressEvent = (event: PressEvent) => {
   }
   return event.nativeEvent;
 };
+
+function convertPointerEventToMouseEvent(input: PointerEvent): MouseEvent {
+  const {touchHistory: _, ...synthEvent} = input;
+  const {clientX, clientY, timestamp} = input.nativeEvent;
+  // [Windows
+  const {
+    pointerType,
+    pressure,
+    isLeftButton,
+    isRightButton,
+    isMiddleButton,
+    isBarrelButtonPressed,
+    isHorizontalScrollWheel,
+    isEraser,
+    shiftKey,
+    ctrlKey,
+    altKey,
+  } = input.nativeEvent;
+  // Windows]
+  return {
+    ...synthEvent,
+    nativeEvent: {
+      clientX,
+      clientY,
+      pageX: clientX,
+      pageY: clientY,
+      timestamp,
+      // [Windows
+      target:
+        input.nativeEvent.target ??
+        (typeof input.target === 'number' ? input.target : -1),
+      identifier: input.nativeEvent.pointerId,
+      locationX: clientX,
+      locationY: clientY,
+      pointerType,
+      force: pressure,
+      isLeftButton,
+      isRightButton,
+      isMiddleButton,
+      isBarrelButtonPressed,
+      isHorizontalScrollWheel,
+      isEraser,
+      shiftKey,
+      ctrlKey,
+      altKey,
+      // Windows]
+    },
+  };
+}