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

package/.flowconfig

@@ -159,4 +159,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.241.0
+^0.243.0

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@office-iss/react-native-win32",
   "entries": [
     {
-      "date": "Thu, 22 Aug 2024 05:23:05 GMT",
+      "date": "Wed, 28 Aug 2024 05:14:05 GMT",
+      "version": "0.0.0-canary.260",
+      "tag": "@office-iss/react-native-win32_v0.0.0-canary.260",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "tatianakapos@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "98197a259f5e7c97c877e361dd70b048343e65a8",
+            "comment": "integrate 0.76.0-nightly-20240816-17017d2b8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 22 Aug 2024 05:24:27 GMT",
       "version": "0.0.0-canary.259",
       "tag": "@office-iss/react-native-win32_v0.0.0-canary.259",
       "comments": {

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Thu, 22 Aug 2024 05:23:05 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Aug 2024 05:14:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.0.0-canary.259
+## 0.0.0-canary.260
 
-Thu, 22 Aug 2024 05:23:05 GMT
+Wed, 28 Aug 2024 05:14:05 GMT
 
 ### Changes
 
-- integrate react native nightly 7-19 (tatianakapos@microsoft.com)
+- integrate 0.76.0-nightly-20240816-17017d2b8 (tatianakapos@microsoft.com)
 
+## 0.0.0-canary.259
+
+Thu, 22 Aug 2024 05:24:27 GMT
+
+### Changes
+
+- integrate react native nightly 7-19 (tatianakapos@microsoft.com)
+
 ## 0.0.0-canary.258
 
 Thu, 08 Aug 2024 05:16:47 GMT

package/Libraries/Animated/AnimatedImplementation.js

@@ -39,7 +39,7 @@ import AnimatedValue from './nodes/AnimatedValue';
 import AnimatedValueXY from './nodes/AnimatedValueXY';
 
 export type CompositeAnimation = {
-  start: (callback?: ?EndCallback) => void,
+  start: (callback?: ?EndCallback, isLooping?: boolean) => void,
   stop: () => void,
   reset: () => void,
   _startNativeLoop: (iterations?: number) => void,
@@ -234,8 +234,8 @@ const timing = function (
 
   return (
     maybeVectorAnim(value, config, timing) || {
-      start: function (callback?: ?EndCallback): void {
-        start(value, config, callback);
+      start: function (callback?: ?EndCallback, isLooping?: boolean): void {
+        start(value, {...config, isLooping}, callback);
       },
 
       stop: function (): void {
@@ -305,7 +305,7 @@ const sequence = function (
 ): CompositeAnimation {
   let current = 0;
   return {
-    start: function (callback?: ?EndCallback) {
+    start: function (callback?: ?EndCallback, isLooping?: boolean) {
       const onComplete = function (result: EndResult) {
         if (!result.finished) {
           callback && callback(result);
@@ -321,13 +321,13 @@ const sequence = function (
           return;
         }
 
-        animations[current].start(onComplete);
+        animations[current].start(onComplete, isLooping);
       };
 
       if (animations.length === 0) {
         callback && callback({finished: true});
       } else {
-        animations[current].start(onComplete);
+        animations[current].start(onComplete, isLooping);
       }
     },
 
@@ -477,7 +477,7 @@ const loop = function (
         } else {
           iterationsSoFar++;
           resetBeforeIteration && animation.reset();
-          animation.start(restart);
+          animation.start(restart, iterations === -1);
         }
       };
       if (!animation || iterations === 0) {

package/Libraries/Animated/animations/Animation.js

@@ -14,6 +14,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedProps from '../nodes/AnimatedProps';
 
@@ -26,6 +27,7 @@ export type AnimationConfig = {
   platformConfig?: PlatformConfig,
   onComplete?: ?EndCallback,
   iterations?: number,
+  isLooping?: boolean,
 };
 
 let startNativeAnimationNextId = 1;
@@ -38,6 +40,7 @@ export default class Animation {
   __isInteraction: boolean;
   __onEnd: ?EndCallback;
   __iterations: number;
+  __isLooping: ?boolean;
 
   _nativeId: number;
 
@@ -107,6 +110,13 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value);
 
+            if (
+              ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() &&
+              this.__isLooping
+            ) {
+              return;
+            }
+
             // Once the JS side node is synced with the updated values, trigger an
             // update on the AnimatedProps nodes to call any registered callbacks.
             this.__findAnimatedPropsNodes(animatedValue).forEach(node =>

package/Libraries/Animated/animations/TimingAnimation.js

@@ -80,6 +80,7 @@ export default class TimingAnimation extends Animation {
     this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
     this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
+    this.__isLooping = config.isLooping;
   }
 
   __getNativeAnimationConfig(): any {

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -71,7 +71,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     props: {
       ...React.ElementConfig<typeof ScrollView>,
       // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: React.Element<any>,
+      refreshControl: ExactReactElement_DEPRECATED<any>,
     },
     forwardedRef:
       | {current: Instance | null, ...}
@@ -97,7 +97,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     >(intermediatePropsForRefreshControl);
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
-    const refreshControl: React.Element<typeof RefreshControl> =
+    const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
       React.cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import composeStyles from '../../src/private/core/composeStyles';
+import composeStyles from '../../src/private/styles/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';

package/Libraries/Animated/useAnimatedProps.js

@@ -10,12 +10,17 @@
 
 'use strict';
 
+import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
+
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+import useDebouncedEffect from '../../src/private/hooks/useDebouncedEffect';
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
+import AnimatedNode from './nodes/AnimatedNode';
 import AnimatedProps from './nodes/AnimatedProps';
+import AnimatedValue from './nodes/AnimatedValue';
 import {
   useCallback,
   useEffect,
@@ -32,6 +37,11 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => mixed;
 
+type AnimatedValueListeners = Array<{
+  propValue: AnimatedValue,
+  listenerId: string,
+}>;
+
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
 ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
@@ -152,6 +162,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
 
       const target = getEventTarget(instance);
       const events = [];
+      const animatedValueListeners: AnimatedValueListeners = [];
 
       for (const propName in props) {
         // $FlowFixMe[invalid-computed-prop]
@@ -159,6 +170,8 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         if (propValue instanceof AnimatedEvent && propValue.__isNative) {
           propValue.__attach(target, propName);
           events.push([propName, propValue]);
+          // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
+          addListenersToPropsValue(propValue, animatedValueListeners);
         }
       }
 
@@ -168,6 +181,10 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         for (const [propName, propValue] of events) {
           propValue.__detach(target, propName);
         }
+
+        for (const {propValue, listenerId} of animatedValueListeners) {
+          propValue.removeListener(listenerId);
+        }
       };
     },
     [
@@ -182,9 +199,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   return [reduceAnimatedProps<TProps>(node), callbackRef];
 }
 
-function reduceAnimatedProps<TProps>(
-  node: AnimatedProps,
-): ReducedProps<TProps> {
+function reduceAnimatedProps<TProps>(node: AnimatedNode): ReducedProps<TProps> {
   // Force `collapsable` to be false so that the native view is not flattened.
   // Flattened views cannot be accurately referenced by the native driver.
   return {
@@ -193,6 +208,35 @@ function reduceAnimatedProps<TProps>(
   };
 }
 
+function addListenersToPropsValue(
+  propValue: AnimatedValue,
+  accumulator: AnimatedValueListeners,
+) {
+  // propValue can be a scalar value, an array or an object.
+  if (propValue instanceof AnimatedValue) {
+    const listenerId = propValue.addListener(() => {});
+    accumulator.push({propValue, listenerId});
+  } else if (Array.isArray(propValue)) {
+    // An array can be an array of scalar values, arrays of arrays, or arrays of objects
+    for (const prop of propValue) {
+      addListenersToPropsValue(prop, accumulator);
+    }
+  } else if (propValue instanceof Object) {
+    addAnimatedValuesListenersToProps(propValue, accumulator);
+  }
+}
+
+function addAnimatedValuesListenersToProps(
+  props: AnimatedNode,
+  accumulator: AnimatedValueListeners,
+) {
+  for (const propName in props) {
+    // $FlowFixMe[prop-missing] - This is an object contained in a prop, but we don't know the exact type.
+    const propValue = props[propName];
+    addListenersToPropsValue(propValue, accumulator);
+  }
+}
+
 /**
  * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
  * and `__detach`. However, this is more complicated because `AnimatedProps`
@@ -203,12 +247,30 @@ function reduceAnimatedProps<TProps>(
 function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
+  const userDrivenAnimationEndedListener = useRef<?EventSubscription>(null);
 
   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();
+
+    if (node.__isNative) {
+      userDrivenAnimationEndedListener.current =
+        NativeAnimatedHelper.nativeEventEmitter.addListener(
+          'onUserDrivenAnimationEnded',
+          data => {
+            node.update();
+          },
+        );
+    }
+
+    return () => {
+      if (userDrivenAnimationEndedListener.current) {
+        userDrivenAnimationEndedListener.current?.remove();
+        userDrivenAnimationEndedListener.current = null;
+      }
+    };
   });
 
   useLayoutEffect(() => {
@@ -265,7 +327,12 @@ function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
     };
   }, []);
 
-  useEffect(() => {
+  const useEffectImpl =
+    ReactNativeFeatureFlags.shouldUseDebouncedEffectsForAnimated()
+      ? useDebouncedEffect
+      : useEffect;
+
+  useEffectImpl(() => {
     node.__attach();
     if (prevNodeRef.current != null) {
       const prevNode = prevNodeRef.current;

package/Libraries/Blob/FileReader.js

@@ -34,7 +34,7 @@ const EMPTY = 0;
 const LOADING = 1;
 const DONE = 2;
 
-class FileReader extends (EventTarget(...READER_EVENTS): any) {
+class FileReader extends (EventTarget(...READER_EVENTS): typeof EventTarget) {
   static EMPTY: number = EMPTY;
   static LOADING: number = LOADING;
   static DONE: number = DONE;

package/Libraries/Blob/URL.js

@@ -27,7 +27,7 @@ if (
   }
 }
 
-/**
+/*
  * To allow Blobs be accessed via `content://` URIs,
  * you need to register `BlobProvider` as a ContentProvider in your app's `AndroidManifest.xml`:
  *
@@ -52,67 +52,7 @@ if (
  * ```
  */
 
-// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
-// The reference code bloat comes from Unicode issues with URLs, so those won't work here.
-export class URLSearchParams {
-  _searchParams: Array<Array<string>> = [];
-
-  constructor(params: any) {
-    if (typeof params === 'object') {
-      Object.keys(params).forEach(key => this.append(key, params[key]));
-    }
-  }
-
-  append(key: string, value: string): void {
-    this._searchParams.push([key, value]);
-  }
-
-  delete(name: string): void {
-    throw new Error('URLSearchParams.delete is not implemented');
-  }
-
-  get(name: string): void {
-    throw new Error('URLSearchParams.get is not implemented');
-  }
-
-  getAll(name: string): void {
-    throw new Error('URLSearchParams.getAll is not implemented');
-  }
-
-  has(name: string): void {
-    throw new Error('URLSearchParams.has is not implemented');
-  }
-
-  set(name: string, value: string): void {
-    throw new Error('URLSearchParams.set is not implemented');
-  }
-
-  sort(): void {
-    throw new Error('URLSearchParams.sort is not implemented');
-  }
-
-  // $FlowFixMe[unsupported-syntax]
-  // $FlowFixMe[missing-local-annot]
-  [Symbol.iterator]() {
-    return this._searchParams[Symbol.iterator]();
-  }
-
-  toString(): string {
-    if (this._searchParams.length === 0) {
-      return '';
-    }
-    const last = this._searchParams.length - 1;
-    return this._searchParams.reduce((acc, curr, index) => {
-      return (
-        acc +
-        encodeURIComponent(curr[0]) +
-        '=' +
-        encodeURIComponent(curr[1]) +
-        (index === last ? '' : '&')
-      );
-    }, '');
-  }
-}
+export {URLSearchParams} from './URLSearchParams';
 
 function validateBaseUrl(url: string) {
   // from this MIT-licensed gist: https://gist.github.com/dperini/729294

package/Libraries/Blob/URLSearchParams.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
+// The reference code bloat comes from Unicode issues with URLs, so those won't work here.
+export class URLSearchParams {
+  _searchParams: Array<Array<string>> = [];
+
+  constructor(params: any) {
+    if (typeof params === 'object') {
+      Object.keys(params).forEach(key => this.append(key, params[key]));
+    }
+  }
+
+  append(key: string, value: string): void {
+    this._searchParams.push([key, value]);
+  }
+
+  delete(name: string): void {
+    throw new Error('URLSearchParams.delete is not implemented');
+  }
+
+  get(name: string): void {
+    throw new Error('URLSearchParams.get is not implemented');
+  }
+
+  getAll(name: string): void {
+    throw new Error('URLSearchParams.getAll is not implemented');
+  }
+
+  has(name: string): void {
+    throw new Error('URLSearchParams.has is not implemented');
+  }
+
+  set(name: string, value: string): void {
+    throw new Error('URLSearchParams.set is not implemented');
+  }
+
+  sort(): void {
+    throw new Error('URLSearchParams.sort is not implemented');
+  }
+
+  // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[missing-local-annot]
+  [Symbol.iterator]() {
+    return this._searchParams[Symbol.iterator]();
+  }
+
+  toString(): string {
+    if (this._searchParams.length === 0) {
+      return '';
+    }
+    const last = this._searchParams.length - 1;
+    return this._searchParams.reduce((acc, curr, index) => {
+      return (
+        acc +
+        encodeURIComponent(curr[0]) +
+        '=' +
+        encodeURIComponent(curr[1]) +
+        (index === last ? '' : '&')
+      );
+    }, '');
+  }
+}

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -105,7 +105,7 @@ type Props = $ReadOnly<{|
   /**
    * The navigation view that will be rendered to the side of the screen and can be pulled in.
    */
-  renderNavigationView: () => React.Element<any>,
+  renderNavigationView: () => React.MixedElement,
 
   /**
    * Make the drawer take the entire screen and draw the background of the

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -22,7 +22,7 @@ class RefreshControlMock extends React.Component<{...}> {
   componentDidMount() {
     RefreshControlMock.latestRef = this;
   }
-  render(): React.Element<typeof RCTRefreshControl> {
+  render(): React.MixedElement {
     return <RCTRefreshControl />;
   }
 }

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -25,6 +25,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     disableIntervalMomentum: true,
     maintainVisibleContentPosition: true,
     endFillColor: {process: require('../../StyleSheet/processColor').default},
+    experimental_boxShadow: {
+      process: require('../../StyleSheet/processBoxShadow').default,
+    },
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -11,7 +11,7 @@
 import type {
   TScrollViewNativeComponentInstance,
   TScrollViewNativeImperativeHandle,
-} from '../../../src/private/core/components/useSyncOnScroll';
+} from '../../../src/private/components/useSyncOnScroll';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
@@ -31,11 +31,11 @@ import type {Props as ScrollViewStickyHeaderProps} from './ScrollViewStickyHeade
 import {
   HScrollContentViewNativeComponent,
   HScrollViewNativeComponent,
-} from '../../../src/private/core/components/HScrollViewNativeComponents';
+} from '../../../src/private/components/HScrollViewNativeComponents';
 import {
   VScrollContentViewNativeComponent,
   VScrollViewNativeComponent,
-} from '../../../src/private/core/components/VScrollViewNativeComponents';
+} from '../../../src/private/components/VScrollViewNativeComponents';
 import AnimatedImplementation from '../../Animated/AnimatedImplementation';
 import FrameRateLogger from '../../Interaction/FrameRateLogger';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
@@ -643,7 +643,7 @@ export type Props = $ReadOnly<{|
    */
   /* $FlowFixMe[unclear-type] - how to handle generic type without existential
    * operator? */
-  refreshControl?: ?React.Element<any>,
+  refreshControl?: ?ExactReactElement_DEPRECATED<any>,
   children?: React.Node,
   /**
    * A ref to the inner View element of the ScrollView. This should be used
@@ -1648,7 +1648,7 @@ class ScrollView extends React.Component<Props, State> {
     this.props.onTouchMove && this.props.onTouchMove(e);
   };
 
-  render(): React.Node | React.Element<string> {
+  render(): React.Node {
     const horizontal = this.props.horizontal === true;
 
     const NativeScrollView = horizontal

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -46,6 +46,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           },
           decelerationRate: true,
           enableSyncOnScroll: true, // Fabric only.
+          experimental_boxShadow: {
+            process: require('../../StyleSheet/processBoxShadow').default,
+          },
           disableIntervalMomentum: true,
           maintainVisibleContentPosition: true,
           pagingEnabled: true,
@@ -62,9 +65,6 @@ 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/ScrollView/ScrollViewStickyHeader.js

@@ -19,7 +19,7 @@ import * as React from 'react';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 export type Props = $ReadOnly<{
-  children?: React.Element<$FlowFixMe>,
+  children?: ExactReactElement_DEPRECATED<$FlowFixMe>,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutEvent) => void,
   scrollAnimatedValue: Animated.Value,

package/Libraries/Components/StatusBar/StatusBar.js

@@ -272,8 +272,10 @@ class StatusBar extends React.Component<Props> {
   }
 
   /**
-   * Control the visibility of the network activity indicator
+   * DEPRECATED - The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
    * @param visible Show the indicator.
+   *
+   * @deprecated
    */
   static setNetworkActivityIndicatorVisible(visible: boolean) {
     if (Platform.OS !== 'ios') {

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -739,6 +739,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     },
     borderTopLeftRadius: true,
     borderTopColor: {process: require('../../StyleSheet/processColor').default},
+    experimental_boxShadow: {
+      process: require('../../StyleSheet/processBoxShadow').default,
+    },
   },
 };
 

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.
    */