react-native-windows 0.80.1 → 0.81.0-preview.4

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/Switch.windows.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,
     focusable, // [Windows]
@@ -233,7 +240,7 @@ const Switch: component(
     const _disabled =
       disabled != null ? disabled : accessibilityState?.disabled;
 
-    const _accessibilityState =
+    const _accessibilityState: ?AccessibilityState =
       _disabled !== accessibilityState?.disabled
         ? {...accessibilityState, disabled: _disabled}
         : accessibilityState;
@@ -298,6 +305,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.

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

@@ -10,17 +10,15 @@
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {
+  BlurEvent,
+  FocusEvent,
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
 } 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';
 
 /**
@@ -62,22 +60,22 @@ type TextInputContentSizeChangeEventData = $ReadOnly<{
 export type TextInputContentSizeChangeEvent =
   NativeSyntheticEvent<TextInputContentSizeChangeEventData>;
 
-type TargetEvent = $ReadOnly<{
-  target: number,
-  ...
-}>;
-
-type TextInputFocusEventData = TargetEvent;
-
 /**
  * @see TextInputProps.onBlur
+ * @deprecated Use `BlurEvent` instead.
  */
-export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
+export type TextInputBlurEvent = BlurEvent;
 
 /**
  * @see TextInputProps.onFocus
+ * @deprecated Use `FocusEvent` instead.
  */
-export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = FocusEvent;
+
+type TargetEvent = $ReadOnly<{
+  target: number,
+  ...
+}>;
 
 export type Selection = $ReadOnly<{
   start: number,
@@ -1033,7 +1031,7 @@ type TextInputBaseProps = $ReadOnly<{
 }>;
 
 export type TextInputProps = $ReadOnly<{
-  ...Omit<ViewProps, 'style'>,
+  ...Omit<ViewProps, 'style' | 'experimental_accessibilityOrder'>,
   ...TextInputIOSProps,
   ...TextInputAndroidProps,
   ...TextInputBaseProps,

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

@@ -10,6 +10,8 @@
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {
+  BlurEvent,
+  FocusEvent,
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
@@ -18,14 +20,9 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+import {type ColorValue, type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {HandledKeyboardEvent} from '../View/ViewPropTypes'; // Windows
 
-import {
-  type ColorValue,
-  type TextStyleProp,
-  type ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
-
 import * as React from 'react';
 
 /**
@@ -67,22 +64,22 @@ type TextInputContentSizeChangeEventData = $ReadOnly<{
 export type TextInputContentSizeChangeEvent =
   NativeSyntheticEvent<TextInputContentSizeChangeEventData>;
 
-type TargetEvent = $ReadOnly<{
-  target: number,
-  ...
-}>;
-
-type TextInputFocusEventData = TargetEvent;
-
 /**
  * @see TextInputProps.onBlur
+ * @deprecated Use `BlurEvent` instead.
  */
-export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
+export type TextInputBlurEvent = BlurEvent;
 
 /**
  * @see TextInputProps.onFocus
+ * @deprecated Use `FocusEvent` instead.
  */
-export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = FocusEvent;
+
+type TargetEvent = $ReadOnly<{
+  target: number,
+  ...
+}>;
 
 export type Selection = $ReadOnly<{
   start: number,

package/Libraries/Components/TextInput/TextInput.js

@@ -11,6 +11,8 @@
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
+  BlurEvent,
+  FocusEvent,
   GestureResponderEvent,
   ScrollEvent,
 } from '../../Types/CoreEventTypes';
@@ -53,14 +55,14 @@ import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import TextAncestor from '../../Text/TextAncestor';
+import TextAncestorContext from '../../Text/TextAncestorContext';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 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;
@@ -86,10 +88,12 @@ if (Platform.OS === 'android') {
 
 export type {
   AutoCapitalize,
+  BlurEvent,
   EnterKeyHintType,
   EnterKeyHintTypeAndroid,
   EnterKeyHintTypeIOS,
   EnterKeyHintTypeOptions,
+  FocusEvent,
   InputModeOptions,
   KeyboardType,
   KeyboardTypeAndroid,
@@ -520,14 +524,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
     });
   };
 
-  const _onFocus = (event: TextInputFocusEvent) => {
+  const _onFocus = (event: FocusEvent) => {
     TextInputState.focusInput(inputRef.current);
     if (props.onFocus) {
       props.onFocus(event);
     }
   };
 
-  const _onBlur = (event: TextInputBlurEvent) => {
+  const _onBlur = (event: BlurEvent) => {
     TextInputState.blurInput(inputRef.current);
     if (props.onBlur) {
       props.onBlur(event);
@@ -578,7 +582,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = React.useMemo(
+  const config = useMemo(
     () => ({
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
@@ -771,9 +775,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
       />
     );
   }
-  return (
-    <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
-  );
+  return <TextAncestorContext value={true}>{textInput}</TextAncestorContext>;
 }
 
 const enterKeyHintToReturnTypeMap = {
@@ -784,7 +786,7 @@ const enterKeyHintToReturnTypeMap = {
   previous: 'previous',
   search: 'search',
   send: 'send',
-};
+} as const;
 
 const inputModeToKeyboardTypeMap = {
   none: 'default',
@@ -792,10 +794,11 @@ const inputModeToKeyboardTypeMap = {
   decimal: 'decimal-pad',
   numeric: 'number-pad',
   tel: 'phone-pad',
-  search: Platform.OS === 'ios' ? 'web-search' : 'default',
+  search:
+    Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
   email: 'email-address',
   url: 'url',
-};
+} as const;
 
 // Map HTML autocomplete values to Android autoComplete values
 const autoCompleteWebToAutoCompleteAndroidMap = {
@@ -829,7 +832,7 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   'tel-country-code': 'tel-country-code',
   'tel-national': 'tel-national',
   username: 'username',
-};
+} as const;
 
 // Map HTML autocomplete values to iOS textContentType values
 const autoCompleteWebToTextContentTypeMap = {
@@ -869,29 +872,30 @@ const autoCompleteWebToTextContentTypeMap = {
   tel: 'telephoneNumber',
   url: 'URL',
   username: 'username',
-};
+} as const;
 
-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}
@@ -921,8 +925,7 @@ const ExportedForwardRef: component(
           : Platform.OS === 'ios' &&
               autoComplete &&
               autoComplete in autoCompleteWebToTextContentTypeMap
-            ? // $FlowFixMe[invalid-computed-prop]
-              // $FlowFixMe[prop-missing]
+            ? // $FlowFixMe[prop-missing]
               autoCompleteWebToTextContentTypeMap[autoComplete]
             : textContentType
       }
@@ -930,12 +933,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,
@@ -961,7 +964,7 @@ const verticalAlignToTextAlignVerticalMap = {
   top: 'top',
   bottom: 'bottom',
   middle: 'center',
-};
+} as const;
 
 // $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;