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

package/.flowconfig

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

package/CHANGELOG.json

@@ -2,7 +2,61 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Thu, 10 Oct 2024 05:15:29 GMT",
+      "date": "Sat, 19 Oct 2024 05:27:56 GMT",
+      "version": "0.0.0-canary.268",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.268",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "jthysell@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "d0c7fa8199238da974905788351a45694fa39e57",
+            "comment": "Fix repo linting with prettier"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/eslint-config to v1.2.30",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.34",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @rnw-scripts/just-task to v2.3.47",
+            "commit": "not available"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump react-native-platform-override to v1.9.49",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 16 Oct 2024 05:20:54 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,37 @@
 # 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 Sat, 19 Oct 2024 05:27:56 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## 0.0.0-canary.266
+## 0.0.0-canary.268
 
-Thu, 10 Oct 2024 05:15:29 GMT
+Sat, 19 Oct 2024 05:27:56 GMT
 
 ### Changes
 
-- Update to @react-native-community/cli@15.0.0-alpha.2 (jthysell@microsoft.com)
+- Fix repo linting with prettier (jthysell@microsoft.com)
+- Bump @rnw-scripts/eslint-config to v1.2.30
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.1.34
+- Bump @rnw-scripts/just-task to v2.3.47
+- Bump react-native-platform-override to v1.9.49
 
+## 0.0.0-canary.267
+
+Wed, 16 Oct 2024 05:20:54 GMT
+
+### Changes
+
+- 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/AccessibilityInfo/AccessibilityInfo.win32.js

@@ -56,21 +56,21 @@ const EventNames: Map<
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
     ])
   : Platform.OS === 'win32'
-  ? new Map([
-      ['change', 'TOUCH_EXPLORATION_EVENT'],
-      ['reduceMotionChanged', 'REDUCE_MOTION_EVENT'],
-      ['screenReaderChanged', 'TOUCH_EXPLORATION_EVENT'],
-    ])
-  : new Map([
-      ['announcementFinished', 'announcementFinished'],
-      ['boldTextChanged', 'boldTextChanged'],
-      ['change', 'screenReaderChanged'],
-      ['grayscaleChanged', 'grayscaleChanged'],
-      ['invertColorsChanged', 'invertColorsChanged'],
-      ['reduceMotionChanged', 'reduceMotionChanged'],
-      ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
-      ['screenReaderChanged', 'screenReaderChanged'],
-    ]);
+    ? new Map([
+        ['change', 'TOUCH_EXPLORATION_EVENT'],
+        ['reduceMotionChanged', 'REDUCE_MOTION_EVENT'],
+        ['screenReaderChanged', 'TOUCH_EXPLORATION_EVENT'],
+      ])
+    : new Map([
+        ['announcementFinished', 'announcementFinished'],
+        ['boldTextChanged', 'boldTextChanged'],
+        ['change', 'screenReaderChanged'],
+        ['grayscaleChanged', 'grayscaleChanged'],
+        ['invertColorsChanged', 'invertColorsChanged'],
+        ['reduceMotionChanged', 'reduceMotionChanged'],
+        ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
+        ['screenReaderChanged', 'screenReaderChanged'],
+      ]);
 
 /**
  * Sometimes it's useful to know whether or not the device has a screen reader

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/TextInput/TextInput.win32.js

@@ -1344,14 +1344,15 @@ function InternalTextInput(props: Props): React.Node {
     typeof props.value === 'string'
       ? props.value
       : typeof props.defaultValue === 'string'
-      ? props.defaultValue
-      : '';
+        ? props.defaultValue
+        : '';
 
   const viewCommands =
-    WindowsTextInputCommands || AndroidTextInputCommands || // [Windows]
+    WindowsTextInputCommands || // [Windows]
+    AndroidTextInputCommands ||
     (props.multiline === true
       ? RCTMultilineTextInputNativeCommands
-      : RCTSinglelineTextInputNativeCommands)
+      : RCTSinglelineTextInputNativeCommands);
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
   const useTextInputStateSynchronization =
@@ -1425,8 +1426,12 @@ function InternalTextInput(props: Props): React.Node {
             }
           },
           isFocused(): boolean {
-            const currentlyFocusedInput = TextInputState.currentlyFocusedInput();
-            return currentlyFocusedInput !== null && currentlyFocusedInput === inputRef.current;
+            const currentlyFocusedInput =
+              TextInputState.currentlyFocusedInput();
+            return (
+              currentlyFocusedInput !== null &&
+              currentlyFocusedInput === inputRef.current
+            );
           },
           getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
             return inputRef.current;
@@ -1970,12 +1975,12 @@ const ExportedForwardRef: React.AbstractComponent<
         textContentType != null
           ? textContentType
           : Platform.OS === 'ios' &&
-            autoComplete &&
-            autoComplete in autoCompleteWebToTextContentTypeMap
-          ? // $FlowFixMe[invalid-computed-prop]
-            // $FlowFixMe[prop-missing]
-            autoCompleteWebToTextContentTypeMap[autoComplete]
-          : textContentType
+              autoComplete &&
+              autoComplete in autoCompleteWebToTextContentTypeMap
+            ? // $FlowFixMe[invalid-computed-prop]
+              // $FlowFixMe[prop-missing]
+              autoCompleteWebToTextContentTypeMap[autoComplete]
+            : textContentType
       }
       {...restProps}
       forwardedRef={forwardedRef}

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

@@ -45,8 +45,8 @@ const extractSingleTouch = (nativeEvent: {
   return !hasTouches && hasChangedTouches
     ? changedTouches[0]
     : hasTouches
-    ? touches[0]
-    : nativeEvent;
+      ? touches[0]
+      : nativeEvent;
 };
 
 /**
@@ -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/Components/View/ViewWin32.js

@@ -113,9 +113,9 @@ const ViewWin32: React.AbstractComponent<
           ? // $FlowFixMe[exponential-spread]
             {accessibilityDescribedBy: describedByTarget}
           : // $FlowFixMe[exponential-spread]
-          typeof accessibilityDescribedBy === 'string'
-          ? {accessibilityDescribedBy}
-          : {})}
+            typeof accessibilityDescribedBy === 'string'
+            ? {accessibilityDescribedBy}
+            : {})}
         {...(typeof accessibilityControls === 'string'
           ? {accessibilityControls}
           : {})}

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;
         },
       );
     },