react-native-windows 0.0.0-canary.658 → 0.0.0-canary.660

package/.flowconfig

@@ -131,4 +131,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.205.1
+^0.206.0

package/Directory.Build.props

@@ -66,8 +66,9 @@
   </PropertyGroup>
 
   <PropertyGroup Label="NuGet" Condition="'$(MSBuildProjectExtension)' == '.vcxproj'">
-    <!--See https://docs.microsoft.com/en-us/nuget/reference/msbuild-targets#restore-target-->
-    <RestoreUseStaticGraphEvaluation Condition="'$(BuildingInsideVisualStudio)' == 'true' AND '$(DisableRestoreUseStaticGraphEvaluation)' != 'true'">true</RestoreUseStaticGraphEvaluation>
+    <!-- See https://docs.microsoft.com/en-us/nuget/reference/msbuild-targets#restore-target -->
+    <!-- RestoreUseStaticGraphEvaluation broke in VS 17.6, see https://github.com/microsoft/react-native-windows/issues/11670 -->
+    <RestoreUseStaticGraphEvaluation Condition="'$(BuildingInsideVisualStudio)' == 'true' AND $([MSBuild]::VersionLessThan('$(MSBuildVersion)', '17.6')) AND '$(DisableRestoreUseStaticGraphEvaluation)' != 'true'">true</RestoreUseStaticGraphEvaluation>
   </PropertyGroup>
 
 </Project>

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -35,6 +35,7 @@ const UIView = {
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
+  role: true,
 };
 
 const RCTView = {

package/Libraries/Components/View/ReactNativeViewAttributes.windows.js

@@ -35,6 +35,7 @@ const UIView = {
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
+  role: true,
   // [Windows
   onMouseEnter: true,
   onMouseLeave: true,

package/Libraries/Core/ReactNativeVersion.js

@@ -11,7 +11,7 @@
 
 exports.version = {
   major: 0,
-  minor: 0,
+  minor: 73,
   patch: 0,
-  prerelease: '20230505-2109-9b69263a1',
+  prerelease: 'nightly-20230519-de1e9f5d1',
 };

package/Libraries/Lists/FlatList.d.ts

@@ -12,6 +12,7 @@ import type {
   ListRenderItem,
   ViewToken,
   VirtualizedListProps,
+  ViewabilityConfig,
 } from '@react-native/virtualized-lists';
 import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
 import type {StyleProp} from '../StyleSheet/StyleSheet';
@@ -144,7 +145,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */
-  viewabilityConfig?: any | undefined;
+  viewabilityConfig?: ViewabilityConfig | undefined;
 
   /**
    * Note: may have bugs (missing content) in some circumstances - use at your own risk.

package/Libraries/Lists/FlatList.js

@@ -36,7 +36,7 @@ type RequiredProps<ItemT> = {|
    * An array (or array-like list) of items to render. Other data types can be
    * used by targeting VirtualizedList directly.
    */
-  data: ?$ArrayLike<ItemT>,
+  data: ?$ReadOnly<$ArrayLike<ItemT>>,
 |};
 type OptionalProps<ItemT> = {|
   /**
@@ -91,7 +91,7 @@ type OptionalProps<ItemT> = {|
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?$ArrayLike<ItemT>,
+    data: ?$ReadOnly<$ArrayLike<ItemT>>,
     index: number,
   ) => {
     length: number,

package/Libraries/Lists/SectionList.js

@@ -244,6 +244,10 @@ export default class SectionList<
     const stickySectionHeadersEnabled =
       _stickySectionHeadersEnabled ?? Platform.OS === 'ios';
     return (
+      /* $FlowFixMe[incompatible-type] Error revealed after improved builtin
+       * React utility types */
+      /* $FlowFixMe[incompatible-type] Error revealed after improved builtin
+       * React utility types */
       <VirtualizedSectionList
         {...restProps}
         stickySectionHeadersEnabled={stickySectionHeadersEnabled}

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -10,10 +10,10 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import DeviceInfo from '../../Utilities/DeviceInfo';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
@@ -52,39 +52,21 @@ type ButtonProps = $ReadOnly<{|
 
 function FooterButton(props: ButtonProps): React.Node {
   return (
-    <LogBoxButton
-      backgroundColor={{
-        default: 'transparent',
-        pressed: LogBoxStyle.getBackgroundDarkColor(),
-      }}
-      onPress={props.onPress}
-      style={buttonStyles.safeArea}>
-      <View style={buttonStyles.content}>
-        <Text style={buttonStyles.label}>{props.text}</Text>
-      </View>
-    </LogBoxButton>
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
   );
 }
 
-const buttonStyles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    // $FlowFixMe[sketchy-null-bool]
-    paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
-  },
-  content: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  label: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
-});
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -97,6 +79,17 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -179,6 +179,7 @@ const validAttributesForNonEventProps = {
   accessibilityActions: true,
   accessibilityValue: true,
   importantForAccessibility: true,
+  role: true,
   rotation: true,
   scaleX: true,
   scaleY: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -198,6 +198,7 @@ const validAttributesForNonEventProps = {
   nativeID: true,
   pointerEvents: true,
   removeClippedSubviews: true,
+  role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,

package/Libraries/NativeComponent/BaseViewConfig.windows.js

@@ -224,6 +224,7 @@ const validAttributesForNonEventProps = {
   nativeID: true,
   pointerEvents: true,
   removeClippedSubviews: true,
+  role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,

package/Libraries/ReactNative/AppRegistry.js

@@ -10,6 +10,7 @@
 
 import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
+import type {DisplayModeType} from './DisplayMode';
 
 import BatchedBridge from '../BatchedBridge/BatchedBridge';
 import BugReporting from '../BugReporting/BugReporting';
@@ -36,23 +37,28 @@ export type ComponentProviderInstrumentationHook = (
 export type AppConfig = {
   appKey: string,
   component?: ComponentProvider,
-  run?: Function,
+  run?: Runnable,
   section?: boolean,
   ...
 };
-export type Runnable = {
-  component?: ComponentProvider,
-  run: Function,
-  ...
+type AppParameters = {
+  initialProps: $ReadOnly<{[string]: mixed, ...}>,
+  rootTag: RootTag,
+  fabric?: boolean,
+  concurrentRoot?: boolean,
 };
-export type Runnables = {[appKey: string]: Runnable, ...};
+export type Runnable = (
+  appParameters: AppParameters,
+  displayMode: DisplayModeType,
+) => void;
+export type Runnables = {[appKey: string]: Runnable};
 export type Registry = {
-  sections: Array<string>,
+  sections: $ReadOnlyArray<string>,
   runnables: Runnables,
   ...
 };
 export type WrapperComponentProvider = (
-  appParameters: any,
+  appParameters: Object,
 ) => React$ComponentType<any>;
 
 const runnables: Runnables = {};
@@ -110,30 +116,28 @@ const AppRegistry = {
     componentProvider: ComponentProvider,
     section?: boolean,
   ): string {
-    let scopedPerformanceLogger = createPerformanceLogger();
-    runnables[appKey] = {
-      componentProvider,
-      run: (appParameters, displayMode) => {
-        const concurrentRootEnabled =
-          appParameters.initialProps?.concurrentRoot ||
-          appParameters.concurrentRoot;
-        renderApplication(
-          componentProviderInstrumentationHook(
-            componentProvider,
-            scopedPerformanceLogger,
-          ),
-          appParameters.initialProps,
-          appParameters.rootTag,
-          wrapperComponentProvider && wrapperComponentProvider(appParameters),
-          appParameters.fabric,
-          showArchitectureIndicator,
+    const scopedPerformanceLogger = createPerformanceLogger();
+    runnables[appKey] = (appParameters, displayMode) => {
+      const concurrentRootEnabled = Boolean(
+        appParameters.initialProps?.concurrentRoot ||
+          appParameters.concurrentRoot,
+      );
+      renderApplication(
+        componentProviderInstrumentationHook(
+          componentProvider,
           scopedPerformanceLogger,
-          appKey === 'LogBox',
-          appKey,
-          coerceDisplayMode(displayMode),
-          concurrentRootEnabled,
-        );
-      },
+        ),
+        appParameters.initialProps,
+        appParameters.rootTag,
+        wrapperComponentProvider && wrapperComponentProvider(appParameters),
+        appParameters.fabric,
+        showArchitectureIndicator,
+        scopedPerformanceLogger,
+        appKey === 'LogBox', // is logbox
+        appKey,
+        displayMode,
+        concurrentRootEnabled,
+      );
     };
     if (section) {
       sections[appKey] = runnables[appKey];
@@ -141,8 +145,8 @@ const AppRegistry = {
     return appKey;
   },
 
-  registerRunnable(appKey: string, run: Function): string {
-    runnables[appKey] = {run};
+  registerRunnable(appKey: string, run: Runnable): string {
+    runnables[appKey] = run;
     return appKey;
   },
 
@@ -150,11 +154,11 @@ const AppRegistry = {
     AppRegistry.registerComponent(appKey, component, true);
   },
 
-  getAppKeys(): Array<string> {
+  getAppKeys(): $ReadOnlyArray<string> {
     return Object.keys(runnables);
   },
 
-  getSectionKeys(): Array<string> {
+  getSectionKeys(): $ReadOnlyArray<string> {
     return Object.keys(sections);
   },
 
@@ -188,7 +192,7 @@ const AppRegistry = {
    */
   runApplication(
     appKey: string,
-    appParameters: any,
+    appParameters: AppParameters,
     displayMode?: number,
   ): void {
     if (appKey !== 'LogBox') {
@@ -203,7 +207,7 @@ const AppRegistry = {
       );
     }
     invariant(
-      runnables[appKey] && runnables[appKey].run,
+      runnables[appKey],
       `"${appKey}" has not been registered. This can happen if:\n` +
         '* Metro (the local dev server) is run from the wrong folder. ' +
         'Check if Metro is running, stop it and restart it in the current project.\n' +
@@ -211,7 +215,7 @@ const AppRegistry = {
     );
 
     SceneTracker.setActiveScene({name: appKey});
-    runnables[appKey].run(appParameters, displayMode);
+    runnables[appKey](appParameters, coerceDisplayMode(displayMode));
   },
 
   /**
@@ -219,7 +223,7 @@ const AppRegistry = {
    */
   setSurfaceProps(
     appKey: string,
-    appParameters: any,
+    appParameters: Object,
     displayMode?: number,
   ): void {
     if (appKey !== 'LogBox') {
@@ -235,14 +239,14 @@ const AppRegistry = {
       );
     }
     invariant(
-      runnables[appKey] && runnables[appKey].run,
+      runnables[appKey],
       `"${appKey}" has not been registered. This can happen if:\n` +
         '* Metro (the local dev server) is run from the wrong folder. ' +
         'Check if Metro is running, stop it and restart it in the current project.\n' +
         "* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.",
     );
 
-    runnables[appKey].run(appParameters, displayMode);
+    runnables[appKey](appParameters, coerceDisplayMode(displayMode));
   },
 
   /**
@@ -338,18 +342,27 @@ const AppRegistry = {
   },
 };
 
-if (!(global.RN$Bridgeless === true)) {
-  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
+// Register LogBox as a default surface
+AppRegistry.registerComponent('LogBox', () => {
+  if (__DEV__ && typeof jest === 'undefined') {
+    return require('../LogBox/LogBoxInspectorContainer').default;
+  } else {
+    return function NoOp() {
+      return null;
+    };
+  }
+});
 
-  AppRegistry.registerComponent('LogBox', () => {
-    if (__DEV__) {
-      return require('../LogBox/LogBoxInspectorContainer').default;
-    } else {
-      return function NoOp() {
-        return null;
-      };
-    }
-  });
+global.RN$AppRegistry = AppRegistry;
+
+// Backwards compat with SurfaceRegistry, remove me later
+global.RN$SurfaceRegistry = {
+  renderSurface: AppRegistry.runApplication,
+  setSurfaceProps: AppRegistry.setSurfaceProps,
+};
+
+if (global.RN$Bridgeless !== true) {
+  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
 }
 
 module.exports = AppRegistry;

package/Libraries/Renderer/shims/ReactFabric.js

@@ -7,7 +7,7 @@
  * @noformat
  * @flow
  * @nolint
- * @generated SignedSource<<cece19ddbec9f287c995721f49c68977>>
+ * @generated SignedSource<<c1cc197c110e3a49a5e8f6bd5d32b23f>>
  */
 
 'use strict';
@@ -24,9 +24,9 @@ if (__DEV__) {
   ReactFabric = require('../implementations/ReactFabric-prod');
 }
 
-if (global.RN$Bridgeless) {
-  global.RN$stopSurface = ReactFabric.stopSurface;
-} else {
+global.RN$stopSurface = ReactFabric.stopSurface;
+
+if (global.RN$Bridgeless !== true) {
   BatchedBridge.registerCallableModule('ReactFabric', ReactFabric);
 }
 

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -7,7 +7,7 @@
  * @noformat
  * @flow strict-local
  * @nolint
- * @generated SignedSource<<ce82e8957367bee7d11379ab88e3f7c5>>
+ * @generated SignedSource<<1b39316520f5af25f0a141d7d78b0809>>
  */
 
 'use strict';
@@ -108,6 +108,7 @@ exports.get = function (name: string): ViewConfig {
         'View config getter callback for component `%s` must be a function (received `%s`).%s',
         name,
         callback === null ? 'null' : typeof callback,
+        // $FlowFixMe[recursive-definition]
         typeof name[0] === 'string' && /[a-z]/.test(name[0])
           ? ' Make sure to start component names with a capital letter.'
           : '',

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -18,7 +18,7 @@ type FlexAlignType =
   | 'stretch'
   | 'baseline';
 
-type DimensionValue =
+export type DimensionValue =
   | number
   | 'auto'
   | `${number}%`
@@ -69,13 +69,6 @@ export interface FlexStyle {
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
   height?: DimensionValue | undefined;
-  inset?: DimensionValue | undefined;
-  insetBlock?: DimensionValue | undefined;
-  insetBlockEnd?: DimensionValue | undefined;
-  insetBlockStart?: DimensionValue | undefined;
-  insetInline?: DimensionValue | undefined;
-  insetInlineEnd?: DimensionValue | undefined;
-  insetInlineStart?: DimensionValue | undefined;
   justifyContent?:
     | 'flex-start'
     | 'flex-end'
@@ -86,15 +79,9 @@ export interface FlexStyle {
     | undefined;
   left?: DimensionValue | undefined;
   margin?: DimensionValue | undefined;
-  marginBlock?: DimensionValue | undefined;
-  marginBlockEnd?: DimensionValue | undefined;
-  marginBlockStart?: DimensionValue | undefined;
   marginBottom?: DimensionValue | undefined;
   marginEnd?: DimensionValue | undefined;
   marginHorizontal?: DimensionValue | undefined;
-  marginInline?: DimensionValue | undefined;
-  marginInlineEnd?: DimensionValue | undefined;
-  marginInlineStart?: DimensionValue | undefined;
   marginLeft?: DimensionValue | undefined;
   marginRight?: DimensionValue | undefined;
   marginStart?: DimensionValue | undefined;
@@ -107,14 +94,8 @@ export interface FlexStyle {
   overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
   padding?: DimensionValue | undefined;
   paddingBottom?: DimensionValue | undefined;
-  paddingBlock?: DimensionValue | undefined;
-  paddingBlockEnd?: DimensionValue | undefined;
-  paddingBlockStart?: DimensionValue | undefined;
   paddingEnd?: DimensionValue | undefined;
   paddingHorizontal?: DimensionValue | undefined;
-  paddingInline?: DimensionValue | undefined;
-  paddingInlineEnd?: DimensionValue | undefined;
-  paddingInlineStart?: DimensionValue | undefined;
   paddingLeft?: DimensionValue | undefined;
   paddingRight?: DimensionValue | undefined;
   paddingStart?: DimensionValue | undefined;

package/Libraries/Utilities/createPerformanceLogger.js

@@ -16,7 +16,6 @@ import type {
 } from './IPerformanceLogger';
 
 import * as Systrace from '../Performance/Systrace';
-import Performance from '../WebPerformance/Performance';
 import infoLog from './infoLog';
 
 const _cookies: {[key: string]: number, ...} = {};
@@ -27,9 +26,6 @@ const PRINT_TO_CONSOLE: false = false; // Type as false to prevent accidentally
 // used to separate these internally from other marks/measures
 const WEB_PERFORMANCE_PREFIX = 'global_perf_';
 
-// TODO: Remove once T143070419 is done
-const performance = new Performance();
-
 export const getCurrentTimestamp: () => number =
   global.nativeQPLTimestamp ?? global.performance.now.bind(global.performance);
 

package/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper_emptyimpl.cpp

@@ -0,0 +1,46 @@
+
+#include "pch.h"
+#include "CompositionContextHelper.h"
+#if __has_include("Composition.CompositionContextHelper.g.cpp")
+#include "Composition.CompositionContextHelper.g.cpp"
+#endif
+
+#include <Composition.ActivityVisual.g.h>
+#include <Composition.ScrollPositionChangedArgs.g.h>
+#include <Composition.ScrollVisual.g.h>
+#include <Composition.SpriteVisual.g.h>
+#include <Composition.SurfaceBrush.g.h>
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+ICompositionContext CompositionContextHelper::CreateContext(
+    winrt::Windows::UI::Composition::Compositor const &) noexcept {
+  return nullptr;
+}
+
+IVisual CompositionContextHelper::CreateVisual(winrt::Windows::UI::Composition::Visual const &) noexcept {
+  return nullptr;
+}
+
+winrt::Windows::UI::Composition::Compositor CompositionContextHelper::InnerCompositor(ICompositionContext) noexcept {
+  return nullptr;
+}
+
+winrt::Windows::UI::Composition::Visual CompositionContextHelper::InnerVisual(IVisual) noexcept {
+  return nullptr;
+}
+
+winrt::Windows::UI::Composition::DropShadow CompositionContextHelper::InnerDropShadow(IDropShadow) noexcept {
+  return nullptr;
+}
+
+winrt::Windows::UI::Composition::CompositionBrush CompositionContextHelper::InnerBrush(IBrush) noexcept {
+  return nullptr;
+}
+
+winrt::Windows::UI::Composition::ICompositionSurface CompositionContextHelper::InnerSurface(
+    ICompositionDrawingSurface) noexcept {
+  return nullptr;
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation