@office-iss/react-native-win32 0.80.0 → 0.81.0-preview.1

package/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -10,6 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {Insets} from '../../../types/public/Insets';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
@@ -19,6 +20,7 @@ import {
 import {RefreshControlProps} from '../RefreshControl/RefreshControl';
 import {Touchable} from '../Touchable/Touchable';
 import {ViewProps} from '../View/ViewPropTypes';
+import {View} from '../View/View';
 
 // See https://reactnative.dev/docs/scrollview#contentoffset
 export interface PointProp {
@@ -565,16 +567,20 @@ export interface ScrollViewPropsAndroid {
   nestedScrollEnabled?: boolean | undefined;
 
   /**
-   * Fades out the edges of the scroll content.
+   * Controls the fading effect at the edges of the scroll content.
    *
-   * If the value is greater than 0, the fading edges will be set accordingly
-   * to the current scroll direction and position,
-   * indicating if there is more content to show.
+   * A value greater than 0 will apply the fading effect, indicating more content is available
+   * to scroll.
+   *
+   * You can specify a single number to apply the same fading length to both edges.
+   * Alternatively, use an object with `start` and `end` properties to set different
+   * fading lengths for the start and end of the scroll content.
    *
    * The default value is 0.
+   *
    * @platform android
    */
-  fadingEdgeLength?: number | undefined;
+  fadingEdgeLength?: number | {start: number; end: number} | undefined;
 
   /**
    * Causes the scrollbars not to turn transparent when they are not in use. The default value is false.
@@ -604,6 +610,19 @@ export interface ScrollViewProps
    */
   contentContainerStyle?: StyleProp<ViewStyle> | undefined;
 
+  /**
+   * A ref to the inner View element of the ScrollView. This should be used
+   * instead of calling `getInnerViewRef`.
+   */
+  innerViewRef?: React.RefObject<View> | undefined;
+
+  /**
+   * A ref to the Native ScrollView component. This ref can be used to call
+   * all of ScrollView's public methods, in addition to native methods like
+   * measure, measureLayout, etc.
+   */
+  scrollViewRef?: React.RefObject<ScrollView> | undefined;
+
   /**
    * A floating-point number that determines how quickly the scroll view
    * decelerates after the user lifts their finger. You may also use string
@@ -659,7 +678,9 @@ export interface ScrollViewProps
    * It's implemented using onLayout handler attached to the content container which this ScrollView renders.
    *
    */
-  onContentSizeChange?: ((w: number, h: number) => void) | undefined;
+  onContentSizeChange?:
+    | ((contentWidth: number, contentHeight: number) => void)
+    | undefined;
 
   /**
    * Fires at most once per frame during scrolling.
@@ -860,6 +881,12 @@ export class ScrollView extends ScrollViewBase {
   // Undocumented
   getInnerViewNode(): any;
 
+  /**
+   * Returns a reference to the underlying native scroll view, or null if the
+   * native instance is not mounted.
+   */
+  getNativeScrollRef: () => HostInstance | null;
+
   /**
    * @deprecated Use scrollTo instead
    */

package/Libraries/Components/ScrollView/ScrollView.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
@@ -52,6 +52,7 @@ import invariant from 'invariant';
 import memoize from 'memoize-one';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 /*
  * iOS scroll event timing nuances:
@@ -372,17 +373,20 @@ export type ScrollViewPropsAndroid = $ReadOnly<{
    */
   persistentScrollbar?: ?boolean,
   /**
-   * Fades out the edges of the scroll content.
+   * Controls the fading effect at the edges of the scroll content.
+   *
+   * A value greater than 0 will apply the fading effect, indicating more content is available
+   * to scroll.
    *
-   * If the value is greater than 0, the fading edges will be set accordingly
-   * to the current scroll direction and position,
-   * indicating if there is more content to show.
+   * You can specify a single number to apply the same fading length to both edges.
+   * Alternatively, use an object with `start` and `end` properties to set different
+   * fading lengths for the start and end of the scroll content.
    *
    * The default value is 0.
    *
    * @platform android
    */
-  fadingEdgeLength?: ?number,
+  fadingEdgeLength?: ?number | {start: number, end: number},
 }>;
 
 type StickyHeaderComponentType = component(
@@ -669,7 +673,7 @@ type ScrollViewBaseProps = $ReadOnly<{
 }>;
 
 export type ScrollViewProps = $ReadOnly<{
-  ...ViewProps,
+  ...Omit<ViewProps, 'experimental_accessibilityOrder'>,
   ...ScrollViewPropsIOS,
   ...ScrollViewPropsAndroid,
   ...ScrollViewBaseProps,
@@ -1476,6 +1480,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
       // then the second tap goes to the actual interior view)
       const {keyboardShouldPersistTaps} = this.props;
       const keyboardNeverPersistTaps =
+        // $FlowFixMe[sketchy-null-bool]
         !keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
 
       if (typeof e.target === 'number') {
@@ -1558,6 +1563,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
 
     const {keyboardShouldPersistTaps} = this.props;
     const keyboardNeverPersistsTaps =
+      // $FlowFixMe[sketchy-null-bool]
       !keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
 
     // Dismiss the keyboard now if we didn't become responder in capture phase
@@ -1642,7 +1648,9 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
     if (__DEV__ && this.props.style !== undefined) {
       // $FlowFixMe[underconstrained-implicit-instantiation]
       const style = flattenStyle(this.props.style);
-      const childLayoutProps = ['alignItems', 'justifyContent'].filter(
+      const childLayoutProps = (
+        ['alignItems', 'justifyContent'] as const
+      ).filter(
         // $FlowFixMe[incompatible-use]
         prop => style && style[prop] !== undefined,
       );
@@ -1827,7 +1835,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
         // however, the ScrollView still needs the baseStyle to be scrollable
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         // $FlowFixMe[incompatible-call]
-        return React.cloneElement(
+        return cloneElement(
           refreshControl,
           {style: StyleSheet.compose(baseStyle, outer)},
           <NativeScrollView
@@ -1907,23 +1915,25 @@ function createRefForwarder<TNativeInstance, TPublicInstance>(
   return state;
 }
 
-// TODO: After upgrading to React 19, remove `forwardRef` from this component.
 // NOTE: This wrapper component is necessary because `ScrollView` is a class
 // component and we need to map `ref` to a differently named prop. This can be
 // removed when `ScrollView` is a functional component.
 const ScrollViewWrapper: component(
   ref?: React.RefSetter<PublicScrollViewInstance>,
   ...props: ScrollViewProps
-) = React.forwardRef(function Wrapper(
-  props: ScrollViewProps,
-  ref: ?React.RefSetter<PublicScrollViewInstance>,
-): React.Node {
+) = function Wrapper({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<PublicScrollViewInstance>,
+  ...ScrollViewProps,
+}): React.Node {
   return ref == null ? (
     <ScrollView {...props} />
   ) : (
     <ScrollView {...props} scrollViewRef={ref} />
   );
-});
+};
 ScrollViewWrapper.displayName = 'ScrollView';
 // $FlowExpectedError[prop-missing]
 ScrollViewWrapper.Context = ScrollViewContext;

package/Libraries/Components/ScrollView/ScrollViewCommands.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import type {HostComponent} from '../../../src/private/types/HostComponent';

package/Libraries/Components/ScrollView/ScrollViewContext.js

@@ -9,10 +9,11 @@
  */
 
 import * as React from 'react';
+import {createContext} from 'react';
 
 type Value = {horizontal: boolean} | null;
 
-const ScrollViewContext: React.Context<Value> = React.createContext(null);
+const ScrollViewContext: React.Context<Value> = createContext(null);
 if (__DEV__) {
   ScrollViewContext.displayName = 'ScrollViewContext';
 }

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -42,7 +42,7 @@ export type ScrollViewNativeProps = $ReadOnly<{
   directionalLockEnabled?: ?boolean,
   disableIntervalMomentum?: ?boolean,
   endFillColor?: ?ColorValue,
-  fadingEdgeLength?: ?number,
+  fadingEdgeLength?: ?number | {start: number, end: number},
   indicatorStyle?: ?('default' | 'black' | 'white'),
   isInvertedVirtualizedList?: ?boolean,
   keyboardDismissMode?: ?('none' | 'on-drag' | 'interactive'),

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -16,7 +16,14 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import * as React from 'react';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 export type ScrollViewStickyHeaderProps = $ReadOnly<{
   children?: React.Node,
@@ -36,10 +43,16 @@ interface Instance extends React.ElementRef<typeof Animated.View> {
   +setNextHeaderY: number => void;
 }
 
-const ScrollViewStickyHeaderWithForwardedRef: component(
+const ScrollViewStickyHeader: component(
   ref: React.RefSetter<Instance>,
   ...props: ScrollViewStickyHeaderProps
-) = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
+) = function ScrollViewStickyHeader({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<Instance>,
+  ...ScrollViewStickyHeaderProps,
+}) {
   const {
     inverted,
     scrollViewHeight,
@@ -289,13 +302,13 @@ const ScrollViewStickyHeaderWithForwardedRef: component(
       passthroughAnimatedPropExplicitValues={
         passthroughAnimatedPropExplicitValues
       }>
-      {React.cloneElement(child, {
+      {cloneElement(child, {
         style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout
       })}
     </Animated.View>
   );
-});
+};
 
 const styles = StyleSheet.create({
   header: {
@@ -306,4 +319,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ScrollViewStickyHeaderWithForwardedRef;
+export default ScrollViewStickyHeader;

package/Libraries/Components/ScrollView/processDecelerationRate.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import Platform from '../../Utilities/Platform';

package/Libraries/Components/Sound/NativeSoundManager.js

@@ -9,5 +9,4 @@
  */
 
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeSoundManager';
-import NativeSoundManager from '../../../src/private/specs_DEPRECATED/modules/NativeSoundManager';
-export default NativeSoundManager;
+export {default} from '../../../src/private/specs_DEPRECATED/modules/NativeSoundManager';

package/Libraries/Components/Sound/SoundManager.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 import NativeSoundManager from './NativeSoundManager';

package/Libraries/Components/StaticRenderer.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid.js

@@ -9,5 +9,4 @@
  */
 
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerAndroid';
-import NativeStatusBarManagerAndroid from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerAndroid';
-export default NativeStatusBarManagerAndroid;
+export {default} from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerAndroid';

package/Libraries/Components/StatusBar/NativeStatusBarManagerIOS.js

@@ -9,5 +9,4 @@
  */
 
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerIOS';
-import NativeStatusBarManagerIOS from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerIOS';
-export default NativeStatusBarManagerIOS;
+export {default} from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerIOS';

package/Libraries/Components/StatusBar/StatusBar.d.ts

@@ -35,6 +35,8 @@ export interface StatusBarPropsAndroid {
   /**
    * The background color of the status bar.
    *
+   * Please note that this prop has no effect on Android 15+
+   *
    * @platform android
    */
   backgroundColor?: ColorValue | undefined;
@@ -44,6 +46,8 @@ export interface StatusBarPropsAndroid {
    * the app will draw under the status bar. This is useful when using a
    * semi transparent status bar color.
    *
+   * Please note that this prop has no effect on Android 15+
+   *
    * @platform android
    */
   translucent?: boolean | undefined;

package/Libraries/Components/StatusBar/StatusBar.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
@@ -58,6 +58,9 @@ export type StatusBarAnimation = $Keys<{
 export type StatusBarPropsAndroid = $ReadOnly<{
   /**
    * The background color of the status bar.
+   *
+   * Please note that this prop has no effect on Android 15+
+   *
    * @platform android
    */
   backgroundColor?: ?ColorValue,
@@ -66,6 +69,8 @@ export type StatusBarPropsAndroid = $ReadOnly<{
    * When translucent is set to true, the app will draw under the status bar.
    * This is useful when using a semi transparent status bar color.
    *
+   * Please note that this prop has no effect on Android 15+
+   *
    * @platform android
    */
   translucent?: ?boolean,

package/Libraries/Components/Switch/AndroidSwitchNativeComponent.js

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 export * from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';
-import AndroidSwitchNativeComponent from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';
-export default AndroidSwitchNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';

package/Libraries/Components/Switch/Switch.js

@@ -10,6 +10,7 @@
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
+import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -165,7 +166,13 @@ type SwitchRef = React.ElementRef<
 const Switch: component(
   ref?: React.RefSetter<SwitchRef>,
   ...props: SwitchProps
-) = React.forwardRef(function Switch(props, forwardedRef): React.Node {
+) = function Switch({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<SwitchRef>,
+  ...SwitchProps,
+}): React.Node {
   const {
     disabled,
     ios_backgroundColor,
@@ -225,7 +232,7 @@ const Switch: component(
     const _disabled =
       disabled != null ? disabled : accessibilityState?.disabled;
 
-    const _accessibilityState =
+    const _accessibilityState: ?AccessibilityState =
       _disabled !== accessibilityState?.disabled
         ? {...accessibilityState, disabled: _disabled}
         : accessibilityState;
@@ -285,6 +292,6 @@ const Switch: component(
       />
     );
   }
-});
+};
 
 export default Switch;

package/Libraries/Components/Switch/SwitchNativeComponent.js

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 export * from '../../../src/private/specs_DEPRECATED/components/SwitchNativeComponent';
-import SwitchNativeComponent from '../../../src/private/specs_DEPRECATED/components/SwitchNativeComponent';
-export default SwitchNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/SwitchNativeComponent';

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -10,11 +10,7 @@
 
 import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
-import type {
-  ColorValue,
-  TextStyleProp,
-  ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import type {ColorValue, TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   BubblingEventHandler,
   DirectEventHandler,
@@ -67,7 +63,7 @@ export type ReturnKeyType =
 
 export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
 
-export type NativeProps = $ReadOnly<{
+export type AndroidTextInputNativeProps = $ReadOnly<{
   // This allows us to inherit everything from ViewProps except for style (see below)
   // This must be commented for Fabric codegen to work.
   ...Omit<ViewProps, 'style'>,
@@ -610,7 +606,7 @@ export type NativeProps = $ReadOnly<{
   text?: ?string,
 }>;
 
-type NativeType = HostComponent<NativeProps>;
+type NativeType = HostComponent<AndroidTextInputNativeProps>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
 
@@ -621,24 +617,12 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   uiViewClassName: 'AndroidTextInput',
   bubblingEventTypes: {
-    topBlur: {
-      phasedRegistrationNames: {
-        bubbled: 'onBlur',
-        captured: 'onBlurCapture',
-      },
-    },
     topEndEditing: {
       phasedRegistrationNames: {
         bubbled: 'onEndEditing',
         captured: 'onEndEditingCapture',
       },
     },
-    topFocus: {
-      phasedRegistrationNames: {
-        bubbled: 'onFocus',
-        captured: 'onFocusCapture',
-      },
-    },
     topKeyPress: {
       phasedRegistrationNames: {
         bubbled: 'onKeyPress',
@@ -741,10 +725,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   },
 };
 
-let AndroidTextInputNativeComponent = NativeComponentRegistry.get<NativeProps>(
-  'AndroidTextInput',
-  () => __INTERNAL_VIEW_CONFIG,
-);
+let AndroidTextInputNativeComponent =
+  NativeComponentRegistry.get<AndroidTextInputNativeProps>(
+    'AndroidTextInput',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 // flowlint-next-line unclear-type:off
-export default ((AndroidTextInputNativeComponent: any): HostComponent<NativeProps>);
+export default ((AndroidTextInputNativeComponent: any): HostComponent<AndroidTextInputNativeProps>);

package/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 export * from '../../../src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent';
-import RCTInputAccessoryViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent';
-export default RCTInputAccessoryViewNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent';

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -14,7 +14,7 @@ import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfi
 
 type PartialViewConfigWithoutName = Omit<PartialViewConfig, 'uiViewClassName'>;
 
-const RCTTextInputViewConfig = {
+const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
   bubblingEventTypes: {
     topBlur: {
       phasedRegistrationNames: {

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

@@ -17,6 +17,8 @@ import {
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {TextStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
+  BlurEvent,
+  FocusEvent,
   NativeSyntheticEvent,
   NativeTouchEvent,
   TargetedEvent,
@@ -455,7 +457,7 @@ export interface TextInputAndroidProps {
 }
 
 /**
- * @deprecated Use `TextInputFocusEvent` instead
+ * @deprecated Use `FocusEvent` instead
  */
 export interface TextInputFocusEventData extends TargetedEvent {
   text: string;
@@ -464,6 +466,7 @@ export interface TextInputFocusEventData extends TargetedEvent {
 
 /**
  * @see TextInputProps.onFocus
+ * @deprecated Use `FocusEvent` instead
  */
 export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 
@@ -809,8 +812,11 @@ export interface TextInputProps
 
   /**
    * Callback that is called when the text input is blurred
+   *
+   * Note: If you are trying to find the last value of TextInput, you can use the `onEndEditing`
+   * event, which is fired upon completion of editing.
    */
-  onBlur?: ((e: TextInputFocusEvent) => void) | undefined;
+  onBlur?: ((e: BlurEvent) => void) | undefined;
 
   /**
    * Callback that is called when the text input's text changes.
@@ -859,7 +865,7 @@ export interface TextInputProps
   /**
    * Callback that is called when the text input is focused
    */
-  onFocus?: ((e: TextInputFocusEvent) => void) | undefined;
+  onFocus?: ((e: FocusEvent) => void) | undefined;
 
   /**
    * Callback that is called when the text input selection is changed.