@office-iss/react-native-win32 0.0.0-canary.247 → 0.0.0-canary.249

package/.flowconfig

@@ -55,7 +55,8 @@
 .*/node_modules/playground/.*
 
 ; Ignore templates for 'react-native init'
-<PROJECT_ROOT>/template/.*
+<PROJECT_ROOT>/packages/react-native/template/.*
+<PROJECT_ROOT>/packages/react-native/sdks/.*
 
 ; Ignore the Dangerfile
 <PROJECT_ROOT>/packages/react-native-bots/dangerfile.js
@@ -95,7 +96,6 @@ flow/
 ../../../node_modules/.flow/flow-typed/
 
 [options]
-experimental.global_find_ref=true
 enums=true
 casting_syntax=both
 
@@ -153,4 +153,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.234.0
+^0.236.0

package/CHANGELOG.json

@@ -2,7 +2,99 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Wed, 22 May 2024 05:15:59 GMT",
+      "date": "Thu, 30 May 2024 05:15:53 GMT",
+      "version": "0.0.0-canary.249",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.249",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "1422161+marlenecota@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "1304e2f0aa0f074550f4a10de439188749590547",
+            "comment": "RN Integration 05/11"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/eslint-config to v1.2.19",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.23",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/just-task to v2.3.35",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump react-native-platform-override to v1.9.36",
+            "commit": "not available"
+          }
+        ],
+        "none": [
+          {
+            "author": "1422161+marlenecota@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "b06795ef7c683825358c8150adb2107a816d98ac",
+            "comment": "CodeQL patch"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 May 2024 05:17:48 GMT",
+      "version": "0.0.0-canary.248",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.248",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "1422161+marlenecota@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "3d221a9e154753fce6c1d22bdf6f2e17d6bc41b5",
+            "comment": "RN Integration 04/27"
+          },
+          {
+            "author": "1422161+marlenecota@users.noreply.github.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "9a5ddf602612fcbe088fafbaa80993d7b9f9aace",
+            "comment": "RN Integration 05/02"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/eslint-config to v1.2.18",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.22",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/just-task to v2.3.34",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump react-native-platform-override to v1.9.35",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 May 2024 05:18:16 GMT",
       "version": "0.0.0-canary.247",
       "tag": "@office-iss/react-native-win32_v0.0.0-canary.247",
       "comments": {

package/CHANGELOG.md

@@ -1,21 +1,46 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Wed, 22 May 2024 05:15:59 GMT and should not be manually modified.
+This log was last generated on Thu, 30 May 2024 05:15:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.0.0-canary.247
+## 0.0.0-canary.249
 
-Wed, 22 May 2024 05:15:59 GMT
+Thu, 30 May 2024 05:15:53 GMT
 
 ### Changes
 
-- RN Integration 04/20 (1422161+marlenecota@users.noreply.github.com)
-- Bump @rnw-scripts/eslint-config to v1.2.17
-- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.21
-- Bump @rnw-scripts/just-task to v2.3.33
-- Bump react-native-platform-override to v1.9.34
+- RN Integration 05/11 (1422161+marlenecota@users.noreply.github.com)
+- Bump @rnw-scripts/eslint-config to v1.2.19
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.23
+- Bump @rnw-scripts/just-task to v2.3.35
+- Bump react-native-platform-override to v1.9.36
 
+## 0.0.0-canary.248
+
+Thu, 23 May 2024 05:17:48 GMT
+
+### Changes
+
+- RN Integration 04/27 (1422161+marlenecota@users.noreply.github.com)
+- RN Integration 05/02 (1422161+marlenecota@users.noreply.github.com)
+- Bump @rnw-scripts/eslint-config to v1.2.18
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.22
+- Bump @rnw-scripts/just-task to v2.3.34
+- Bump react-native-platform-override to v1.9.35
+
+## 0.0.0-canary.247
+
+Wed, 22 May 2024 05:18:16 GMT
+
+### Changes
+
+- RN Integration 04/20 (1422161+marlenecota@users.noreply.github.com)
+- Bump @rnw-scripts/eslint-config to v1.2.17
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.21
+- Bump @rnw-scripts/just-task to v2.3.33
+- Bump react-native-platform-override to v1.9.34
+
 ## 0.0.0-canary.246
 
 Wed, 15 May 2024 05:14:52 GMT

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -455,18 +455,22 @@ function addWhitelistedInterpolationParam(param: string): void {
 }
 
 function isSupportedColorStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_COLOR_STYLES[prop] === true;
 }
 
 function isSupportedStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_STYLES[prop] === true;
 }
 
 function isSupportedTransformProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_TRANSFORMS[prop] === true;
 }
 
 function isSupportedInterpolationParam(param: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
 }
 

package/Libraries/Animated/NativeAnimatedHelper.win32.js

@@ -457,18 +457,22 @@ function addWhitelistedInterpolationParam(param: string): void {
 }
 
 function isSupportedColorStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_COLOR_STYLES[prop] === true;
 }
 
 function isSupportedStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_STYLES[prop] === true;
 }
 
 function isSupportedTransformProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_TRANSFORMS[prop] === true;
 }
 
 function isSupportedInterpolationParam(param: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
 }
 

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,10 +8,12 @@
  * @format
  */
 
+import composeStyles from '../../src/private/core/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
+import {useMemo} from 'react';
 
 // $FlowFixMe[deprecated-type]
 export type AnimatedProps<Props: {...}> = $ObjMap<
@@ -44,14 +46,18 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
       // without these passthrough values.
       // $FlowFixMe[prop-missing]
       const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const {style: passthroughStyle, ...passthroughProps} =
-        passthroughAnimatedPropExplicitValues ?? {};
-      const mergedStyle = {...style, ...passthroughStyle};
+      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+      const mergedStyle = useMemo(
+        () => composeStyles(style, passthroughStyle),
+        [passthroughStyle, style],
+      );
 
+      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+      // spread after `reducedProps` but before `style`.
       return (
         <Component
           {...reducedProps}
-          {...passthroughProps}
+          {...passthroughAnimatedPropExplicitValues}
           style={mergedStyle}
           ref={ref}
         />

package/Libraries/Animated/useAnimatedProps.js

@@ -141,6 +141,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
       const events = [];
 
       for (const propName in props) {
+        // $FlowFixMe[invalid-computed-prop]
         const propValue = props[propName];
         if (propValue instanceof AnimatedEvent && propValue.__isNative) {
           propValue.__attach(target, propName);

package/Libraries/BatchedBridge/MessageQueue.js

@@ -424,6 +424,7 @@ class MessageQueue {
           A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
         );
       }
+      // $FlowFixMe[invalid-computed-prop]
       if (!moduleMethods[method]) {
         invariant(
           false,

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -23,6 +23,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   validAttributes: {
     decelerationRate: true,
     disableIntervalMomentum: true,
+    maintainVisibleContentPosition: true,
     endFillColor: {process: require('../../StyleSheet/processColor').default},
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
@@ -30,7 +31,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     pagingEnabled: true,
     persistentScrollbar: true,
     horizontal: true,
+    enableSyncOnScroll: true,
     scrollEnabled: true,
+    scrollEventThrottle: true,
     scrollPerfTag: true,
     sendMomentumEvents: true,
     showsHorizontalScrollIndicator: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -1764,6 +1764,13 @@ class ScrollView extends React.Component<Props, State> {
     const hasStickyHeaders =
       Array.isArray(stickyHeaderIndices) && stickyHeaderIndices.length > 0;
 
+    // Some ScrollView native component behaviors rely on using the metrics
+    // of mounted views for anchoring. Make sure not to flatten children if
+    // this is the case.
+    const preserveChildren =
+      this.props.maintainVisibleContentPosition != null ||
+      (Platform.OS === 'android' && this.props.snapToAlignment != null);
+
     const contentContainer = (
       <NativeDirectionalScrollContentView
         {...contentSizeChangeProps}
@@ -1776,7 +1783,8 @@ class ScrollView extends React.Component<Props, State> {
             ? false
             : this.props.removeClippedSubviews
         }
-        collapsable={false}>
+        collapsable={false}
+        collapsableChildren={!preserveChildren}>
         {children}
       </NativeDirectionalScrollContentView>
     );

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -45,6 +45,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../../Utilities/differ/pointsDiffer'),
           },
           decelerationRate: true,
+          enableSyncOnScroll: true, // Fabric only.
           disableIntervalMomentum: true,
           maintainVisibleContentPosition: true,
           pagingEnabled: true,
@@ -134,7 +135,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
           endDraggingSensitivityMultiplier: true,
-          enableSyncOnScroll: true, // iOS-Fabric only.
+          enableSyncOnScroll: true, // Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

package/Libraries/Components/TextInput/TextInput.js

@@ -1099,12 +1099,14 @@ function InternalTextInput(props: Props): React.Node {
         };
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: ?Selection,
+    selection: Selection,
     mostRecentEventCount: number,
-  |}>({selection, mostRecentEventCount});
+  |}>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
 
@@ -1401,6 +1403,12 @@ function InternalTextInput(props: Props): React.Node {
 
   const style = flattenStyle<TextStyleProp>(props.style);
 
+  if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    style.fontWeight = style?.fontWeight.toString();
+  }
+
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
       props.multiline === true
@@ -1436,6 +1444,7 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
+        selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
           style,

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -1144,12 +1144,14 @@ function InternalTextInput(props: Props): React.Node {
         };
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: ?Selection,
+    selection: Selection,
     mostRecentEventCount: number,
-  |}>({selection, mostRecentEventCount});
+  |}>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
 
@@ -1514,6 +1516,12 @@ function InternalTextInput(props: Props): React.Node {
 
   const style = flattenStyle<TextStyleProp>(props.style);
 
+  if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    style.fontWeight = style?.fontWeight.toString();
+  }
+
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
       props.multiline === true
@@ -1550,6 +1558,7 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
+        selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
           style,

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -209,6 +209,7 @@ class TouchableBounce extends React.Component<Props, State> {
 
   componentWillUnmount(): void {
     this.state.pressability.reset();
+    this.state.scale.resetAnimation();
   }
 }
 

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -320,6 +320,7 @@ class TouchableOpacity extends React.Component<Props, State> {
 
   componentWillUnmount(): void {
     this.state.pressability.reset();
+    this.state.anim.resetAnimation();
   }
 }
 

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -12,6 +12,7 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processColor from '../../StyleSheet/processColor';
+import processFilter from '../../StyleSheet/processFilter';
 import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
@@ -114,6 +115,11 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   transform: {process: processTransform},
   transformOrigin: {process: processTransformOrigin},
 
+  /**
+   * Filter
+   */
+  experimental_filter: {process: processFilter},
+
   /**
    * View
    */

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -33,6 +33,7 @@ const UIView = {
   onMagicTap: true,
   onAccessibilityEscape: true,
   collapsable: true,
+  collapsableChildren: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
   role: true,

package/Libraries/Components/View/ReactNativeViewAttributes.win32.js

@@ -33,6 +33,7 @@ const UIView = {
   onMagicTap: true,
   onAccessibilityEscape: true,
   collapsable: true,
+  collapsableChildren: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
   role: true,

package/Libraries/Components/View/View.js

@@ -10,7 +10,6 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
@@ -53,7 +52,6 @@ const View: React.AbstractComponent<
       id,
       importantForAccessibility,
       nativeID,
-      pointerEvents,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -96,12 +94,6 @@ const View: React.AbstractComponent<
       };
     }
 
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    let style = flattenStyle(otherProps.style);
-
-    // $FlowFixMe[sketchy-null-mixed]
-    const newPointerEvents = style?.pointerEvents || pointerEvents;
-
     const actualView = (
       <ViewNativeComponent
         {...otherProps}
@@ -120,9 +112,6 @@ const View: React.AbstractComponent<
             : importantForAccessibility
         }
         nativeID={id ?? nativeID}
-        style={style}
-        // $FlowFixMe[incompatible-type]
-        pointerEvents={newPointerEvents}
         ref={forwardedRef}
       />
     );

package/Libraries/Components/View/View.win32.js

@@ -10,7 +10,6 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
@@ -71,7 +70,6 @@ const View: React.AbstractComponent<
       id,
       importantForAccessibility,
       nativeID,
-      pointerEvents,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -118,12 +116,6 @@ const View: React.AbstractComponent<
       };
     }
 
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    let style = flattenStyle(otherProps.style);
-
-    // $FlowFixMe[sketchy-null-mixed]
-    const newPointerEvents = style?.pointerEvents || pointerEvents;
-
     const _keyDown = (event: KeyEvent) => {
       if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
         // $FlowFixMe - keyDownEvents was already checked to not be undefined
@@ -253,9 +245,6 @@ const View: React.AbstractComponent<
                   : importantForAccessibility
               }
               nativeID={id ?? nativeID}
-              style={style}
-              // $FlowFixMe[incompatible-type]
-              pointerEvents={newPointerEvents}
               ref={forwardedRef}
               onKeyDown={_keyDown}
               onKeyDownCapture={_keyDownCapture}

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -88,6 +88,13 @@ export interface ViewPropsAndroid {
    */
   collapsable?: boolean | undefined;
 
+  /**
+   * Setting to false prevents direct children of the view from being removed
+   * from the native view hierarchy, similar to the effect of setting
+   * `collapsable={false}` on each child.
+   */
+  collapsableChildren?: boolean | undefined;
+
   /**
    * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
    *

package/Libraries/Components/View/ViewPropTypes.js

@@ -560,6 +560,13 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsable?: ?boolean,
 
+  /**
+   * Setting to false prevents direct children of the view from being removed
+   * from the native view hierarchy, similar to the effect of setting
+   * `collapsable={false}` on each child.
+   */
+  collapsableChildren?: ?boolean,
+
   /**
    * Contols whether this view, and its transitive children, are laid in a way
    * consistent with web browsers ('strict'), or consistent with existing

package/Libraries/Components/View/ViewPropTypes.win32.js

@@ -621,6 +621,13 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsable?: ?boolean,
 
+  /**
+   * Setting to false prevents direct children of the view from being removed
+   * from the native view hierarchy, similar to the effect of setting
+   * `collapsable={false}` on each child.
+   */
+  collapsableChildren?: ?boolean,
+
   /**
    * Contols whether this view, and its transitive children, are laid in a way
    * consistent with web browsers ('strict'), or consistent with existing