@office-iss/react-native-win32 0.84.0 → 0.85.0-preview.1

package/src/private/animated/createAnimatedPropsMemoHook.js

@@ -24,32 +24,32 @@ type CompositeKey = {
   [string]:
     | CompositeKeyComponent
     | AnimatedEvent
-    | $ReadOnlyArray<unknown>
-    | $ReadOnly<{[string]: unknown}>,
+    | ReadonlyArray<unknown>
+    | Readonly<{[string]: unknown}>,
 };
 
 type CompositeKeyComponent =
   | AnimatedNode
-  | $ReadOnlyArray<CompositeKeyComponent | null>
-  | $ReadOnly<{[string]: CompositeKeyComponent}>;
+  | ReadonlyArray<CompositeKeyComponent | null>
+  | Readonly<{[string]: CompositeKeyComponent}>;
 
-type $ReadOnlyCompositeKey = $ReadOnly<{
-  style?: $ReadOnly<{[string]: CompositeKeyComponent}>,
+type $ReadOnlyCompositeKey = Readonly<{
+  style?: Readonly<{[string]: CompositeKeyComponent}>,
   [string]:
     | $ReadOnlyCompositeKeyComponent
     | AnimatedEvent
-    | $ReadOnlyArray<unknown>
-    | $ReadOnly<{[string]: unknown}>,
+    | ReadonlyArray<unknown>
+    | Readonly<{[string]: unknown}>,
 }>;
 
 type $ReadOnlyCompositeKeyComponent =
   | AnimatedNode
-  | $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null>
-  | $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}>;
+  | ReadonlyArray<$ReadOnlyCompositeKeyComponent | null>
+  | Readonly<{[string]: $ReadOnlyCompositeKeyComponent}>;
 
 type AnimatedPropsMemoHook = (
   () => AnimatedProps,
-  props: $ReadOnly<{[string]: unknown}>,
+  props: Readonly<{[string]: unknown}>,
 ) => AnimatedProps;
 
 /**
@@ -62,14 +62,14 @@ export function createAnimatedPropsMemoHook(
 ): AnimatedPropsMemoHook {
   return function useAnimatedPropsMemo(
     create: () => AnimatedProps,
-    props: $ReadOnly<{[string]: unknown}>,
+    props: Readonly<{[string]: unknown}>,
   ): AnimatedProps {
     const compositeKey = useMemo(
       () => createCompositeKeyForProps(props, allowlist),
       [props],
     );
 
-    const prevRef = useRef<?$ReadOnly<{
+    const prevRef = useRef<?Readonly<{
       compositeKey: typeof compositeKey,
       node: AnimatedProps,
     }>>();
@@ -107,7 +107,7 @@ export function createAnimatedPropsMemoHook(
  * returns null.
  */
 export function createCompositeKeyForProps(
-  props: $ReadOnly<{[string]: unknown}>,
+  props: Readonly<{[string]: unknown}>,
   allowlist: ?AnimatedPropsAllowlist,
 ): $ReadOnlyCompositeKey | null {
   let compositeKey: CompositeKey | null = null;
@@ -160,8 +160,8 @@ export function createCompositeKeyForProps(
  * If `array` contains no `AnimatedNode` instances, this returns null.
  */
 function createCompositeKeyForArray(
-  array: $ReadOnlyArray<unknown>,
-): $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null> | null {
+  array: ReadonlyArray<unknown>,
+): ReadonlyArray<$ReadOnlyCompositeKeyComponent | null> | null {
   let compositeKey: Array<$ReadOnlyCompositeKeyComponent | null> | null = null;
 
   for (let ii = 0, length = array.length; ii < length; ii++) {
@@ -200,9 +200,9 @@ function createCompositeKeyForArray(
  * If `object` contains no `AnimatedNode` instances, this returns null.
  */
 function createCompositeKeyForObject(
-  object: $ReadOnly<{[string]: unknown}>,
+  object: Readonly<{[string]: unknown}>,
   allowlist?: ?AnimatedStyleAllowlist,
-): $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}> | null {
+): Readonly<{[string]: $ReadOnlyCompositeKeyComponent}> | null {
   let compositeKey: {[string]: $ReadOnlyCompositeKeyComponent} | null = null;
 
   const keys = Object.keys(object);
@@ -355,6 +355,6 @@ function areCompositeKeyComponentsEqual(
 // this shim when they do.
 // $FlowFixMe[method-unbinding]
 const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+const hasOwn: (obj: Readonly<{...}>, prop: string) => boolean =
   // $FlowFixMe[method-unbinding]
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

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

@@ -13,15 +13,14 @@ import type {NativeSyntheticEvent} from '../../../../Libraries/Types/CoreEventTy
 import type {HostInstance} from '../../types/HostInstance';
 import type {NativeModeChangeEvent} from './VirtualViewNativeComponent';
 
+import UIManager from '../../../../Libraries/ReactNative/UIManager';
 import StyleSheet from '../../../../Libraries/StyleSheet/StyleSheet';
-import * as ReactNativeFeatureFlags from '../../featureflags/ReactNativeFeatureFlags';
 import {useVirtualViewLogging} from './logger/VirtualViewLogger';
 import VirtualViewExperimentalNativeComponent from './VirtualViewExperimentalNativeComponent';
-import VirtualViewClassicNativeComponent from './VirtualViewNativeComponent';
+import VirtualViewProperNativeComponent from './VirtualViewNativeComponent';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-// $FlowFixMe[missing-export]
-import {startTransition, unstable_Activity as Activity, useState} from 'react';
+import {startTransition, useState} from 'react';
 
 // @see VirtualViewNativeComponent
 export enum VirtualViewMode {
@@ -37,24 +36,28 @@ export enum VirtualViewRenderState {
   None = 2,
 }
 
-export type Rect = $ReadOnly<{
+export type Rect = Readonly<{
   x: number,
   y: number,
   width: number,
   height: number,
 }>;
 
-export type ModeChangeEvent = $ReadOnly<{
+export type ModeChangeEvent = Readonly<{
   ...Omit<NativeModeChangeEvent, 'mode'>,
   renderState: VirtualViewRenderState,
   mode: VirtualViewMode,
   target: HostInstance,
 }>;
 
-const VirtualViewNativeComponent: typeof VirtualViewClassicNativeComponent =
-  ReactNativeFeatureFlags.enableVirtualViewExperimental()
-    ? VirtualViewExperimentalNativeComponent
-    : VirtualViewClassicNativeComponent;
+// If `VirtualView` exists and `VirtualViewExperimental` does not, that means
+// the new version was renamed to `VirtualView`. Eventually, this can be deleted
+// with a single remaining import of `VirtualViewNativeComponent`.
+const VirtualViewNativeComponent: typeof VirtualViewExperimentalNativeComponent =
+  UIManager.hasViewManagerConfig('VirtualView') &&
+  !UIManager.hasViewManagerConfig('VirtualViewExperimental')
+    ? VirtualViewProperNativeComponent
+    : VirtualViewExperimentalNativeComponent;
 
 type VirtualViewComponent = component(
   children?: React.Node,
@@ -150,17 +153,7 @@ function createVirtualView(initialState: State): VirtualViewComponent {
             : style
         }
         onModeChange={handleModeChange}>
-        {
-          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,
-          }
-        }
+        {isHidden ? null : children}
       </VirtualViewNativeComponent>
     );
   }

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

@@ -18,7 +18,7 @@ import type {HostComponent} from '../../types/HostComponent';
 
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
 
-export type NativeModeChangeEvent = $ReadOnly<{
+export type NativeModeChangeEvent = Readonly<{
   /**
    * Virtualization mode of the target view.
    *
@@ -34,7 +34,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
   /**
    * Rect of the target view, relative to the nearest ancestor scroll container.
    */
-  targetRect: $ReadOnly<{
+  targetRect: Readonly<{
     x: Double,
     y: Double,
     width: Double,
@@ -51,7 +51,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
    *
    * This can be used to determine whether and how much new content to render.
    */
-  thresholdRect: $ReadOnly<{
+  thresholdRect: Readonly<{
     x: Double,
     y: Double,
     width: Double,
@@ -59,7 +59,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
   }>,
 }>;
 
-type VirtualViewExperimentalNativeProps = $ReadOnly<{
+type VirtualViewExperimentalNativeProps = Readonly<{
   ...ViewProps,
 
   /**
@@ -67,6 +67,12 @@ type VirtualViewExperimentalNativeProps = $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.
    *
@@ -79,18 +85,13 @@ type VirtualViewExperimentalNativeProps = $ReadOnly<{
    */
   renderState: Int32,
 
-  /**
-   * This was needed to get VirtualViewManagerDelegate to set this property.
-   * TODO: Investigate why spread ViewProps doesn't call setter
-   */
-  removeClippedSubviews?: boolean,
-
   /**
    * See `NativeModeChangeEvent`.
    */
   onModeChange?: ?DirectEventHandler<NativeModeChangeEvent>,
 }>;
 
+// TODO: Rename to eliminate "Experimental" suffix in the name.
 export default codegenNativeComponent<VirtualViewExperimentalNativeProps>(
   'VirtualViewExperimental',
   {

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

@@ -18,7 +18,7 @@ import type {HostComponent} from '../../types/HostComponent';
 
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
 
-export type NativeModeChangeEvent = $ReadOnly<{
+export type NativeModeChangeEvent = Readonly<{
   /**
    * Virtualization mode of the target view.
    *
@@ -34,7 +34,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
   /**
    * Rect of the target view, relative to the nearest ancestor scroll container.
    */
-  targetRect: $ReadOnly<{
+  targetRect: Readonly<{
     x: Double,
     y: Double,
     width: Double,
@@ -51,7 +51,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
    *
    * This can be used to determine whether and how much new content to render.
    */
-  thresholdRect: $ReadOnly<{
+  thresholdRect: Readonly<{
     x: Double,
     y: Double,
     width: Double,
@@ -59,7 +59,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
   }>,
 }>;
 
-type VirtualViewNativeProps = $ReadOnly<{
+type VirtualViewNativeProps = Readonly<{
   ...ViewProps,
 
   /**

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

@@ -16,9 +16,9 @@ import * as React from 'react';
 
 const View = require('../../../../../Libraries/Components/View/View').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   children: React.Node,
-  box?: ?$ReadOnly<{
+  box?: ?Readonly<{
     top: number,
     right: number,
     bottom: number,

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

@@ -31,7 +31,7 @@ const blank = {
   bottom: 0,
 };
 
-type BoxInspectorProps = $ReadOnly<{
+type BoxInspectorProps = Readonly<{
   style: ViewStyleProp,
   frame: ?InspectedElementFrame,
 }>;
@@ -57,10 +57,10 @@ function BoxInspector({style, frame}: BoxInspectorProps): React.Node {
   );
 }
 
-type BoxContainerProps = $ReadOnly<{
+type BoxContainerProps = Readonly<{
   title: string,
   titleStyle?: TextStyleProp,
-  box: $ReadOnly<{
+  box: Readonly<{
     top: number,
     left: number,
     right: number,

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

@@ -25,15 +25,15 @@ const Dimensions =
 const BorderBox = require('./BorderBox').default;
 const resolveBoxStyle = require('./resolveBoxStyle').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   frame: InspectedElementFrame,
   style?: ?ViewStyleProp,
 }>;
 
 function ElementBox({frame, style}: Props): React.Node {
   const flattenedStyle = flattenStyle(style) || {};
-  let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', flattenedStyle);
-  let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', flattenedStyle);
+  let margin: ?Readonly<Style> = resolveBoxStyle('margin', flattenedStyle);
+  let padding: ?Readonly<Style> = resolveBoxStyle('padding', flattenedStyle);
 
   const frameStyle = {...frame};
   const contentStyle: {width: number, height: number} = {
@@ -110,7 +110,7 @@ type Style = {
  * @param style the style to resolve
  * @return a modified copy
  */
-function resolveRelativeSizes(style: $ReadOnly<Style>): Style {
+function resolveRelativeSizes(style: Readonly<Style>): Style {
   let resolvedStyle = {...style};
   resolveSizeInPlace(resolvedStyle, 'top', 'height');
   resolveSizeInPlace(resolvedStyle, 'right', 'width');

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

@@ -30,7 +30,7 @@ const mapWithSeparator =
 const BoxInspector = require('./BoxInspector').default;
 const StyleInspector = require('./StyleInspector').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   hierarchy: ?InspectorData['hierarchy'],
   style?: ?ViewStyleProp,
   frame?: ?Object,

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

@@ -41,24 +41,35 @@ const {useState} = React;
 type PanelPosition = 'top' | 'bottom';
 
 export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
-export type InspectedElement = $ReadOnly<{
+export type InspectedElement = Readonly<{
   frame: InspectedElementFrame,
   style?: ViewStyleProp,
 }>;
 export type ElementsHierarchy = InspectorData['hierarchy'];
 
+type ExternalInspection = {
+  externalInspectingEnabled: boolean,
+  +reportToExternalInspection: (viewData: TouchedViewDataAtPoint) => void,
+};
+
 type Props = {
   inspectedViewRef: InspectedViewRef,
   onRequestRerenderApp: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
+  devMenuInspectorOpen: boolean,
+  externalInspection: ExternalInspection,
 };
 
 function Inspector({
   inspectedViewRef,
   onRequestRerenderApp,
   reactDevToolsAgent,
+  devMenuInspectorOpen,
+  externalInspection,
 }: Props): React.Node {
-  const [inspecting, setInspecting] = useState<boolean>(true);
+  const [inspectingEnabled, setInspectingEnabled] = useState<boolean>(true);
+  const {externalInspectingEnabled, reportToExternalInspection} =
+    externalInspection;
 
   const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
   const [inspectedElement, setInspectedElement] =
@@ -67,6 +78,9 @@ function Inspector({
   const [elementsHierarchy, setElementsHierarchy] =
     useState<?ElementsHierarchy>(null);
 
+  // Derive inspecting state: external inspection forces it on, otherwise use local state
+  const isInspecting = externalInspectingEnabled || inspectingEnabled;
+
   const setSelection = (i: number) => {
     const hierarchyItem = elementsHierarchy?.[i];
     if (hierarchyItem == null) {
@@ -99,6 +113,11 @@ function Inspector({
         closestInstance,
       } = viewData;
 
+      // Report to external inspection if in external inspection mode
+      if (externalInspectingEnabled) {
+        reportToExternalInspection(viewData);
+      }
+
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
@@ -133,7 +152,7 @@ function Inspector({
   };
 
   const handleSetInspecting = (enabled: boolean) => {
-    setInspecting(enabled);
+    setInspectingEnabled(enabled);
     setInspectedElement(null);
   };
 
@@ -149,26 +168,29 @@ function Inspector({
 
   return (
     <View style={styles.container} pointerEvents="box-none">
-      {inspecting && (
+      {isInspecting && (
         <InspectorOverlay
           inspected={inspectedElement}
           onTouchPoint={onTouchPoint}
+          externalInspectionActive={externalInspectingEnabled}
         />
       )}
 
-      <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
-        <InspectorPanel
-          devtoolsIsOpen={!!reactDevToolsAgent}
-          inspecting={inspecting}
-          setInspecting={handleSetInspecting}
-          inspected={inspectedElement}
-          hierarchy={elementsHierarchy}
-          selection={selectionIndex}
-          setSelection={setSelection}
-          touchTargeting={PressabilityDebug.isEnabled()}
-          setTouchTargeting={setTouchTargeting}
-        />
-      </SafeAreaView>
+      {!externalInspectingEnabled && (
+        <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
+          <InspectorPanel
+            devtoolsIsOpen={!!reactDevToolsAgent}
+            inspecting={inspectingEnabled}
+            setInspecting={handleSetInspecting}
+            inspected={inspectedElement}
+            hierarchy={elementsHierarchy}
+            selection={selectionIndex}
+            setSelection={setSelection}
+            touchTargeting={PressabilityDebug.isEnabled()}
+            setTouchTargeting={setTouchTargeting}
+          />
+        </SafeAreaView>
+      )}
     </View>
   );
 }

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

@@ -20,12 +20,17 @@ const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const ElementBox = require('./ElementBox').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
+  externalInspectionActive?: boolean,
 }>;
 
-function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
+function InspectorOverlay({
+  inspected,
+  onTouchPoint,
+  externalInspectionActive,
+}: Props): React.Node {
   const findViewForTouchEvent = (e: GestureResponderEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
 
@@ -47,7 +52,10 @@ function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
       onStartShouldSetResponder={handleStartShouldSetResponder}
       onResponderMove={findViewForTouchEvent}
       nativeID="inspectorOverlay" /* TODO: T68258846. */
-      style={styles.inspector}>
+      style={[
+        styles.inspector,
+        externalInspectionActive === true && styles.externalInspectionIndicator,
+      ]}>
       {content}
     </View>
   );
@@ -62,6 +70,10 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  externalInspectionIndicator: {
+    borderWidth: 4,
+    borderColor: 'rgba(255, 0, 0, 0.8)',
+  },
 });
 
 export default InspectorOverlay;

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

@@ -25,7 +25,7 @@ const StyleSheet =
 const Text = require('../../../../../Libraries/Text/Text').default;
 const ElementProperties = require('./ElementProperties').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   devtoolsIsOpen: boolean,
   inspecting: boolean,
   setInspecting: (val: boolean) => void,
@@ -84,7 +84,7 @@ class InspectorPanel extends React.Component<Props> {
   }
 }
 
-type InspectorPanelButtonProps = $ReadOnly<{
+type InspectorPanelButtonProps = Readonly<{
   onClick: (val: boolean) => void,
   pressed: boolean,
   title: string,

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

@@ -52,10 +52,12 @@ export default function ReactDevToolsOverlay({
 
     function onStartInspectingNative() {
       setIsInspecting(true);
+      setInspected(null);
     }
 
     function onStopInspectingNative() {
       setIsInspecting(false);
+      setInspected(null);
     }
 
     reactDevToolsAgent.addListener('shutdown', cleanup);
@@ -93,12 +95,6 @@ export default function ReactDevToolsOverlay({
     [inspectedViewRef, reactDevToolsAgent],
   );
 
-  const stopInspecting = useCallback(() => {
-    reactDevToolsAgent.stopInspectingNative(true);
-    setIsInspecting(false);
-    setInspected(null);
-  }, [reactDevToolsAgent]);
-
   const onPointerMove = useCallback(
     (e: PointerEvent) => {
       findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
@@ -133,12 +129,10 @@ export default function ReactDevToolsOverlay({
         ? {
             onPointerMove,
             onPointerDown: onPointerMove,
-            onPointerUp: stopInspecting,
           }
         : {
             onStartShouldSetResponder: shouldSetResponder,
             onResponderMove: onResponderMove,
-            onResponderRelease: stopInspecting,
           };
 
     return (

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

@@ -20,7 +20,7 @@ const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const Text = require('../../../../../Libraries/Text/Text').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   style?: ?____FlattenStyleProp_Internal<ViewStyleProp>,
 }>;
 

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

@@ -26,7 +26,7 @@ const I18nManager =
 function resolveBoxStyle(
   prefix: string,
   style: Object,
-): ?$ReadOnly<{
+): ?Readonly<{
   bottom: number,
   left: number,
   right: number,