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

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -90,6 +90,8 @@ type DataDetectorTypes =
   | 'none'
   | 'all';
 
+export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
+
 /**
  * DocumentSelectionState is responsible for maintaining selection information
  * for a document.
@@ -649,11 +651,39 @@ export interface TextInputProps
   autoFocus?: boolean | undefined;
 
   /**
-   * If true, the text field will blur when submitted.
-   * The default value is true.
+   * If `true`, the text field will blur when submitted.
+   * The default value is true for single-line fields and false for
+   * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
+   * to `true` means that pressing return will blur the field and trigger the
+   * `onSubmitEditing` event instead of inserting a newline into the field.
+   *
+   * @deprecated
+   * Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
+   * override any behavior defined by `blurOnSubmit`.
+   * @see submitBehavior
    */
   blurOnSubmit?: boolean | undefined;
 
+  /**
+   * When the return key is pressed,
+   *
+   * For single line inputs:
+   *
+   * - `'newline`' defaults to `'blurAndSubmit'`
+   * - `undefined` defaults to `'blurAndSubmit'`
+   *
+   * For multiline inputs:
+   *
+   * - `'newline'` adds a newline
+   * - `undefined` defaults to `'newline'`
+   *
+   * For both single line and multiline inputs:
+   *
+   * - `'submit'` will only send a submit event and not blur the input
+   * - `'blurAndSubmit`' will both blur the input and send a submit event
+   */
+  submitBehavior?: SubmitBehavior | undefined;
+
   /**
    * If true, caret is hidden. The default value is false.
    */

package/Libraries/Components/TextInput/TextInput.js

@@ -9,6 +9,7 @@
  */
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -1534,10 +1535,18 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  let style = flattenStyle<TextStyleProp>(props.style);
-  if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe
-    style = [style, {fontWeight: style.fontWeight.toString()}];
+  // Keep the original (potentially nested) style when possible, as React can diff these more efficiently
+  let _style = props.style;
+  const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
+  if (typeof flattenedStyle?.fontWeight === 'number') {
+    _style = [
+      _style,
+      {
+        fontWeight:
+          // $FlowFixMe[incompatible-cast]
+          (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']),
+      },
+    ];
   }
 
   if (Platform.OS === 'ios') {
@@ -1548,10 +1557,10 @@ function InternalTextInput(props: Props): React.Node {
 
     const useMultilineDefaultStyle =
       props.multiline === true &&
-      (style == null ||
-        (style.padding == null &&
-          style.paddingVertical == null &&
-          style.paddingTop == null));
+      (flattenedStyle == null ||
+        (flattenedStyle.padding == null &&
+          flattenedStyle.paddingVertical == null &&
+          flattenedStyle.paddingTop == null));
 
     textInput = (
       <RCTTextInputView
@@ -1578,7 +1587,7 @@ function InternalTextInput(props: Props): React.Node {
         selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
-          style,
+          _style,
         )}
         text={text}
       />
@@ -1645,7 +1654,7 @@ function InternalTextInput(props: Props): React.Node {
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         placeholder={placeholder}
-        style={style}
+        style={_style}
         text={text}
         textBreakStrategy={props.textBreakStrategy}
       />

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

@@ -9,6 +9,7 @@
  */
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -1641,10 +1642,18 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  let style = flattenStyle<TextStyleProp>(props.style);
-  if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe
-    style = [style, {fontWeight: style.fontWeight.toString()}];
+  // Keep the original (potentially nested) style when possible, as React can diff these more efficiently
+  let _style = props.style;
+  const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
+  if (typeof flattenedStyle?.fontWeight === 'number') {
+    _style = [
+      _style,
+      {
+        fontWeight:
+          // $FlowFixMe[incompatible-cast]
+          (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']),
+      },
+    ];
   }
 
   if (Platform.OS === 'ios') {
@@ -1655,10 +1664,10 @@ function InternalTextInput(props: Props): React.Node {
 
     const useMultilineDefaultStyle =
       props.multiline === true &&
-      (style == null ||
-        (style.padding == null &&
-          style.paddingVertical == null &&
-          style.paddingTop == null));
+      (flattenedStyle == null ||
+        (flattenedStyle.padding == null &&
+          flattenedStyle.paddingVertical == null &&
+          flattenedStyle.paddingTop == null));
 
     textInput = (
       <RCTTextInputView
@@ -1686,7 +1695,7 @@ function InternalTextInput(props: Props): React.Node {
         selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
-          style,
+          _style,
         )}
         text={text}
       />
@@ -1754,7 +1763,7 @@ function InternalTextInput(props: Props): React.Node {
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         placeholder={placeholder}
-        style={style}
+        style={_style}
         text={text}
         textBreakStrategy={props.textBreakStrategy}
       />

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -11,6 +11,7 @@
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
+import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
@@ -126,11 +127,21 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    */
   experimental_mixBlendMode: true,
 
+  /**
+   * Isolation
+   */
+  isolation: true,
+
   /*
    * BoxShadow
    */
   experimental_boxShadow: {process: processBoxShadow},
 
+  /**
+   * Linear Gradient
+   */
+  experimental_backgroundImage: {process: processBackgroundImage},
+
   /**
    * View
    */

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -22,6 +22,8 @@ const UIView = {
   accessibilityValue: true,
   accessibilityHint: true,
   accessibilityLanguage: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,

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

@@ -22,6 +22,8 @@ const UIView = {
   accessibilityValue: true,
   accessibilityHint: true,
   accessibilityLanguage: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,

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

@@ -366,6 +366,21 @@ export interface AccessibilityPropsIOS {
    * @platform ios
    */
   accessibilityLanguage?: string | undefined;
+
+  /**
+   * A Boolean value that indicates whether or not to show the item in the large content viewer.
+   * Available on iOS 13.0+
+   * https://reactnative.dev/docs/accessibility#accessibilityshowslargecontentviewer
+   * @platform ios
+   */
+  accessibilityShowsLargeContentViewer?: boolean | undefined;
+
+  /**
+   * When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer.
+   * https://reactnative.dev/docs/accessibility#accessibilitylargecontenttitle
+   * @platform ios
+   */
+  accessibilityLargeContentTitle?: string | undefined;
 }
 
 // [Win32]

package/Libraries/Components/View/ViewNativeComponent.js

@@ -94,11 +94,17 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBlockStartColor: {
             process: require('../../StyleSheet/processColor').default,
           },
+          experimental_boxShadow: {
+            process: require('../../StyleSheet/processBoxShadow').default,
+          },
 
           focusable: true,
           overflow: true,
           backfaceVisibility: true,
           experimental_layoutConformance: true,
+          experimental_backgroundImage: {
+            process: require('../../StyleSheet/processBackgroundImage').default,
+          },
         },
       }
     : {

package/Libraries/Components/View/ViewPropTypes.js

@@ -415,6 +415,20 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityViewIsModal?: ?boolean,
 
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
   /**
    * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
    * should be accessible to the user.

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

@@ -416,6 +416,20 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityViewIsModal?: ?boolean,
 
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
   /**
    * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
    * should be accessible to the user.

package/Libraries/Core/InitializeCore.js

@@ -29,7 +29,7 @@
 const start = Date.now();
 
 require('./setUpGlobals');
-require('../../src/private/core/setUpDOM');
+require('../../src/private/setup/setUpDOM').default();
 require('./setUpPerformance');
 require('./setUpErrorHandling');
 require('./polyfillPromise');

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 76,
   patch: 0,
-  prerelease: 'nightly-20240719-6d56cea28',
+  prerelease: 'nightly-20240824-09e88448c',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpErrorHandling.js

@@ -21,7 +21,13 @@ ExceptionsManager.installConsoleErrorReporter();
 if (!global.__fbDisableExceptionsManager) {
   const handleError = (e: mixed, isFatal: boolean) => {
     try {
-      ExceptionsManager.handleException(e, isFatal);
+      // TODO(T196834299): We should really use a c++ turbomodule for this
+      if (
+        !global.RN$handleException ||
+        !global.RN$handleException(e, isFatal)
+      ) {
+        ExceptionsManager.handleException(e, isFatal);
+      }
     } catch (ee) {
       console.log('Failed to print error: ', ee.message);
       throw e;

package/Libraries/Image/AssetSourceResolver.js

@@ -18,7 +18,10 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets-registry/registry';
+import type {
+  AssetDestPathResolver,
+  PackagerAsset,
+} from '@react-native/assets-registry/registry';
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
@@ -76,6 +79,10 @@ class AssetSourceResolver {
       return this.assetServerURL();
     }
 
+    if (this.asset.resolver != null) {
+      return this.getAssetUsingResolver(this.asset.resolver);
+    }
+
     if (Platform.OS === 'android') {
       return this.isLoadedFromFileSystem()
         ? this.drawableFolderInBundle()
@@ -85,6 +92,26 @@ class AssetSourceResolver {
     }
   }
 
+  getAssetUsingResolver(resolver: AssetDestPathResolver): ResolvedAssetSource {
+    switch (resolver) {
+      case 'android':
+        return this.isLoadedFromFileSystem()
+          ? this.drawableFolderInBundle()
+          : this.resourceIdentifierWithoutScale();
+      case 'generic':
+        return this.scaledAssetURLNearBundle();
+      default:
+        throw new Error(
+          "Don't know how to get asset via provided resolver: " +
+            resolver +
+            '\nAsset: ' +
+            JSON.stringify(this.asset, null, '\t') +
+            '\nPossible resolvers are:' +
+            JSON.stringify(['android', 'generic'], null, '\t'),
+        );
+    }
+  }
+
   /**
    * Returns an absolute URL which can be used to fetch the asset
    * from the devserver

package/Libraries/Image/Image.android.js

@@ -150,24 +150,20 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       );
     }
 
-    let style;
+    let style: ImageStyleProp;
     let sources;
     if (Array.isArray(source)) {
-      style = flattenStyle<ImageStyleProp>([styles.base, props.style]);
+      style = [styles.base, props.style];
       sources = source;
     } else {
       const {uri} = source;
-      const width = source.width ?? props.width;
-      const height = source.height ?? props.height;
-      style = flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]);
-      sources = [source];
       if (uri === '') {
         console.warn('source.uri should not be an empty string');
       }
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = [{width, height}, styles.base, props.style];
+      sources = [source];
     }
 
     const {height, width, ...restProps} = props;
@@ -203,11 +199,10 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       },
     };
 
-    const objectFit = style?.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
     const resizeMode =
-      objectFit || props.resizeMode || style?.resizeMode || 'cover';
+      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
 
     const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 

package/Libraries/Image/Image.ios.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
@@ -112,38 +112,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/Image.win32.js

@@ -131,38 +131,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/ImageBackground.js

@@ -55,14 +55,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
 
   _viewRef: ?React.ElementRef<typeof View> = null;
 
-  _captureRef = (
-    ref: null | React$ElementRef<
-      React$AbstractComponent<
-        ViewProps,
-        React.ElementRef<HostComponent<ViewProps>>,
-      >,
-    >,
-  ) => {
+  _captureRef = (ref: null | React.ElementRef<HostComponent<ViewProps>>) => {
     this._viewRef = ref;
   };
 

package/Libraries/Image/ImageUtils.js

@@ -10,13 +10,13 @@
 
 type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
 
-export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
-  const objectFitMap = {
-    contain: 'contain',
-    cover: 'cover',
-    fill: 'stretch',
-    'scale-down': 'contain',
-  };
-  // $FlowFixMe[invalid-computed-prop]
-  return objectFitMap[objectFit];
+const objectFitMap: {[string]: ResizeMode} = {
+  contain: 'contain',
+  cover: 'cover',
+  fill: 'stretch',
+  'scale-down': 'contain',
+};
+
+export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode {
+  return objectFit != null ? objectFitMap[objectFit] : undefined;
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -113,6 +113,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBottomRightRadius: true,
           borderTopRightRadius: true,
           loadingIndicatorSrc: true,
+          experimental_boxShadow: {
+            process: require('../StyleSheet/processBoxShadow').default,
+          },
         },
       }
     : {

package/Libraries/Inspector/NetworkOverlay.js

@@ -335,7 +335,7 @@ class NetworkOverlay extends React.Component<Props, State> {
   _renderItem = ({
     item,
     index,
-  }: RenderItemProps<NetworkRequestInfo>): React.Element<any> => {
+  }: RenderItemProps<NetworkRequestInfo>): React.MixedElement => {
     const tableRowViewStyle = [
       styles.tableRow,
       index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,

package/Libraries/Lists/FlatList.js

@@ -617,7 +617,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _renderer = (
-    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
     renderItem: ?RenderItemType<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,

package/Libraries/Lists/SectionList.js

@@ -33,7 +33,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */

package/Libraries/Lists/SectionListModern.js

@@ -16,7 +16,7 @@ import type {
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
-import type {AbstractComponent, Element, ElementRef} from 'react';
+import type {AbstractComponent, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native/virtualized-lists';
@@ -34,7 +34,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
@@ -56,7 +56,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | Element<any>,
+  }) => null | React.MixedElement,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the