@office-iss/react-native-win32 0.82.0-preview.3 → 0.83.0-preview.0

package/Libraries/Pressability/usePressability.js

@@ -8,15 +8,26 @@
  * @format
  */
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import Pressability, {
   type EventHandlers,
   type PressabilityConfig,
 } from './Pressability';
-import {useEffect, useRef} from 'react';
+import {useEffect, useInsertionEffect, useRef} from 'react';
 
 declare function usePressability(config: PressabilityConfig): EventHandlers;
 declare function usePressability(config: null | void): null | EventHandlers;
 
+// Experiments with using `useInsertionEffect` instead of `useEffect`, which
+// changes whether `Pressability` is configured or reset when inm a hidden
+// Activity. With `useInsertionEffect`, `Pressability` behaves more like a
+// platform control (e.g. Pointer Events), especially with respect to events
+// like focus and blur.
+const useConfigurationEffect =
+  ReactNativeFeatureFlags.configurePressabilityDuringInsertion()
+    ? useInsertionEffect
+    : useEffect;
+
 /**
  * Creates a persistent instance of `Pressability` that automatically configures
  * itself and resets. Accepts null `config` to support lazy initialization. Once
@@ -40,7 +51,7 @@ export default function usePressability(
 
   // On the initial mount, this is a no-op. On updates, `pressability` will be
   // re-configured to use the new configuration.
-  useEffect(() => {
+  useConfigurationEffect(() => {
     if (config != null && pressability != null) {
       pressability.configure(config);
     }
@@ -48,7 +59,7 @@ export default function usePressability(
 
   // On unmount, reset pending state and timers inside `pressability`. This is
   // a separate effect because we do not want to reset when `config` changes.
-  useEffect(() => {
+  useConfigurationEffect(() => {
     if (pressability != null) {
       return () => {
         pressability.reset();

package/Libraries/ReactNative/PaperUIManager.win32.js

@@ -101,22 +101,22 @@ const UIManagerJS: UIManagerJSInterface = {
 for (const propName of Object.getOwnPropertyNames(
   Object.getPrototypeOf(NativeUIManager),
 )) {
-  // $FlowFixMe
+  // $FlowFixMe[incompatible-type]
   UIManagerJS[propName] = NativeUIManager[propName];
 }
 // Windows]
 
-/* $FlowFixMe(>=0.123.0 site=react_native_fb) This comment suppresses an error
+/* $FlowFixMe[cannot-write] (>=0.123.0 site=react_native_fb) This comment suppresses an error
  * found when Flow v0.123.0 was deployed. To see the error, delete this comment
  * and run Flow. */
 //const UIManagerJS = {
 //  ...NativeUIManager,
-// $FlowFixMe
+// $FlowFixMe[cannot-write]
 UIManagerJS.getConstants = getConstants;
 //  },
-// $FlowFixMe
+// $FlowFixMe[cannot-write]
 UIManagerJS.getViewManagerConfig = getViewManagerConfig;
-// $FlowFixMe
+// $FlowFixMe[cannot-write]
 UIManagerJS.hasViewManagerConfig = (viewManagerName: string) =>
   getViewManagerConfig(viewManagerName) != null;
 
@@ -130,7 +130,7 @@ UIManagerJS.hasViewManagerConfig = (viewManagerName: string) =>
 //            getViewManagerConfig is implemented on the JSI object, so we don't
 //            need to hook this unless we are running in webdebugger
 if (!global.nativeCallSyncHook)
-  // $FlowFixMe
+  // $FlowFixMe[prop-missing]
   NativeUIManager.getViewManagerConfig = UIManagerJS.getViewManagerConfig;
 
 function lazifyViewManagerConfig(viewName: string) {
@@ -199,7 +199,7 @@ if (!global.nativeCallSyncHook) {
             `Accessing view manager configs directly off UIManager via UIManager['${viewManagerName}'] ` +
               `is no longer supported. Use UIManager.getViewManagerConfig('${viewManagerName}') instead.`,
           );
-          // $FlowFixMe
+          // $FlowFixMe[incompatible-return]
           return UIManagerJS.getViewManagerConfig(viewManagerName);
         },
       });

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -13,124 +13,62 @@
  * instances and get some data from them (like their instance handle / fiber).
  */
 
-import type ReactNativeDocumentT from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import typeof * as ReactNativeDocumentModuleT from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import type ReactNativeElementT from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
-import type ReadOnlyTextT from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
-import typeof * as RendererProxyT from '../../ReactNative/RendererProxy';
 import type {
   InternalInstanceHandle,
   Node,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
 import type {RootTag} from '../RootTag';
-import type ReactFabricHostComponentT from './ReactFabricHostComponent';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import ReactNativeDocument, {
+  createReactNativeDocument,
+} from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
+import ReactNativeElement from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
+import ReadOnlyText from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
+import * as RendererProxy from '../../ReactNative/RendererProxy';
 
 export opaque type PublicRootInstance = mixed;
 
-// Lazy loaded to avoid evaluating the module when using the legacy renderer.
-let ReactNativeDocumentModuleObject: ?ReactNativeDocumentModuleT;
-let ReactFabricHostComponentClass: Class<ReactFabricHostComponentT>;
-let ReactNativeElementClass: Class<ReactNativeElementT>;
-let ReadOnlyTextClass: Class<ReadOnlyTextT>;
-let RendererProxy: RendererProxyT;
-
-function getReactNativeDocumentModule(): ReactNativeDocumentModuleT {
-  if (ReactNativeDocumentModuleObject == null) {
-    // We initialize this lazily to avoid a require cycle.
-    ReactNativeDocumentModuleObject = require('../../../src/private/webapis/dom/nodes/ReactNativeDocument');
-  }
-
-  return ReactNativeDocumentModuleObject;
-}
-
-function getReactNativeElementClass(): Class<ReactNativeElementT> {
-  if (ReactNativeElementClass == null) {
-    ReactNativeElementClass =
-      require('../../../src/private/webapis/dom/nodes/ReactNativeElement').default;
-  }
-  return ReactNativeElementClass;
-}
-
-function getReactFabricHostComponentClass(): Class<ReactFabricHostComponentT> {
-  if (ReactFabricHostComponentClass == null) {
-    ReactFabricHostComponentClass =
-      require('./ReactFabricHostComponent').default;
-  }
-  return ReactFabricHostComponentClass;
-}
-
-function getReadOnlyTextClass(): Class<ReadOnlyTextT> {
-  if (ReadOnlyTextClass == null) {
-    ReadOnlyTextClass =
-      require('../../../src/private/webapis/dom/nodes/ReadOnlyText').default;
-  }
-  return ReadOnlyTextClass;
-}
-
 export function createPublicRootInstance(rootTag: RootTag): PublicRootInstance {
-  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
-    const ReactNativeDocumentModule = getReactNativeDocumentModule();
-
-    // $FlowExpectedError[incompatible-return]
-    return ReactNativeDocumentModule.createReactNativeDocument(rootTag);
-  }
-
   // $FlowExpectedError[incompatible-return]
-  return null;
+  return createReactNativeDocument(rootTag);
 }
 
 export function createPublicInstance(
   tag: number,
   viewConfig: ViewConfig,
   internalInstanceHandle: InternalInstanceHandle,
-  ownerDocument: ReactNativeDocumentT,
-): ReactFabricHostComponentT | ReactNativeElementT {
-  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
-    const ReactNativeElement = getReactNativeElementClass();
-    return new ReactNativeElement(
-      tag,
-      viewConfig,
-      internalInstanceHandle,
-      ownerDocument,
-    );
-  } else {
-    const ReactFabricHostComponent = getReactFabricHostComponentClass();
-    return new ReactFabricHostComponent(
-      tag,
-      viewConfig,
-      internalInstanceHandle,
-    );
-  }
+  ownerDocument: ReactNativeDocument,
+): ReactNativeElement {
+  return new ReactNativeElement(
+    tag,
+    viewConfig,
+    internalInstanceHandle,
+    ownerDocument,
+  );
 }
 
 export function createPublicTextInstance(
   internalInstanceHandle: InternalInstanceHandle,
-  ownerDocument: ReactNativeDocumentT,
-): ReadOnlyTextT {
-  const ReadOnlyText = getReadOnlyTextClass();
+  ownerDocument: ReactNativeDocument,
+): ReadOnlyText {
   return new ReadOnlyText(internalInstanceHandle, ownerDocument);
 }
 
 export function getNativeTagFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): number {
   return publicInstance.__nativeTag;
 }
 
 export function getNodeFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): ?Node {
   // Avoid loading ReactFabric if using an instance from the legacy renderer.
   if (publicInstance.__internalInstanceHandle == null) {
     return null;
   }
 
-  if (RendererProxy == null) {
-    RendererProxy = require('../../ReactNative/RendererProxy');
-  }
   return RendererProxy.getNodeFromInternalInstanceHandle(
     // $FlowExpectedError[incompatible-type] __internalInstanceHandle is always an InternalInstanceHandle from React when we get here.
     publicInstance.__internalInstanceHandle,
@@ -138,7 +76,7 @@ export function getNodeFromPublicInstance(
 }
 
 export function getInternalInstanceHandleFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): InternalInstanceHandle {
   // TODO(T174762768): Remove this once OSS versions of renderers will be synced.
   // $FlowExpectedError[prop-missing] Keeping this for backwards-compatibility with the renderers versions in open source.

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -17,6 +17,12 @@ const ReactNativeStyleAttributes =
 const resolveAssetSource = require('../Image/resolveAssetSource').default;
 const processBackgroundImage =
   require('../StyleSheet/processBackgroundImage').default;
+const processBackgroundPosition =
+  require('../StyleSheet/processBackgroundPosition').default;
+const processBackgroundRepeat =
+  require('../StyleSheet/processBackgroundRepeat').default;
+const processBackgroundSize =
+  require('../StyleSheet/processBackgroundSize').default;
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray').default;
 const processFilter = require('../StyleSheet/processFilter').default;
@@ -203,6 +209,12 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
       return processFilter;
     case 'BackgroundImage':
       return processBackgroundImage;
+    case 'BackgroundPosition':
+      return processBackgroundPosition;
+    case 'BackgroundRepeat':
+      return processBackgroundRepeat;
+    case 'BackgroundSize':
+      return processBackgroundSize;
     case 'ImageSource':
       return resolveAssetSource;
     case 'BoxShadow':