@office-iss/react-native-win32 0.0.0-canary.266 → 0.0.0-canary.267

package/.flowconfig

@@ -160,4 +160,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.246.0
+^0.247.1

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Thu, 10 Oct 2024 05:15:29 GMT",
+      "date": "Wed, 16 Oct 2024 05:19:58 GMT",
+      "version": "0.0.0-canary.267",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.267",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "tatianakapos@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "e265163b8cab921b5643d552775403b45c01bf6f",
+            "comment": "integrate rn nightly 0.77.0-nightly-20241001-223e98cc4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 10 Oct 2024 18:14:30 GMT",
       "version": "0.0.0-canary.266",
       "tag": "@office-iss/react-native-win32_v0.0.0-canary.266",
       "comments": {

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # Change Log - @office-iss/react-native-win32
 
-<!-- This log was last generated on Thu, 10 Oct 2024 05:15:29 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 16 Oct 2024 05:19:58 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## 0.0.0-canary.266
+## 0.0.0-canary.267
 
-Thu, 10 Oct 2024 05:15:29 GMT
+Wed, 16 Oct 2024 05:19:58 GMT
 
 ### Changes
 
-- Update to @react-native-community/cli@15.0.0-alpha.2 (jthysell@microsoft.com)
+- integrate rn nightly 0.77.0-nightly-20241001-223e98cc4 (tatianakapos@microsoft.com)
 
+## 0.0.0-canary.266
+
+Thu, 10 Oct 2024 18:14:30 GMT
+
+### Changes
+
+- Update to @react-native-community/cli@15.0.0-alpha.2 (jthysell@microsoft.com)
+
 ## 0.0.0-canary.265
 
 Mon, 07 Oct 2024 19:54:26 GMT

package/Libraries/Animated/animations/Animation.js

@@ -110,7 +110,10 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value);
 
-            if (this.__isLooping) {
+            if (
+              ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() &&
+              this.__isLooping
+            ) {
               return;
             }
 

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+module.exports =
+  require('../UnimplementedViews/UnimplementedView') as $FlowFixMe;

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -9,6 +9,7 @@
  */
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {DimensionsPayload} from '../../Utilities/NativeDeviceInfo';
 import type {
   ViewLayout,
   ViewLayoutEvent,
@@ -18,6 +19,7 @@ import type {KeyboardEvent, KeyboardMetrics} from './Keyboard';
 
 import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
 import StyleSheet from '../../StyleSheet/StyleSheet';
+import Dimensions from '../../Utilities/Dimensions';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
@@ -66,6 +68,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   viewRef: {current: React.ElementRef<typeof View> | null, ...};
   _initialFrameHeight: number = 0;
   _bottom: number = 0;
+  _windowWidth: number = Dimensions.get('window').width;
 
   constructor(props: Props) {
     super(props);
@@ -130,6 +133,10 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
   };
 
+  _onDimensionsChange = ({window}: DimensionsPayload) => {
+    this._windowWidth = window?.width ?? 0;
+  };
+
   // Avoid unnecessary renders if the KeyboardAvoidingView is disabled.
   _setBottom = (value: number) => {
     const enabled = this.props.enabled ?? true;
@@ -145,6 +152,15 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       return;
     }
 
+    if (
+      Platform.OS === 'ios' &&
+      this._windowWidth !== this._keyboardEvent.endCoordinates.width
+    ) {
+      // The keyboard is not the standard bottom-of-the-screen keyboard. For example, floating keyboard on iPadOS.
+      this._setBottom(0);
+      return;
+    }
+
     const {duration, easing, endCoordinates} = this._keyboardEvent;
     const height = await this._relativeKeyboardHeight(endCoordinates);
 
@@ -178,6 +194,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     if (Platform.OS === 'ios') {
       this._subscriptions = [
         Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Dimensions.addEventListener('change', this._onDimensionsChange),
       ];
     } else {
       this._subscriptions = [

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -80,6 +80,7 @@ export type ProgressBarAndroidProps = $ReadOnly<{|
  */
 const ProgressBarAndroid = (
   {
+    // $FlowFixMe[incompatible-type]
     styleAttr = 'Normal',
     indeterminate = true,
     animating = true,

package/Libraries/Components/Touchable/BoundingDimensions.js

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
+
 import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
@@ -19,11 +21,14 @@ const twoArgumentPooler = PooledClass.twoArgumentPooler;
  * @param {number} height Height of bounding rectangle.
  * @constructor BoundingDimensions
  */
-function BoundingDimensions(width, height) {
+// $FlowFixMe[missing-this-annot]
+function BoundingDimensions(width: number, height: number) {
   this.width = width;
   this.height = height;
 }
 
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[missing-this-annot]
 BoundingDimensions.prototype.destructor = function () {
   this.width = null;
   this.height = null;
@@ -33,13 +38,16 @@ BoundingDimensions.prototype.destructor = function () {
  * @param {HTMLElement} element Element to return `BoundingDimensions` for.
  * @return {BoundingDimensions} Bounding dimensions of `element`.
  */
-BoundingDimensions.getPooledFromElement = function (element) {
+BoundingDimensions.getPooledFromElement = function (
+  element: HTMLElement,
+): typeof BoundingDimensions {
+  // $FlowFixMe[prop-missing]
   return BoundingDimensions.getPooled(
     element.offsetWidth,
     element.offsetHeight,
   );
 };
 
-PooledClass.addPoolingTo(BoundingDimensions, twoArgumentPooler);
+PooledClass.addPoolingTo(BoundingDimensions as $FlowFixMe, twoArgumentPooler);
 
 module.exports = BoundingDimensions;

package/Libraries/Components/Touchable/Position.js

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
+
 import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
@@ -20,16 +22,19 @@ const twoArgumentPooler = PooledClass.twoArgumentPooler;
  * @param {number} windowStartKey Key that window starts at.
  * @param {number} windowEndKey Key that window ends at.
  */
-function Position(left, top) {
+// $FlowFixMe[missing-this-annot]
+function Position(left: number, top: number) {
   this.left = left;
   this.top = top;
 }
 
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[missing-this-annot]
 Position.prototype.destructor = function () {
   this.left = null;
   this.top = null;
 };
 
-PooledClass.addPoolingTo(Position, twoArgumentPooler);
+PooledClass.addPoolingTo(Position as $FlowFixMe, twoArgumentPooler);
 
 module.exports = Position;

package/Libraries/Components/Touchable/Touchable.js

@@ -713,13 +713,17 @@ const TouchableMixin = {
       return;
     }
     this.state.touchable.positionOnActivate &&
+      // $FlowFixMe[prop-missing]
       Position.release(this.state.touchable.positionOnActivate);
     this.state.touchable.dimensionsOnActivate &&
+      // $FlowFixMe[prop-missing]
       BoundingDimensions.release(this.state.touchable.dimensionsOnActivate);
+    // $FlowFixMe[prop-missing]
     this.state.touchable.positionOnActivate = Position.getPooled(
       globalX,
       globalY,
     );
+    // $FlowFixMe[prop-missing]
     this.state.touchable.dimensionsOnActivate = BoundingDimensions.getPooled(
       w,
       h,

package/Libraries/Components/Touchable/Touchable.win32.js

@@ -718,13 +718,17 @@ const TouchableMixin = {
       return;
     }
     this.state.touchable.positionOnActivate &&
+      // $FlowFixMe[prop-missing]
       Position.release(this.state.touchable.positionOnActivate);
     this.state.touchable.dimensionsOnActivate &&
+      // $FlowFixMe[prop-missing]
       BoundingDimensions.release(this.state.touchable.dimensionsOnActivate);
+    // $FlowFixMe[prop-missing]
     this.state.touchable.positionOnActivate = Position.getPooled(
       globalX,
       globalY,
     );
+    // $FlowFixMe[prop-missing]
     this.state.touchable.dimensionsOnActivate = BoundingDimensions.getPooled(
       w,
       h,

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -125,7 +125,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * MixBlendMode
    */
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
 
   /**
    * Isolation

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 77,
   patch: 0,
-  prerelease: 'nightly-20240921-1747f57c6',
+  prerelease: 'nightly-20241001-223e98cc4',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpReactDevTools.js

@@ -15,9 +15,30 @@ import type {Domain} from '../../src/private/fusebox/setUpFuseboxReactDevToolsDi
 if (__DEV__) {
   // Register dispatcher on global, which can be used later by Chrome DevTools frontend
   require('../../src/private/fusebox/setUpFuseboxReactDevToolsDispatcher');
-
+  const {
+    initialize,
+    connectToDevTools,
+    connectWithCustomMessagingProtocol,
+  } = require('react-devtools-core');
+
+  const reactDevToolsSettingsManager = require('../../src/private/reactdevtools/ReactDevToolsSettingsManager');
+  const serializedHookSettings =
+    reactDevToolsSettingsManager.getGlobalHookSettings();
+
+  let hookSettings = null;
+  if (serializedHookSettings != null) {
+    try {
+      const parsedSettings = JSON.parse(serializedHookSettings);
+      hookSettings = parsedSettings;
+    } catch {
+      console.error(
+        'Failed to parse persisted React DevTools hook settings. React DevTools will be initialized with default settings.',
+      );
+    }
+  }
   // Install hook before React is loaded.
-  const reactDevTools = require('react-devtools-core');
+  initialize(hookSettings);
+
   // This should be defined in DEV, otherwise error is expected.
   const fuseboxReactDevToolsDispatcher =
     global.__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__;
@@ -25,9 +46,14 @@ if (__DEV__) {
     fuseboxReactDevToolsDispatcher.BINDING_NAME;
 
   const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-  const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
   const resolveRNStyle = require('../StyleSheet/flattenStyle');
 
+  function handleReactDevToolsSettingsUpdate(settings: Object) {
+    reactDevToolsSettingsManager.setGlobalHookSettings(
+      JSON.stringify(settings),
+    );
+  }
+
   let disconnect = null;
   function disconnectBackendFromReactDevToolsInFuseboxIfNeeded() {
     if (disconnect != null) {
@@ -37,7 +63,7 @@ if (__DEV__) {
   }
 
   function connectToReactDevToolsInFusebox(domain: Domain) {
-    disconnect = reactDevTools.connectWithCustomMessagingProtocol({
+    disconnect = connectWithCustomMessagingProtocol({
       onSubscribe: listener => {
         domain.onMessage.addEventListener(listener);
       },
@@ -47,9 +73,9 @@ if (__DEV__) {
       onMessage: (event, payload) => {
         domain.sendMessage({event, payload});
       },
-      settingsManager: devToolsSettingsManager,
       nativeStyleEditorValidAttributes: Object.keys(ReactNativeStyleAttributes),
       resolveRNStyle,
+      onSettingsUpdated: handleReactDevToolsSettingsUpdate,
     });
   }
 
@@ -101,14 +127,14 @@ if (__DEV__) {
         isWebSocketOpen = true;
       });
 
-      reactDevTools.connectToDevTools({
+      connectToDevTools({
         isAppActive,
         resolveRNStyle,
         nativeStyleEditorValidAttributes: Object.keys(
           ReactNativeStyleAttributes,
         ),
         websocket: ws,
-        devToolsSettingsManager,
+        onSettingsUpdated: handleReactDevToolsSettingsUpdate,
       });
     }
   }

package/Libraries/Inspector/NetworkOverlay.js

@@ -143,6 +143,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     });
 
     XHRInterceptor.setRequestHeaderCallback((header, value, xhr) => {
+      // $FlowFixMe[prop-missing]
       const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
       if (xhrIndex === -1) {
         return;
@@ -159,6 +160,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     });
 
     XHRInterceptor.setSendCallback((data, xhr) => {
+      // $FlowFixMe[prop-missing]
       const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
       if (xhrIndex === -1) {
         return;
@@ -173,6 +175,7 @@ class NetworkOverlay extends React.Component<Props, State> {
 
     XHRInterceptor.setHeaderReceivedCallback(
       (type, size, responseHeaders, xhr) => {
+        // $FlowFixMe[prop-missing]
         const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
         if (xhrIndex === -1) {
           return;
@@ -190,6 +193,7 @@ class NetworkOverlay extends React.Component<Props, State> {
 
     XHRInterceptor.setResponseCallback(
       (status, timeout, response, responseURL, responseType, xhr) => {
+        // $FlowFixMe[prop-missing]
         const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
         if (xhrIndex === -1) {
           return;

package/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -78,20 +78,15 @@ export default function ReactDevToolsOverlay({
         x,
         y,
         viewData => {
-          const {touchedViewTag, closestInstance, frame} = viewData;
-          if (closestInstance != null || touchedViewTag != null) {
-            // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
-            // this makes sure it works for both architectures.
-            reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
-            if (closestInstance != null) {
-              reactDevToolsAgent.selectNode(closestInstance);
-            }
-            setInspected({
-              frame,
-            });
-            return true;
+          const {frame, closestPublicInstance} = viewData;
+
+          if (closestPublicInstance == null) {
+            return false;
           }
-          return false;
+
+          reactDevToolsAgent.selectNode(closestPublicInstance);
+          setInspected({frame});
+          return true;
         },
       );
     },

package/Libraries/Interaction/TouchHistoryMath.js

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
+// $FlowFixMe[definition-cycle]
+// $FlowFixMe[recursive-definition]
 const TouchHistoryMath = {
   /**
    * This code is optimized and not intended to look beautiful. This allows
@@ -25,11 +28,11 @@ const TouchHistoryMath = {
    * @return {number} value of centroid in specified dimension.
    */
   centroidDimension: function (
-    touchHistory,
-    touchesChangedAfter,
-    isXAxis,
-    ofCurrent,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+    isXAxis: boolean,
+    ofCurrent: boolean,
+  ): number {
     const touchBank = touchHistory.touchBank;
     let total = 0;
     let count = 0;
@@ -82,9 +85,9 @@ const TouchHistoryMath = {
   },
 
   currentCentroidXOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -94,9 +97,9 @@ const TouchHistoryMath = {
   },
 
   currentCentroidYOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -106,9 +109,9 @@ const TouchHistoryMath = {
   },
 
   previousCentroidXOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -118,9 +121,9 @@ const TouchHistoryMath = {
   },
 
   previousCentroidYOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -129,7 +132,7 @@ const TouchHistoryMath = {
     );
   },
 
-  currentCentroidX: function (touchHistory) {
+  currentCentroidX: function (touchHistory: TouchHistoryMath): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       0, // touchesChangedAfter
@@ -138,7 +141,7 @@ const TouchHistoryMath = {
     );
   },
 
-  currentCentroidY: function (touchHistory) {
+  currentCentroidY: function (touchHistory: TouchHistoryMath): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       0, // touchesChangedAfter

package/Libraries/LogBox/Data/LogBoxData.js

@@ -82,9 +82,9 @@ let warningFilter: WarningFilter = function (format) {
   return {
     finalFormat: format,
     forceDialogImmediately: false,
-    suppressDialog_LEGACY: true,
+    suppressDialog_LEGACY: false,
     suppressCompletely: false,
-    monitorEvent: 'unknown',
+    monitorEvent: 'warning_unhandled',
     monitorListVersion: 0,
     monitorSampleRate: 1,
   };

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -175,7 +175,7 @@ const validAttributesForNonEventProps = {
   filter: {
     process: require('../StyleSheet/processFilter').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
   opacity: true,
   elevation: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -231,7 +231,7 @@ const validAttributesForNonEventProps = {
   boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
 
   borderTopWidth: true,

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -228,7 +228,7 @@ const validAttributesForNonEventProps = {
   boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
 
   borderTopWidth: true,