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

package/Libraries/Lists/SectionListModern.js

@@ -14,21 +14,27 @@ import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
+  SectionData,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
-import type {ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import VirtualizedLists from '@react-native/virtualized-lists';
-import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import * as React from 'react';
+import {forwardRef, useImperativeHandle, useRef} from 'react';
 
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 
-type Item = any;
+type DefaultSectionT = {
+  [key: string]: any,
+};
 
-export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
+export type SectionBase<
+  SectionItemT,
+  SectionT = DefaultSectionT,
+> = _SectionBase<SectionItemT, SectionT>;
 
-type RequiredProps<SectionT: SectionBase<any>> = {
+type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -40,17 +46,17 @@ type RequiredProps<SectionT: SectionBase<any>> = {
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
-  sections: $ReadOnlyArray<SectionT>,
+  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
 };
 
-type OptionalProps<SectionT: SectionBase<any>> = {
+type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
   renderItem?: (info: {
-    item: Item,
+    item: ItemT,
     index: number,
-    section: SectionT,
+    section: SectionData<ItemT, SectionT>,
     separators: {
       highlight: () => void,
       unhighlight: () => void,
@@ -81,7 +87,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {
    * falls back to using the index, like react does. Note that this sets keys for each item, but
    * each overall section still needs its own key.
    */
-  keyExtractor?: ?(item: Item, index: number) => string,
+  keyExtractor?: ?(item: ItemT, index: number) => string,
   /**
    * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
    * content.
@@ -95,28 +101,13 @@ type OptionalProps<SectionT: SectionBase<any>> = {
   removeClippedSubviews?: boolean,
 };
 
-export type Props<SectionT: SectionBase<any>> = $ReadOnly<{
-  ...$Diff<
-    VirtualizedSectionListProps<SectionT>,
-    {
-      getItem: $PropertyType<VirtualizedSectionListProps<SectionT>, 'getItem'>,
-      getItemCount: $PropertyType<
-        VirtualizedSectionListProps<SectionT>,
-        'getItemCount',
-      >,
-      renderItem: $PropertyType<
-        VirtualizedSectionListProps<SectionT>,
-        'renderItem',
-      >,
-      keyExtractor: $PropertyType<
-        VirtualizedSectionListProps<SectionT>,
-        'keyExtractor',
-      >,
-      ...
-    },
+export type Props<ItemT, SectionT = DefaultSectionT> = $ReadOnly<{
+  ...Omit<
+    VirtualizedSectionListProps<ItemT, SectionT>,
+    'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
   >,
-  ...RequiredProps<SectionT>,
-  ...OptionalProps<SectionT>,
+  ...RequiredProps<ItemT, SectionT>,
+  ...OptionalProps<ItemT, SectionT>,
 }>;
 
 /**
@@ -176,14 +167,14 @@ export type Props<SectionT: SectionBase<any>> = $ReadOnly<{
  */
 const SectionList: component(
   ref?: React.RefSetter<any>,
-  ...Props<SectionBase<any>>
-) = forwardRef<Props<SectionBase<any>>, any>((props, ref) => {
+  ...Props<any, DefaultSectionT>
+) = forwardRef<Props<any, DefaultSectionT>, any>((props, ref) => {
   const propsWithDefaults = {
     stickySectionHeadersEnabled: Platform.OS === 'ios',
     ...props,
   };
 
-  const wrapperRef = useRef<?ElementRef<typeof VirtualizedSectionList>>();
+  const wrapperRef = useRef<?React.ElementRef<typeof VirtualizedSectionList>>();
 
   useImperativeHandle(
     ref,

package/Libraries/Lists/VirtualizedList.js

@@ -19,5 +19,6 @@ export type {
   ListRenderItemInfo,
   ListRenderItem,
   Separators,
+  VirtualizedListProps,
 } from '@react-native/virtualized-lists';
 export default VirtualizedList;

package/Libraries/Lists/VirtualizedSectionList.js

@@ -20,5 +20,6 @@ const VirtualizedSectionList: VirtualizedSectionListType =
 export type {
   SectionBase,
   ScrollToLocationParamsType,
+  VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
 export default VirtualizedSectionList;

package/Libraries/LogBox/Data/LogBoxData.js

@@ -18,7 +18,7 @@ import type {
   Message,
 } from './parseLogBoxLog';
 
-import DebuggerSessionObserver from '../../../src/private/debugging/FuseboxSessionObserver';
+import DebuggerSessionObserver from '../../../src/private/devsupport/rndevtools/FuseboxSessionObserver';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
+import SafeAreaView from '../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import * as LogBoxData from './Data/LogBoxData';

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js

@@ -0,0 +1,140 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+// import Animated from '../../Animated/Animated'; [Win32]
+// import Easing from '../../Animated/Easing'; [Win32]
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  onPress?: ?(event: GestureResponderEvent) => void,
+  status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
+}>;
+
+function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
+  // [Win32] Dont use Animated
+  /*
+  const [state, setState] = React.useState({
+    animation: null,
+    rotate: null,
+  });
+
+  React.useEffect(() => {
+    if (props.status === 'PENDING') {
+      if (state.animation == null) {
+        const animated = new Animated.Value(0);
+        const animation = Animated.loop(
+          Animated.timing(animated, {
+            duration: 2000,
+            easing: Easing.linear,
+            toValue: 1,
+            useNativeDriver: true,
+          }),
+        );
+        // $FlowFixMe[incompatible-call]
+        setState({
+          animation,
+          rotate: animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '360deg'],
+          }),
+        });
+        animation.start();
+      }
+    } else {
+      if (state.animation != null) {
+        state.animation.stop();
+        setState({
+          animation: null,
+          rotate: null,
+        });
+      }
+    }
+
+    return () => {
+      if (state.animation != null) {
+        state.animation.stop();
+      }
+    };
+  }, [props.status, state.animation]);
+
+  let image;
+  */
+  let color;
+  switch (props.status) {
+    case 'FAILED':
+      // image = require('./LogBoxImages/alert-triangle.png'); // [win32] Dont use LogBox images
+      color = LogBoxStyle.getErrorColor(1);
+      break;
+    case 'PENDING':
+      // image = require('./LogBoxImages/loader.png'); // [win32] Dont use LogBox images
+      color = LogBoxStyle.getWarningColor(1);
+      break;
+    default: // [Win32]
+      return null; // [Win32]
+  }
+
+  if (props.status === 'COMPLETE' /* [Win32] || image == null */) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: LogBoxStyle.getBackgroundColor(1),
+      }}
+      hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
+      onPress={props.onPress}
+      style={styles.root}>
+      {/* [Win32] Avoid Animated usage
+      <Animated.Image
+        source={image}
+        style={[
+          styles.image,
+          {tintColor: color},
+          state.rotate == null || props.status !== 'PENDING'
+            ? null
+            : {transform: [{rotate: state.rotate}]},
+        ]}
+      />
+      */}
+      <Text style={[styles.text, {color}]}>Source Map</Text>
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    height: 24,
+    paddingHorizontal: 8,
+  },
+  image: {
+    height: 14,
+    width: 16,
+    marginEnd: 4,
+    tintColor: LogBoxStyle.getTextColor(0.4),
+  },
+  text: {
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+  },
+});
+
+export default LogBoxInspectorSourceMapStatus;

package/Libraries/Modal/Modal.js

@@ -8,6 +8,7 @@
  * @flow strict-local
  */
 
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
@@ -15,11 +16,10 @@ import type {DirectEventHandler} from '../Types/CodegenTypes';
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import {type ColorValue} from '../StyleSheet/StyleSheet';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
-import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
 import VirtualizedLists from '@react-native/virtualized-lists';
-import React from 'react';
+import * as React from 'react';
 
 const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const View = require('../Components/View/View').default;
@@ -36,6 +36,8 @@ type ModalEventDefinitions = {
   modalDismissed: [{modalID: number}],
 };
 
+export type PublicModalInstance = HostInstance;
+
 const ModalEventEmitter =
   Platform.OS === 'ios' && NativeModalManager != null
     ? new NativeEventEmitter<ModalEventDefinitions>(
@@ -101,6 +103,11 @@ export type ModalBaseProps = {
    * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
    */
   backdropColor?: ColorValue,
+
+  /**
+   * A ref to the native Modal component.
+   */
+  modalRef?: React.RefSetter<PublicModalInstance>,
 };
 
 export type ModalPropsIOS = {
@@ -190,11 +197,11 @@ function confirmProps(props: ModalProps) {
 
 // Create a state to track whether the Modal is rendering or not.
 // This is the only prop that controls whether the modal is rendered or not.
-type State = {
+type ModalState = {
   isRendered: boolean,
 };
 
-class Modal extends React.Component<ModalProps, State> {
+class Modal extends React.Component<ModalProps, ModalState> {
   static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = {
     visible: true,
     hardwareAccelerated: false,
@@ -308,6 +315,7 @@ class Modal extends React.Component<ModalProps, State> {
         onRequestClose={this.props.onRequestClose}
         onShow={this.props.onShow}
         onDismiss={onDismiss}
+        ref={this.props.modalRef}
         visible={this.props.visible}
         statusBarTranslucent={this.props.statusBarTranslucent}
         navigationBarTranslucent={this.props.navigationBarTranslucent}
@@ -354,7 +362,25 @@ const styles = StyleSheet.create({
   },
 });
 
-const ExportedModal: React.ComponentType<React.ElementConfig<typeof Modal>> =
-  ModalInjection.unstable_Modal ?? Modal;
+type ModalRefProps = $ReadOnly<{
+  ref?: React.RefSetter<PublicModalInstance>,
+}>;
+
+// NOTE: This wrapper component is necessary because `Modal` is a class
+// component and we need to map `ref` to a differently named prop. This can be
+// removed when `Modal` is a functional component.
+function Wrapper({
+  ref,
+  ...props
+}: {
+  ...ModalRefProps,
+  ...ModalProps,
+}): React.Node {
+  return <Modal {...props} modalRef={ref} />;
+}
+
+Wrapper.displayName = 'Modal';
+// $FlowExpectedError[prop-missing]
+Wrapper.Context = VirtualizedListContextResetter;
 
-export default ExportedModal;
+export default Wrapper;

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -203,7 +203,9 @@ const validAttributesForNonEventProps = {
   accessibilityState: true,
   accessibilityActions: true,
   accessibilityValue: true,
+  experimental_accessibilityOrder: true,
   importantForAccessibility: true,
+  screenReaderFocusable: true,
   role: true,
   rotation: true,
   scaleX: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -197,6 +197,8 @@ const validAttributesForNonEventProps = {
   accessibilityIgnoresInvertColors: true,
   accessibilityShowsLargeContentViewer: true,
   accessibilityLargeContentTitle: true,
+  experimental_accessibilityOrder: true,
+  accessibilityRespondsToUserInteraction: true,
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,

package/Libraries/NativeComponent/BaseViewConfig.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+import BaseViewConfig from './BaseViewConfig';
+
+export default BaseViewConfig;

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -197,6 +197,7 @@ const validAttributesForNonEventProps = {
   accessibilityIgnoresInvertColors: true,
   accessibilityShowsLargeContentViewer: true,
   accessibilityLargeContentTitle: true,
+  experimental_accessibilityOrder: true,
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,

package/Libraries/NativeComponent/PlatformBaseViewConfig.js

@@ -12,9 +12,9 @@ import type {PartialViewConfig} from '../Renderer/shims/ReactNativeTypes';
 
 import BaseViewConfig from './BaseViewConfig';
 
-export type PartialViewConfigWithoutName = $Rest<
+export type PartialViewConfigWithoutName = Omit<
   PartialViewConfig,
-  {uiViewClassName: string},
+  'uiViewClassName',
 >;
 
 const PlatformBaseViewConfig: PartialViewConfigWithoutName = BaseViewConfig;

package/Libraries/NativeModules/specs/NativeDevMenu.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../../src/private/specs_DEPRECATED/modules/NativeDevMenu';
-import NativeDevMenu from '../../../src/private/specs_DEPRECATED/modules/NativeDevMenu';
+export * from '../../../src/private/devsupport/devmenu/specs/NativeDevMenu';
+import NativeDevMenu from '../../../src/private/devsupport/devmenu/specs/NativeDevMenu';
 export default NativeDevMenu;

package/Libraries/Network/RCTNetworking.android.js

@@ -50,7 +50,7 @@ const emitter = new NativeEventEmitter<$FlowFixMe>(
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
     // $FlowFixMe[incompatible-call]

package/Libraries/Network/RCTNetworking.ios.js

@@ -20,7 +20,7 @@ import {type NativeResponseType} from './XMLHttpRequest';
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
     // $FlowFixMe[incompatible-call]

package/Libraries/Network/RCTNetworking.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+import RCTNetworking from './RCTNetworking';
+
+export default RCTNetworking;

package/Libraries/Network/RCTNetworking.js.flow

@@ -19,7 +19,7 @@ declare const RCTNetworking: interface {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
     // $FlowFixMe[invalid-computed-prop]
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription,
 

package/Libraries/Network/RCTNetworking.win32.js

@@ -20,7 +20,7 @@ import {type NativeResponseType} from './XMLHttpRequest';
 const RCTNetworking = {
   addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
     // $FlowFixMe[incompatible-call]