@office-iss/react-native-win32 0.81.2 → 0.82.0-preview.2

package/src/private/animated/createAnimatedPropsMemoHook.js

@@ -16,9 +16,8 @@ import {AnimatedEvent} from '../../../Libraries/Animated/AnimatedEvent';
 import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
 import {isPlainObject} from '../../../Libraries/Animated/nodes/AnimatedObject';
 import flattenStyle from '../../../Libraries/StyleSheet/flattenStyle';
-import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
 import nullthrows from 'nullthrows';
-import {useInsertionEffect, useMemo, useRef, useState} from 'react';
+import {useInsertionEffect, useMemo, useRef} from 'react';
 
 type CompositeKey = {
   style?: {[string]: CompositeKeyComponent},
@@ -64,19 +63,6 @@ export function createAnimatedPropsMemoHook(
   return function useAnimatedPropsMemo(
     create: () => AnimatedProps,
     props: $ReadOnly<{[string]: mixed}>,
-  ): AnimatedProps {
-    // NOTE: This feature flag must be evaluated inside the hook because this
-    // module factory can be evaluated much sooner, before overrides are set.
-    const useAnimatedPropsImpl =
-      ReactNativeFeatureFlags.avoidStateUpdateInAnimatedPropsMemo()
-        ? useAnimatedPropsMemo_ref
-        : useAnimatedPropsMemo_state;
-    return useAnimatedPropsImpl(create, props);
-  };
-
-  function useAnimatedPropsMemo_ref(
-    create: () => AnimatedProps,
-    props: $ReadOnly<{[string]: mixed}>,
   ): AnimatedProps {
     const compositeKey = useMemo(
       () => createCompositeKeyForProps(props, allowlist),
@@ -102,39 +88,7 @@ export function createAnimatedPropsMemoHook(
     }, [next]);
 
     return next.node;
-  }
-
-  function useAnimatedPropsMemo_state(
-    create: () => AnimatedProps,
-    props: $ReadOnly<{[string]: mixed}>,
-  ): AnimatedProps {
-    const compositeKey = useMemo(
-      () => createCompositeKeyForProps(props, allowlist),
-      [props],
-    );
-
-    const [state, setState] = useState<{
-      allowlist: ?AnimatedPropsAllowlist,
-      compositeKey: $ReadOnlyCompositeKey | null,
-      value: AnimatedProps,
-    }>(() => ({
-      allowlist,
-      compositeKey,
-      value: create(),
-    }));
-
-    if (
-      state.allowlist !== allowlist ||
-      !areCompositeKeysEqual(state.compositeKey, compositeKey)
-    ) {
-      setState({
-        allowlist,
-        compositeKey,
-        value: create(),
-      });
-    }
-    return state.value;
-  }
+  };
 }
 
 /**
@@ -310,9 +264,9 @@ export function areCompositeKeysEqual(
       // We know style components are objects with non-mixed values.
       if (
         !areCompositeKeyComponentsEqual(
-          // $FlowIgnore[incompatible-cast]
+          // $FlowFixMe[incompatible-type]
           prevComponent as $ReadOnlyCompositeKeyComponent,
-          // $FlowIgnore[incompatible-cast]
+          // $FlowFixMe[incompatible-type]
           nextComponent as $ReadOnlyCompositeKeyComponent,
         )
       ) {
@@ -335,9 +289,9 @@ export function areCompositeKeysEqual(
       } else {
         if (
           !areCompositeKeyComponentsEqual(
-            // $FlowIgnore[incompatible-cast]
+            // $FlowFixMe[incompatible-type]
             prevComponent as $ReadOnlyCompositeKeyComponent,
-            // $FlowIgnore[incompatible-cast]
+            // $FlowFixMe[incompatible-type]
             nextComponent as $ReadOnlyCompositeKeyComponent,
           )
         ) {
@@ -399,8 +353,8 @@ function areCompositeKeyComponentsEqual(
 
 // Supported versions of JSC do not implement the newer Object.hasOwn. Remove
 // this shim when they do.
-// $FlowIgnore[method-unbinding]
+// $FlowFixMe[method-unbinding]
 const _hasOwnProp = Object.prototype.hasOwnProperty;
 const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/src/private/components/virtualview/VirtualView.js

@@ -10,14 +10,17 @@
 
 import type {ViewStyleProp} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {NativeSyntheticEvent} from '../../../../Libraries/Types/CoreEventTypes';
-import type ReadOnlyElement from '../../webapis/dom/nodes/ReadOnlyElement';
+import type {HostInstance} from '../../types/HostInstance';
 import type {NativeModeChangeEvent} from './VirtualViewNativeComponent';
 
 import StyleSheet from '../../../../Libraries/StyleSheet/StyleSheet';
+import * as ReactNativeFeatureFlags from '../../featureflags/ReactNativeFeatureFlags';
+import VirtualViewExperimentalNativeComponent from './VirtualViewExperimentalNativeComponent';
 import VirtualViewNativeComponent from './VirtualViewNativeComponent';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {startTransition, useState} from 'react';
+// $FlowFixMe[missing-export]
+import {startTransition, unstable_Activity as Activity, useState} from 'react';
 
 // @see VirtualViewNativeComponent
 export enum VirtualViewMode {
@@ -43,7 +46,7 @@ export type Rect = $ReadOnly<{
 export type ModeChangeEvent = $ReadOnly<{
   ...Omit<NativeModeChangeEvent, 'mode'>,
   mode: VirtualViewMode,
-  target: ReadOnlyElement,
+  target: HostInstance,
 }>;
 
 type VirtualViewComponent = component(
@@ -52,6 +55,7 @@ type VirtualViewComponent = component(
   ref?: ?React.RefSetter<React.ElementRef<typeof VirtualViewNativeComponent>>,
   style?: ?ViewStyleProp,
   onModeChange?: (event: ModeChangeEvent) => void,
+  removeClippedSubviews?: boolean,
 );
 
 type HiddenHeight = number;
@@ -59,15 +63,23 @@ const NotHidden = null;
 
 type State = HiddenHeight | typeof NotHidden;
 
-function createVirtualView(initialState: State): VirtualViewComponent {
+function createVirtualView(
+  initialState: State,
+  experimental: boolean,
+): VirtualViewComponent {
   const initialHidden = initialState !== NotHidden;
 
+  const NativeComponent = experimental
+    ? VirtualViewExperimentalNativeComponent
+    : VirtualViewNativeComponent;
+
   component VirtualView(
     children?: React.Node,
     nativeID?: string,
     ref?: ?React.RefSetter<React.ElementRef<typeof VirtualViewNativeComponent>>,
     style?: ?ViewStyleProp,
     onModeChange?: (event: ModeChangeEvent) => void,
+    removeClippedSubviews?: boolean,
   ) {
     const [state, setState] = useState<State>(initialState);
     if (__DEV__) {
@@ -84,8 +96,8 @@ function createVirtualView(initialState: State): VirtualViewComponent {
           ? null
           : onModeChange.bind(null, {
               mode,
-              // $FlowIgnore[incompatible-cast]
-              target: event.currentTarget as ReadOnlyElement,
+              // $FlowFixMe[incompatible-type] - we know this is a HostInstance
+              target: event.currentTarget as HostInstance,
               targetRect: event.nativeEvent.targetRect,
               thresholdRect: event.nativeEvent.thresholdRect,
             });
@@ -112,10 +124,11 @@ function createVirtualView(initialState: State): VirtualViewComponent {
     };
 
     return (
-      <VirtualViewNativeComponent
+      <NativeComponent
         initialHidden={initialHidden}
         nativeID={nativeID}
         ref={ref}
+        removeClippedSubviews={removeClippedSubviews}
         renderState={
           (isHidden
             ? VirtualViewRenderState.None
@@ -129,17 +142,35 @@ function createVirtualView(initialState: State): VirtualViewComponent {
             : style
         }
         onModeChange={handleModeChange}>
-        {isHidden ? null : children}
-      </VirtualViewNativeComponent>
+        {
+          match (ReactNativeFeatureFlags.virtualViewActivityBehavior()) {
+            'activity-without-mode' =>
+              <Activity>{isHidden ? null : children}</Activity>,
+            'activity-with-hidden-mode' =>
+              <Activity mode={isHidden ? 'hidden' : 'visible'}>
+                {children}
+              </Activity>,
+            'no-activity' | _ => isHidden ? null : children,
+          }
+        }
+      </NativeComponent>
     );
   }
   return VirtualView;
 }
 
-export default createVirtualView(NotHidden) as VirtualViewComponent;
+export default createVirtualView(NotHidden, false) as VirtualViewComponent;
 
-export function createHiddenVirtualView(height: number): VirtualViewComponent {
-  return createVirtualView(height as HiddenHeight);
+export const VirtualViewExperimental = createVirtualView(
+  NotHidden,
+  true,
+) as VirtualViewComponent;
+
+export function createHiddenVirtualView(
+  height: number,
+  experimental: boolean,
+): VirtualViewComponent {
+  return createVirtualView(height as HiddenHeight, experimental);
 }
 
 export const _logs: {states?: Array<State>} = {};

package/src/private/components/virtualview/VirtualViewExperimentalNativeComponent.js

@@ -0,0 +1,93 @@
+/**
+ * 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-local
+ * @format
+ */
+
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+} from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';
+
+import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
+
+export type NativeModeChangeEvent = $ReadOnly<{
+  /**
+   * Virtualization mode of the target view.
+   *
+   * - `0`: Target view is visible.
+   * - `1`: Target view is hidden, but can be prerendered.
+   * - `2`: Target view is hidden.
+   *
+   * WORKAROUND: As of this writing, codegen doesn't support enums, so we need
+   * to convert `number` into an enum in `VirtualView`.
+   */
+  mode: Int32,
+
+  /**
+   * Rect of the target view, relative to the nearest ancestor scroll container.
+   */
+  targetRect: $ReadOnly<{
+    x: Double,
+    y: Double,
+    width: Double,
+    height: Double,
+  }>,
+
+  /**
+   * Rect of the threshold that determines the mode of the target view, relative
+   * to the nearest ancestor scroll container.
+   *
+   * - `Visible`: Rect in which the target view is visible.
+   * - `Prerender`: Rect in which the target view is prerendered.
+   * - `Hidden`: Unused, without any guarantees.
+   *
+   * This can be used to determine whether and how much new content to render.
+   */
+  thresholdRect: $ReadOnly<{
+    x: Double,
+    y: Double,
+    width: Double,
+    height: Double,
+  }>,
+}>;
+
+type VirtualViewExperimentalNativeProps = $ReadOnly<{
+  ...ViewProps,
+
+  /**
+   * Whether the initial mode should be `Hidden`.
+   */
+  initialHidden?: boolean,
+
+  /**
+   * Render state of children.
+   *
+   * - `0`: Reserved to represent unknown future values.
+   * - `1`: Children are rendered.
+   * - `2`: Children are not rendered.
+   *
+   * WORKAROUND: As of this writing, codegen doesn't support enums, so we need
+   * to convert `number` into an enum in `VirtualView`.
+   */
+  renderState: Int32,
+
+  /**
+   * See `NativeModeChangeEvent`.
+   */
+  onModeChange?: ?DirectEventHandler<NativeModeChangeEvent>,
+}>;
+
+export default codegenNativeComponent<VirtualViewExperimentalNativeProps>(
+  'VirtualViewExperimental',
+  {
+    interfaceOnly: true,
+  },
+) as HostComponent<VirtualViewExperimentalNativeProps>;

package/src/private/components/virtualview/VirtualViewNativeComponent.js

@@ -67,6 +67,12 @@ type VirtualViewNativeProps = $ReadOnly<{
    */
   initialHidden?: boolean,
 
+  /**
+   * This was needed to get VirtualViewManagerDelegate to set this property.
+   * TODO: Investigate why spread ViewProps doesn't call setter
+   */
+  removeClippedSubviews?: boolean,
+
   /**
    * Render state of children.
    *

package/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -82,7 +82,7 @@ function Inspector({
     const {measure, props} = hierarchyItem.getInspectorData(findNodeHandle);
 
     measure((x, y, width, height, left, top) => {
-      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      // $FlowFixMe[incompatible-type] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
       setInspectedElement({
         frame: {left, top, width, height},
         style: props.style,
@@ -119,7 +119,7 @@ function Inspector({
       );
       setSelectionIndex(selectedIndex);
       setElementsHierarchy(hierarchy);
-      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      // $FlowFixMe[incompatible-type] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
       setInspectedElement({
         frame,
         style: props.style,

package/src/private/devsupport/devmenu/elementinspector/ReactDevToolsOverlay.js

@@ -15,8 +15,8 @@ import type {ReactDevToolsAgent} from '../../../../../Libraries/Types/ReactDevTo
 import type {InspectedElement} from './Inspector';
 
 import View from '../../../../../Libraries/Components/View/View';
-import ReactNativeFeatureFlags from '../../../../../Libraries/ReactNative/ReactNativeFeatureFlags';
 import StyleSheet from '../../../../../Libraries/StyleSheet/StyleSheet';
+import * as ReactNativeFeatureFlags from '../../../../../src/private/featureflags/ReactNativeFeatureFlags';
 import ElementBox from './ElementBox';
 import * as React from 'react';
 
@@ -129,7 +129,7 @@ export default function ReactDevToolsOverlay({
   if (isInspecting) {
     const events =
       // Pointer events only work on fabric
-      ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()
+      ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
         ? {
             onPointerMove,
             onPointerDown: onPointerMove,