@office-iss/react-native-win32 0.0.0-canary.296 → 0.0.0-canary.297

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

@@ -39,23 +39,24 @@ export type {ProgressBarAndroidProps};
  * },
  * ```
  */
-const ProgressBarAndroidWithForwardedRef: component(
+const ProgressBarAndroid: component(
   ref?: React.RefSetter<
     React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
   >,
   ...props: ProgressBarAndroidProps
-) = React.forwardRef(function ProgressBarAndroid(
-  {
-    // $FlowFixMe[incompatible-type]
-    styleAttr = 'Normal',
-    indeterminate = true,
-    animating = true,
-    ...restProps
-  }: ProgressBarAndroidProps,
-  forwardedRef: ?React.RefSetter<
+) = function ProgressBarAndroid({
+  ref: forwardedRef,
+  // $FlowFixMe[incompatible-type]
+  styleAttr = 'Normal',
+  indeterminate = true,
+  animating = true,
+  ...restProps
+}: {
+  ref?: React.RefSetter<
     React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
   >,
-) {
+  ...ProgressBarAndroidProps,
+}) {
   return (
     <ProgressBarAndroidNativeComponent
       styleAttr={styleAttr}
@@ -65,6 +66,6 @@ const ProgressBarAndroidWithForwardedRef: component(
       ref={forwardedRef}
     />
   );
-});
+};
 
-export default ProgressBarAndroidWithForwardedRef;
+export default ProgressBarAndroid;

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -17,11 +17,23 @@ import Platform from '../../Utilities/Platform';
 
 export type {ProgressBarAndroidProps};
 
+// A utility type to preserve the semantics of the union uses in the definition
+// of ProgressBarAndroidProps. TS's Omit does not distribute over unions, so
+// we define our own version which does. This does not affect Flow.
+// $FlowExpectedError[unclear-type]
+type Omit<T, K> = T extends any ? Pick<T, Exclude<$Keys<T>, K>> : T;
+
+/**
+ * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/progress-bar-android` instead of 'react-native'.
+ * @see https://github.com/react-native-community/progress-bar-android
+ * @deprecated
+ */
 let ProgressBarAndroid: component(
   ref?: React.RefSetter<
     React.ElementRef<ProgressBarAndroidNativeComponentType>,
   >,
-  ...props: ProgressBarAndroidProps
+  ...props: Omit<ProgressBarAndroidProps, empty>
 );
 
 if (Platform.OS === 'android') {

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidTypes.js

@@ -17,28 +17,25 @@ import type {ViewProps} from '../View/ViewPropTypes';
  * `indeterminate` can only be false if `styleAttr` is Horizontal, and requires a
  * `progress` value.
  */
-type ProgressBarAndroidStyleAttrProp =
-  | {
-      styleAttr: 'Horizontal',
-      indeterminate: false,
-      progress: number,
-    }
-  | {
-      styleAttr:
-        | 'Horizontal'
-        | 'Normal'
-        | 'Small'
-        | 'Large'
-        | 'Inverse'
-        | 'SmallInverse'
-        | 'LargeInverse',
-      indeterminate: true,
-    };
+type DeterminateProgressBarAndroidStyleAttrProp = {
+  styleAttr: 'Horizontal',
+  indeterminate: false,
+  progress: number,
+};
 
-export type ProgressBarAndroidProps = $ReadOnly<{
-  ...ViewProps,
-  ...ProgressBarAndroidStyleAttrProp,
+type IndeterminateProgressBarAndroidStyleAttrProp = {
+  styleAttr:
+    | 'Horizontal'
+    | 'Normal'
+    | 'Small'
+    | 'Large'
+    | 'Inverse'
+    | 'SmallInverse'
+    | 'LargeInverse',
+  indeterminate: true,
+};
 
+type ProgressBarAndroidBaseProps = $ReadOnly<{
   /**
    * Whether to show the ProgressBar (true, the default) or hide it (false).
    */
@@ -52,3 +49,15 @@ export type ProgressBarAndroidProps = $ReadOnly<{
    */
   testID?: ?string,
 }>;
+
+export type ProgressBarAndroidProps =
+  | $ReadOnly<{
+      ...ViewProps,
+      ...ProgressBarAndroidBaseProps,
+      ...DeterminateProgressBarAndroidStyleAttrProp,
+    }>
+  | $ReadOnly<{
+      ...ViewProps,
+      ...ProgressBarAndroidBaseProps,
+      ...IndeterminateProgressBarAndroidStyleAttrProp,
+    }>;

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

@@ -565,16 +565,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.

package/Libraries/Components/ScrollView/ScrollView.js

@@ -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.
    *
-   * 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,
+  fadingEdgeLength?: ?number | {start: number, end: number},
 }>;
 
 type StickyHeaderComponentType = component(
@@ -1827,7 +1831,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 +1911,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/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/Switch/Switch.js

@@ -165,7 +165,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,
@@ -285,6 +291,6 @@ const Switch: component(
       />
     );
   }
-});
+};
 
 export default Switch;

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,

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -16,11 +16,7 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
-import {
-  type ColorValue,
-  type TextStyleProp,
-  type ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import {type ColorValue, type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
 /**

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

@@ -16,11 +16,7 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
-import {
-  type ColorValue,
-  type TextStyleProp,
-  type ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import {type ColorValue, type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
 /**

package/Libraries/Components/TextInput/TextInput.js

@@ -60,7 +60,7 @@ import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -578,7 +578,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = React.useMemo(
+  const config = useMemo(
     () => ({
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
@@ -871,27 +871,28 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 };
 
-const ExportedForwardRef: component(
+const TextInput: component(
   ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
-) = React.forwardRef(function TextInput(
-  {
-    allowFontScaling = true,
-    rejectResponderTermination = true,
-    underlineColorAndroid = 'transparent',
-    autoComplete,
-    textContentType,
-    readOnly,
-    editable,
-    enterKeyHint,
-    returnKeyType,
-    inputMode,
-    showSoftInputOnFocus,
-    keyboardType,
-    ...restProps
-  },
-  forwardedRef: React.RefSetter<TextInputInstance>,
-) {
+) = function TextInput({
+  ref: forwardedRef,
+  allowFontScaling = true,
+  rejectResponderTermination = true,
+  underlineColorAndroid = 'transparent',
+  autoComplete,
+  textContentType,
+  readOnly,
+  editable,
+  enterKeyHint,
+  returnKeyType,
+  inputMode,
+  showSoftInputOnFocus,
+  keyboardType,
+  ...restProps
+}: {
+  ref?: React.RefSetter<TextInputInstance>,
+  ...React.ElementConfig<typeof InternalTextInput>,
+}) {
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -930,12 +931,12 @@ const ExportedForwardRef: component(
       forwardedRef={forwardedRef}
     />
   );
-});
+};
 
-ExportedForwardRef.displayName = 'TextInput';
+TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
-ExportedForwardRef.State = {
+TextInput.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
 
   currentlyFocusedField: TextInputState.currentlyFocusedField,
@@ -964,4 +965,4 @@ const verticalAlignToTextAlignVerticalMap = {
 };
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-export default ExportedForwardRef as any as TextInputType;
+export default TextInput as any as TextInputType;

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

@@ -61,7 +61,7 @@ import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -463,6 +463,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
       */
       if (instance != null) {
         // $FlowFixMe[prop-missing] - See the explanation above.
+        // $FlowFixMe[unsafe-object-assign]
         Object.assign(instance, {
           clear(): void {
             if (inputRef.current != null) {
@@ -604,7 +605,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = React.useMemo(
+  const config = useMemo(
     () => ({
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
@@ -981,27 +982,28 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 };
 
-const ExportedForwardRef: component(
+const TextInput: component(
   ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
-) = React.forwardRef(function TextInput(
-  {
-    allowFontScaling = true,
-    rejectResponderTermination = true,
-    underlineColorAndroid = 'transparent',
-    autoComplete,
-    textContentType,
-    readOnly,
-    editable,
-    enterKeyHint,
-    returnKeyType,
-    inputMode,
-    showSoftInputOnFocus,
-    keyboardType,
-    ...restProps
-  },
-  forwardedRef: React.RefSetter<TextInputInstance>,
-) {
+) = function TextInput({
+  ref: forwardedRef,
+  allowFontScaling = true,
+  rejectResponderTermination = true,
+  underlineColorAndroid = 'transparent',
+  autoComplete,
+  textContentType,
+  readOnly,
+  editable,
+  enterKeyHint,
+  returnKeyType,
+  inputMode,
+  showSoftInputOnFocus,
+  keyboardType,
+  ...restProps
+}: {
+  ref?: React.RefSetter<TextInputInstance>,
+  ...React.ElementConfig<typeof InternalTextInput>,
+}) {
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1039,12 +1041,12 @@ const ExportedForwardRef: component(
       forwardedRef={forwardedRef}
     />
   );
-});
+};
 
-ExportedForwardRef.displayName = 'TextInput';
+TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
-ExportedForwardRef.State = {
+TextInput.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
 
   currentlyFocusedField: TextInputState.currentlyFocusedField,
@@ -1073,4 +1075,4 @@ const verticalAlignToTextAlignVerticalMap = {
 };
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-export default ExportedForwardRef as any as TextInputType;
+export default TextInput as any as TextInputType;

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -221,9 +221,15 @@ class TouchableBounce extends React.Component<
   }
 }
 
-export default (React.forwardRef((props, hostRef: React.RefSetter<mixed>) => (
-  <TouchableBounce {...props} hostRef={hostRef} />
-)): component(
+export default (function TouchableBounceWrapper({
+  ref: hostRef,
+  ...props
+}: {
+  ref: React.RefSetter<mixed>,
+  ...$ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>,
+}) {
+  return <TouchableBounce {...props} hostRef={hostRef} />;
+} as component(
   ref: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -19,6 +19,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 type AndroidProps = $ReadOnly<{
   nextFocusDown?: ?number,
@@ -371,7 +372,7 @@ class TouchableHighlightImpl extends React.Component<
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
-        {React.cloneElement(child, {
+        {cloneElement(child, {
           style: StyleSheet.compose(
             child.props.style,
             this.state.extraStyles?.child,
@@ -408,9 +409,13 @@ class TouchableHighlightImpl extends React.Component<
 const TouchableHighlight: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: $ReadOnly<Omit<TouchableHighlightProps, 'hostRef'>>
-) = React.forwardRef((props, hostRef) => (
-  <TouchableHighlightImpl {...props} hostRef={hostRef} />
-));
+) = ({
+  ref: hostRef,
+  ...props
+}: {
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...$ReadOnly<Omit<TouchableHighlightProps, 'hostRef'>>,
+}) => <TouchableHighlightImpl {...props} hostRef={hostRef} />;
 
 TouchableHighlight.displayName = 'TouchableHighlight';
 

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -22,6 +22,7 @@ import Platform from '../../Utilities/Platform';
 import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 type TVProps = {
   /**
@@ -334,7 +335,7 @@ class TouchableNativeFeedback extends React.Component<
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;
-    return React.cloneElement(
+    return cloneElement(
       element,
       {
         ...eventHandlersWithoutBlurAndFocus,

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

@@ -13,12 +13,14 @@ import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import {findHostInstance_DEPRECATED} from '../../ReactNative/RendererProxy';
 import processColor from '../../StyleSheet/processColor';
 import Platform from '../../Utilities/Platform';
 import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 type TVProps = {
   /**

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -379,9 +379,13 @@ class TouchableOpacity extends React.Component<
 const Touchable: component(
   ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
   ...props: TouchableOpacityProps
-) = React.forwardRef((props, ref) => (
-  <TouchableOpacity {...props} hostRef={ref} />
-));
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ...TouchableOpacityProps,
+}) => <TouchableOpacity {...props} hostRef={ref} />;
 
 Touchable.displayName = 'TouchableOpacity';