@office-iss/react-native-win32 0.0.0-canary.258 → 0.0.0-canary.259

package/.flowconfig

@@ -127,9 +127,7 @@ module.name_mapper='^@office-iss/react-native-win32$' -> '<PROJECT_ROOT>/index.w
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/\1'
 module.name_mapper='^@office-iss/react-native-win32/\(.*\)$' -> '<PROJECT_ROOT>\/1'
 module.name_mapper='^@react-native/dev-middleware$' -> '<PROJECT_ROOT>/\1'
-module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/Libraries/Image/RelativeImageStub'
-
-one_sided_type_guards=true
+module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\|xml\)$' -> '<PROJECT_ROOT>/Libraries/Image/RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
@@ -161,4 +159,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.238.3
+^0.241.0

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Thu, 08 Aug 2024 05:14:50 GMT",
+      "date": "Thu, 22 Aug 2024 05:23:05 GMT",
+      "version": "0.0.0-canary.259",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.259",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "tatianakapos@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "bccbec07eeeda80b870765f2b207a6616b69732b",
+            "comment": "integrate react native nightly 7-19"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 08 Aug 2024 05:16:47 GMT",
       "version": "0.0.0-canary.258",
       "tag": "@office-iss/react-native-win32_v0.0.0-canary.258",
       "comments": {

package/CHANGELOG.md

@@ -1,21 +1,29 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Thu, 08 Aug 2024 05:14:50 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Aug 2024 05:23:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.0.0-canary.258
+## 0.0.0-canary.259
 
-Thu, 08 Aug 2024 05:14:50 GMT
+Thu, 22 Aug 2024 05:23:05 GMT
 
 ### Changes
 
-- Integrate 7/1 (jthysell@microsoft.com)
-- Bump @rnw-scripts/eslint-config to v1.2.26
-- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.30
-- Bump @rnw-scripts/just-task to v2.3.43
-- Bump react-native-platform-override to v1.9.45
+- integrate react native nightly 7-19 (tatianakapos@microsoft.com)
 
+## 0.0.0-canary.258
+
+Thu, 08 Aug 2024 05:16:47 GMT
+
+### Changes
+
+- Integrate 7/1 (jthysell@microsoft.com)
+- Bump @rnw-scripts/eslint-config to v1.2.26
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.30
+- Bump @rnw-scripts/just-task to v2.3.43
+- Bump react-native-platform-override to v1.9.45
+
 ## 0.0.0-canary.257
 
 Wed, 24 Jul 2024 05:24:34 GMT

package/Libraries/Alert/Alert.js

@@ -98,10 +98,13 @@ class Alert {
       const onAction = (action, buttonKey) => {
         if (action === constants.buttonClicked) {
           if (buttonKey === constants.buttonNeutral) {
+            // $FlowFixMe[incompatible-type]
             buttonNeutral.onPress && buttonNeutral.onPress();
           } else if (buttonKey === constants.buttonNegative) {
+            // $FlowFixMe[incompatible-type]
             buttonNegative.onPress && buttonNegative.onPress();
           } else if (buttonKey === constants.buttonPositive) {
+            // $FlowFixMe[incompatible-type]
             buttonPositive.onPress && buttonPositive.onPress();
           }
         } else if (action === constants.dismissed) {

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -49,6 +49,7 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
  * transform which can receive values from multiple parents.
  */
 export function flushValue(rootNode: AnimatedNode): void {
+  // eslint-disable-next-line func-call-spacing
   const leaves = new Set<{update: () => void, ...}>();
   function findAnimatedStyles(node: AnimatedNode) {
     // $FlowFixMe[prop-missing]

package/Libraries/Animated/useAnimatedProps.js

@@ -49,6 +49,14 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   );
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+  const useSetNativePropsInNativeAnimationsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
+
+  const useAnimatedPropsLifecycle =
+    ReactNativeFeatureFlags.usePassiveEffectsForAnimations()
+      ? useAnimatedPropsLifecycle_passiveEffects
+      : useAnimatedPropsLifecycle_layoutEffects;
+
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -87,7 +95,12 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           if (isFabricNode) {
             // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
             // Must not be called in Paper.
-            scheduleUpdate();
+            if (useSetNativePropsInNativeAnimationsInFabric) {
+              // $FlowFixMe[incompatible-use]
+              instance.setNativeProps(node.__getAnimatedValue());
+            } else {
+              scheduleUpdate();
+            }
           }
           return;
         }
@@ -157,7 +170,12 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [props, node, useNativePropsInFabric],
+    [
+      node,
+      useNativePropsInFabric,
+      useSetNativePropsInNativeAnimationsInFabric,
+      props,
+    ],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 
@@ -182,7 +200,7 @@ function reduceAnimatedProps<TProps>(
  * nodes. So in order to optimize this, we avoid detaching until the next attach
  * unless we are unmounting.
  */
-function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
@@ -220,6 +238,53 @@ function useAnimatedPropsLifecycle(node: AnimatedProps): void {
   }, [node]);
 }
 
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ *
+ * NOTE: unlike `useAnimatedPropsLifecycle_layoutEffects`, this version uses passive effects to setup animation graph.
+ */
+function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    // It is ok for multiple components to call `flushQueue` because it noops
+    // if the queue is empty. When multiple animated components are mounted at
+    // the same time. Only first component flushes the queue and the others will noop.
+    NativeAnimatedHelper.API.flushQueue();
+  });
+
+  useEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
 function getEventTarget<TInstance>(instance: TInstance): TInstance {
   return typeof instance === 'object' &&
     typeof instance?.getScrollableNode === 'function'

package/Libraries/BatchedBridge/NativeModules.js

@@ -102,6 +102,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
       // In case we reject, capture a useful stack trace here.
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
+      // $FlowFixMe[incompatible-type]
       const enqueueingFrameError: ExtendedError = new Error();
       return new Promise((resolve, reject) => {
         BatchedBridge.enqueueNativeCall(
@@ -171,6 +172,7 @@ function updateErrorWithErrorData(
 ): ExtendedError {
   /* $FlowFixMe[class-object-subtyping] added when improving typing for this
    * parameters */
+  // $FlowFixMe[incompatible-return]
   return Object.assign(error, errorData || {});
 }
 

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -62,6 +62,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           nestedScrollEnabled: true,
           scrollEventThrottle: true,
+          scrollIndicatorInsets: {
+            diff: require('../../Utilities/differ/insetsDiffer'),
+          },
           borderStyle: true,
           borderRightColor: {
             process: require('../../StyleSheet/processColor').default,

package/Libraries/Components/TextInput/TextInput.js

@@ -17,6 +17,7 @@ import type {
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {TextInputType} from './TextInput.flow';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {
@@ -957,8 +958,188 @@ export type Props = $ReadOnly<{|
   value?: ?Stringish,
 |}>;
 
+type ViewCommands = $NonMaybeType<
+  | typeof AndroidTextInputCommands
+  | typeof RCTMultilineTextInputNativeCommands
+  | typeof RCTSinglelineTextInputNativeCommands,
+>;
+
+type LastNativeSelection = {|
+  selection: Selection,
+  mostRecentEventCount: number,
+|};
+
 const emptyFunctionThatReturnsTrue = () => true;
 
+/**
+ * This hook handles the synchronization between the state of the text input
+ * in native and in JavaScript. This is necessary due to the asynchronous nature
+ * of text input events.
+ */
+function useTextInputStateSynchronization_STATE({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: Props,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  text: string,
+  viewCommands: ViewCommands,
+}): {
+  setLastNativeText: string => void,
+  setLastNativeSelection: LastNativeSelection => void,
+} {
+  const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
+  const [lastNativeSelectionState, setLastNativeSelection] =
+    useState<LastNativeSelection>({
+      selection: {start: -1, end: -1},
+      mostRecentEventCount: mostRecentEventCount,
+    });
+
+  const lastNativeSelection = lastNativeSelectionState.selection;
+
+  // This is necessary in case native updates the text and JS decides
+  // that the update should be ignored and we should stick with the value
+  // that we have in JS.
+  useLayoutEffect(() => {
+    const nativeUpdate: {text?: string, selection?: Selection} = {};
+
+    if (lastNativeText !== props.value && typeof props.value === 'string') {
+      nativeUpdate.text = props.value;
+      setLastNativeText(props.value);
+    }
+
+    if (
+      selection &&
+      lastNativeSelection &&
+      (lastNativeSelection.start !== selection.start ||
+        lastNativeSelection.end !== selection.end)
+    ) {
+      nativeUpdate.selection = selection;
+      setLastNativeSelection({selection, mostRecentEventCount});
+    }
+
+    if (Object.keys(nativeUpdate).length === 0) {
+      return;
+    }
+
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        text,
+        selection?.start ?? -1,
+        selection?.end ?? -1,
+      );
+    }
+  }, [
+    mostRecentEventCount,
+    inputRef,
+    props.value,
+    props.defaultValue,
+    lastNativeText,
+    selection,
+    lastNativeSelection,
+    text,
+    viewCommands,
+  ]);
+
+  return {setLastNativeText, setLastNativeSelection};
+}
+
+/**
+ * This hook handles the synchronization between the state of the text input
+ * in native and in JavaScript. This is necessary due to the asynchronous nature
+ * of text input events.
+ */
+function useTextInputStateSynchronization_REFS({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: Props,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  text: string,
+  viewCommands: ViewCommands,
+}): {
+  setLastNativeText: string => void,
+  setLastNativeSelection: LastNativeSelection => void,
+} {
+  const lastNativeTextRef = useRef<?Stringish>(props.value);
+  const lastNativeSelectionRef = useRef<LastNativeSelection>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
+
+  // This is necessary in case native updates the text and JS decides
+  // that the update should be ignored and we should stick with the value
+  // that we have in JS.
+  useLayoutEffect(() => {
+    const nativeUpdate: {text?: string, selection?: Selection} = {};
+
+    const lastNativeSelection = lastNativeSelectionRef.current.selection;
+
+    if (
+      lastNativeTextRef.current !== props.value &&
+      typeof props.value === 'string'
+    ) {
+      nativeUpdate.text = props.value;
+      lastNativeTextRef.current = props.value;
+    }
+
+    if (
+      selection &&
+      lastNativeSelection &&
+      (lastNativeSelection.start !== selection.start ||
+        lastNativeSelection.end !== selection.end)
+    ) {
+      nativeUpdate.selection = selection;
+      lastNativeSelectionRef.current = {selection, mostRecentEventCount};
+    }
+
+    if (Object.keys(nativeUpdate).length === 0) {
+      return;
+    }
+
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        text,
+        selection?.start ?? -1,
+        selection?.end ?? -1,
+      );
+    }
+  }, [
+    mostRecentEventCount,
+    inputRef,
+    props.value,
+    props.defaultValue,
+    selection,
+    text,
+    viewCommands,
+  ]);
+
+  return {
+    setLastNativeText: lastNativeText => {
+      lastNativeTextRef.current = lastNativeText;
+    },
+    setLastNativeSelection: lastNativeSelection => {
+      lastNativeSelectionRef.current = lastNativeSelection;
+    },
+  };
+}
+
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as
@@ -1089,7 +1270,6 @@ function InternalTextInput(props: Props): React.Node {
 
   const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const selection: ?Selection =
     propsSelection == null
       ? null
@@ -1098,28 +1278,6 @@ function InternalTextInput(props: Props): React.Node {
           end: propsSelection.end ?? propsSelection.start,
         };
 
-  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-  const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
-  const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: Selection,
-    mostRecentEventCount: number,
-  |}>({
-    selection: {start: -1, end: -1},
-    mostRecentEventCount: mostRecentEventCount,
-  });
-
-  const lastNativeSelection = lastNativeSelectionState.selection;
-
-  let viewCommands;
-  if (AndroidTextInputCommands) {
-    viewCommands = AndroidTextInputCommands;
-  } else {
-    viewCommands =
-      props.multiline === true
-        ? RCTMultilineTextInputNativeCommands
-        : RCTSinglelineTextInputNativeCommands;
-  }
-
   const text =
     typeof props.value === 'string'
       ? props.value
@@ -1127,51 +1285,26 @@ function InternalTextInput(props: Props): React.Node {
         ? props.defaultValue
         : '';
 
-  // This is necessary in case native updates the text and JS decides
-  // that the update should be ignored and we should stick with the value
-  // that we have in JS.
-  useLayoutEffect(() => {
-    const nativeUpdate: {text?: string, selection?: Selection} = {};
-
-    if (lastNativeText !== props.value && typeof props.value === 'string') {
-      nativeUpdate.text = props.value;
-      setLastNativeText(props.value);
-    }
-
-    if (
-      selection &&
-      lastNativeSelection &&
-      (lastNativeSelection.start !== selection.start ||
-        lastNativeSelection.end !== selection.end)
-    ) {
-      nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
-    }
+  const viewCommands =
+    AndroidTextInputCommands ||
+    (props.multiline === true
+      ? RCTMultilineTextInputNativeCommands
+      : RCTSinglelineTextInputNativeCommands);
 
-    if (Object.keys(nativeUpdate).length === 0) {
-      return;
-    }
-
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        text,
-        selection?.start ?? -1,
-        selection?.end ?? -1,
-      );
-    }
-  }, [
-    mostRecentEventCount,
-    inputRef,
-    props.value,
-    props.defaultValue,
-    lastNativeText,
-    selection,
-    lastNativeSelection,
-    text,
-    viewCommands,
-  ]);
+  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
+  const useTextInputStateSynchronization =
+    ReactNativeFeatureFlags.useRefsForTextInputState()
+      ? useTextInputStateSynchronization_REFS
+      : useTextInputStateSynchronization_STATE;
+  const {setLastNativeText, setLastNativeSelection} =
+    useTextInputStateSynchronization({
+      props,
+      inputRef,
+      mostRecentEventCount,
+      selection,
+      text,
+      viewCommands,
+    });
 
   useLayoutEffect(() => {
     const inputRefValue = inputRef.current;
@@ -1187,7 +1320,7 @@ function InternalTextInput(props: Props): React.Node {
         }
       };
     }
-  }, [inputRef]);
+  }, []);
 
   const setLocalRef = useCallback(
     (instance: TextInputInstance | null) => {
@@ -1401,12 +1534,10 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  const style = flattenStyle<TextStyleProp>(props.style);
-
+  let style = flattenStyle<TextStyleProp>(props.style);
   if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[cannot-write]
-    style.fontWeight = style?.fontWeight.toString();
+    // $FlowFixMe
+    style = [style, {fontWeight: style.fontWeight.toString()}];
   }
 
   if (Platform.OS === 'ios') {