RN-0.81(1) - Add peer dependencies for 0.81, get win32 version 0.81 bundling against the library

.gitattributes

@@ -1,2 +1,3 @@
 # Set the default line ending behavior for text, in case people don't have core.autocrlf set.
-* text=auto
+* text=auto
+*.pbxproj -text

.yarnrc.yml

@@ -10,10 +10,13 @@ catalog:
   '@babel/plugin-transform-react-jsx': '^7.22.0'
   '@rnx-kit/align-deps': ^3.4.0
   '@rnx-kit/babel-preset-metro-react-native': ^3.0.1
+  '@rnx-kit/cli': '^1.0.0'
   '@rnx-kit/config': ^0.7.4
   '@rnx-kit/eslint-plugin': ^0.9.5
   '@rnx-kit/jest-preset': ^0.3.1
   '@rnx-kit/lint-lockfile': ^0.1.2
+  '@rnx-kit/metro-config': '^2.2.3'
+  '@rnx-kit/metro-resolver-symlinks': '^0.2.11'
   '@rnx-kit/reporter': ^0.1.0
   '@rnx-kit/tools-packages': ^0.1.1
   '@rnx-kit/tools-typescript': ^0.1.1
@@ -37,6 +40,7 @@ catalog:
   cross-env: ^10.1.0
   expect-webdriverio: ^5.6.1
   knip: ^5.81.0
+  'oxc-resolver': '^11.17.0'
   rimraf: ^6.1.2
   webdriverio: ^9.23.0
 
@@ -231,9 +235,17 @@ catalogs:
     react-test-renderer: 19.1.0
 
 dynamicPackageExtensions: ./scripts/dynamic.extensions.mjs
+
 enableScripts: false
+
 globalFolder: .yarn/store
+
+logFilters:
+  - code: YN0060
+    level: discard
+
 nodeLinker: pnpm
+
 packageExtensions:
   appium@*:
     dependencies:
@@ -291,4 +303,5 @@ plugins:
     path: .yarn/plugins/@rnx-kit/yarn-plugin-dynamic-extensions.cjs
     spec: >-
       https://raw.githubusercontent.com/microsoft/rnx-kit/main/incubator/yarn-plugin-dynamic-extensions/index.js
+
 yarnPath: .yarn/releases/yarn-4.11.0.cjs

apps/E2E/package.json

@@ -51,7 +51,7 @@
     "@fluentui-react-native/scripts": "workspace:*",
     "@office-iss/react-native-win32": "^0.74.0",
     "@react-native/metro-babel-transformer": "^0.74.0",
-    "@rnx-kit/metro-config": "^2.0.0",
+    "@rnx-kit/metro-config": "catalog:",
     "@types/jasmine": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "~18.2.0",
@@ -84,11 +84,11 @@
     "hoistingLimits": "dependencies"
   },
   "peerDependencies": {
-    "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-macos": "^0.73.0 || ^0.74.0",
-    "react-native-windows": "^0.73.0 || ^0.74.0"
+    "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
   },
   "peerDependenciesMeta": {
     "@office-iss/react-native-win32": {
@@ -109,7 +109,6 @@
         "core-macos",
         "core-win32",
         "core-windows",
-        "metro-config",
         "metro-react-native-babel-transformer",
         "react",
         "tools-core"

apps/fluent-tester/metro.config.js

@@ -44,7 +44,9 @@ let config = makeMetroConfig({
   resolver: {
     blockList,
     extraNodeModules,
-    resolveRequest: MetroSymlinksResolver(),
+    resolveRequest: MetroSymlinksResolver({
+      resolver: 'oxc-resolver',
+    }),
   },
   transformer: {
     // This transformer selects between the regular transformer and svg transformer depending on the file type

apps/fluent-tester/package.json

@@ -80,9 +80,9 @@
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
-    "@rnx-kit/cli": "^0.18.14",
-    "@rnx-kit/metro-config": "^2.1.0",
-    "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
+    "@rnx-kit/cli": "catalog:",
+    "@rnx-kit/metro-config": "catalog:",
+    "@rnx-kit/metro-resolver-symlinks": "catalog:",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
@@ -97,6 +97,7 @@
     "expect-webdriverio": "catalog:",
     "flow-bin": "^0.113.0",
     "metro-config": "^0.80.3",
+    "oxc-resolver": "catalog:",
     "path-dirname": "^1.0.2",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-test-app": "^3.9.2",
@@ -176,7 +177,7 @@
         "core-ios",
         "core-macos",
         "core-windows",
-        "metro-config",
+        "core/metro-config",
         "metro-react-native-babel-transformer",
         "react",
         "react-test-renderer",

apps/tester-core/package.json

@@ -106,9 +106,9 @@
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
-    "@rnx-kit/cli": "^0.18.14",
-    "@rnx-kit/metro-config": "^2.1.0",
-    "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
+    "@rnx-kit/cli": "catalog:",
+    "@rnx-kit/metro-config": "catalog:",
+    "@rnx-kit/metro-resolver-symlinks": "catalog:",
     "@types/jasmine": "catalog:",
     "@types/react": "~18.2.0",
     "@types/react-test-renderer": "^18.2.0",
@@ -145,12 +145,12 @@
     "@fluentui-react-native/tester-core": "workspace:*",
     "@fluentui-react-native/tooltip": "workspace:*",
     "@fluentui-react-native/vibrancy-view": "workspace:*",
-    "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-macos": "^0.73.0 || ^0.74.0",
-    "react-native-svg": ">=15.0.0 <15.13.0 || >=15.4.0 <15.13.0",
-    "react-native-windows": "^0.73.0 || ^0.74.0"
+    "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-svg": ">=15.0.0 <15.13.0 || >=15.4.0 <15.13.0 || ^15.11.2 || ^15.12.1",
+    "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
   },
   "peerDependenciesMeta": {
     "@fluentui-react-native/callout": {

apps/tester-core/src/TestComponents/Callout/CalloutTest.tsx

@@ -172,13 +172,13 @@ const StandardCallout: React.FunctionComponent = () => {
   }, []);
 
   const onShiftFocusToCallout = React.useCallback(() => {
-    calloutRef?.current.focusWindow();
+    calloutRef?.current.focusWindow(null);
   }, [calloutRef]);
   const onShiftFocusToCalloutButton = React.useCallback(() => {
     calloutButtonRef?.current?.focus?.();
   }, [calloutButtonRef]);
   const onShiftFocusToPage = React.useCallback(() => {
-    calloutRef?.current.blurWindow();
+    calloutRef?.current.blurWindow(null);
   }, [calloutRef]);
   const onRestoreFocusStandardCallout = React.useCallback(
     (restoreFocusEvent: RestoreFocusEvent) => {

apps/win32-81/.gitignore

@@ -0,0 +1,69 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js / web
+#
+node_modules/
+node_modules/**/*
+npm-debug.log
+yarn-error.log
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.bundle
+
+# CocoaPods
+/ios/Pods/

apps/win32-81/.npmignore

@@ -0,0 +1,4 @@
+yarn-error.log
+
+# Build targets
+!dist

apps/win32-81/.watchmanconfig

@@ -0,0 +1 @@
+{}

apps/win32-81/README.md

@@ -0,0 +1,73 @@
+# Running the FluentUI Tester on Win32
+
+`FluentUI Tester` is the test app that we use to test our FluentUI components during development.
+
+## Launch `FluentUI Tester` app on Win32
+
+1. Make sure you've installed the Standard React Native dependencies and Node.js from the [Prerequisites](https://github.com/microsoft/fluentui-react-native/tree/main?tab=readme-ov-file#prerequisites) section.
+
+2. Next, [clone and build the repo](https://github.com/microsoft/fluentui-react-native/tree/main?tab=readme-ov-file#setup-your-development-environment). If you already have a clone of the repo, make sure you've pulled the latest from the main branch (run `git pull` from your clone's main branch). You can verify you have the latest commits by running `git log` which lists all the commits from your branch with dates. Ensure commits are from a recent date or match the latest commits [here](https://github.com/microsoft/fluentui-react-native/commits/main). To exit the `git log` view, press the letter 'q' (for "quit").
+
+3. Then go into `apps\win32` folder:
+
+```
+cd apps\win32
+```
+
+3. Build the FluentUI Tester bundle:
+
+```
+yarn bundle
+```
+
+4. Launch the FluentUI Tester app:
+
+```
+yarn run-win32
+```
+
+5. You will see the FluentUI Tester show up in a new window.
+
+![Image of Fluent Tester](./../../assets/fluent_tester_win32.png)
+
+## Debug `FluentUI Tester` app with direct debugging
+
+Note: we recommend using Visual Studio Code for direct debugging.
+
+1. Follow steps #1-3 above.
+2. Build the FluentUI Tester bundle with dev option. This will ensure source map is included in the bundle.
+
+```
+yarn bundle-dev
+```
+
+3. Launch the FluentUI Tester app:
+
+```
+yarn run-win32
+```
+
+4. Inside ReactTest, open the debug option menu and select the checkbox `Use Direct Debugger`
+
+![Image of Fluent Tester debug menu location](./../../assets/fluent_tester_win32_debug_menu.png)
+
+5. In Visual Studio Code, open the debug pane and select `Debug Fabric Tester` option from the "Run And Debug" dropdown.
+
+![Image of Visual Studio Code debug pane](./../../assets/fluent_tester_vscode_debug.png)
+
+6. At this time, VS Code will attach to the JS runtime and you can start debugging
+
+## Dependencies
+
+Dependencies are managed by
+[`@rnx-kit/align-deps`](https://github.com/microsoft/rnx-kit/tree/main/packages/align-deps).
+If you're looking to upgrade `react-native`, use the interactive upgrade command:
+
+```sh
+yarn rnx-align-deps --set-version
+```
+
+This command will ensure that all relevant packages are bumped correctly.
+
+You can read more about this tool here:
+[`@rnx-kit/align-deps` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)

apps/win32-81/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "FluentTester",
+  "displayName": "FluentTester"
+}

apps/win32-81/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@fluentui-react-native/babel-config');

apps/win32-81/eslint.config.js

@@ -0,0 +1,3 @@
+const baseConfig = require('@fluentui-react-native/eslint-config-rules');
+
+module.exports = baseConfig;

apps/win32-81/index.js

@@ -0,0 +1 @@
+require('./src/index');

apps/win32-81/metro.config.js

@@ -0,0 +1,44 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+const { exclusionList, makeMetroConfig, resolveUniqueModule } = require('@rnx-kit/metro-config');
+const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
+const { getDefaultConfig } = require('metro-config');
+const { MetroSerializer } = require('@rnx-kit/metro-serializer-esbuild');
+
+const { sourceExts, assetExts } = getDefaultConfig.getDefaultValues().resolver;
+
+const excludeMixins = [];
+const extraNodeModules = {};
+function ensureUniqueModule(moduleName, excludeList, nodeModules) {
+  const [nmEntry, excludePattern] = resolveUniqueModule(moduleName);
+  excludeMixins.push(excludePattern);
+  extraNodeModules[moduleName] = nmEntry;
+}
+
+// build up the added excludes and extraNodeModules
+['react-native-svg', '@office-iss/react-native-win32', 'react-native'].forEach((moduleName) => ensureUniqueModule(moduleName));
+
+module.exports = makeMetroConfig({
+  resolver: {
+    assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'],
+    blockList: exclusionList(excludeMixins),
+    extraNodeModules: {
+      ...extraNodeModules,
+    },
+    sourceExts: [...sourceExts, 'svg'],
+    resolveRequest: MetroSymlinksResolver({
+      resolver: 'oxc-resolver',
+    }),
+  },
+  serializer: {
+    customSerializer: MetroSerializer(),
+  },
+  transformer: {
+    // This transformer selects between the regular transformer and svg transformer depending on the file type
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+  },
+});