@fluentui-react-native/tester 0.146.1 → 0.147.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.146.1",
+  "version": "0.147.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,78 +33,78 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.17.4 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.20.2 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.8.15",
-    "@fluentui-react-native/badge": ">=0.5.10 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.53 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.18.4 <1.0.0",
-    "@fluentui-react-native/divider": "^0.3.17",
-    "@fluentui-react-native/dropdown": ">=0.7.50 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.27 <1.0.0",
-    "@fluentui-react-native/experimental-appearance-additions": "^0.4.2",
-    "@fluentui-react-native/experimental-avatar": ">=0.17.25 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.111",
-    "@fluentui-react-native/experimental-checkbox": "0.13.54",
-    "@fluentui-react-native/experimental-expander": "0.5.28",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.52 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.6 <1.0.0",
-    "@fluentui-react-native/experimental-shadow": "0.2.82",
-    "@fluentui-react-native/experimental-shimmer": "0.8.29",
-    "@fluentui-react-native/experimental-tabs": "0.8.48",
-    "@fluentui-react-native/experimental-text": ">=0.11.64 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.9.10 <1.0.0",
-    "@fluentui-react-native/icon": "0.17.27",
-    "@fluentui-react-native/input": "^0.2.3",
-    "@fluentui-react-native/drawer": "^0.1.1",
-    "@fluentui-react-native/interactive-hooks": ">=0.22.31 <1.0.0",
-    "@fluentui-react-native/menu": "^1.9.1",
-    "@fluentui-react-native/merge-props": ">=0.5.3 <1.0.0",
-    "@fluentui-react-native/notification": "0.21.55",
-    "@fluentui-react-native/radio-group": ">=0.16.48 <1.0.0",
-    "@fluentui-react-native/separator": "^0.14.24",
-    "@fluentui-react-native/spinner": "^0.4.2",
-    "@fluentui-react-native/stack": ">=0.7.65 <1.0.0",
-    "@fluentui-react-native/switch": "^0.8.42",
-    "@fluentui-react-native/text": ">=0.19.33 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.8.5 <1.0.0",
-    "@fluentui-react-native/theme-tokens": "^0.24.7",
-    "@fluentui-react-native/theme-types": ">=0.31.2 <1.0.0",
-    "@fluentui-react-native/themed-stylesheet": "^1.4.3",
-    "@fluentui-react-native/theming-utils": ">=0.23.12 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.25.12 <1.0.0",
-    "@fluentui/react-native": ">=0.36.27 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.18.0 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.21.0 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.9.0",
+    "@fluentui-react-native/badge": ">=0.6.0 <1.0.0",
+    "@fluentui-react-native/button": ">=0.33.0 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.19.0 <1.0.0",
+    "@fluentui-react-native/divider": "^0.4.0",
+    "@fluentui-react-native/dropdown": ">=0.8.0 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.8.0 <1.0.0",
+    "@fluentui-react-native/experimental-appearance-additions": "^0.5.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.18.0 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.17.0",
+    "@fluentui-react-native/experimental-checkbox": "0.14.0",
+    "@fluentui-react-native/experimental-expander": "0.6.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.7.0 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.8.0 <1.0.0",
+    "@fluentui-react-native/experimental-shadow": "0.3.0",
+    "@fluentui-react-native/experimental-shimmer": "0.9.0",
+    "@fluentui-react-native/experimental-tabs": "0.9.0",
+    "@fluentui-react-native/experimental-text": ">=0.12.0 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.10.0 <1.0.0",
+    "@fluentui-react-native/icon": "0.18.0",
+    "@fluentui-react-native/input": "^0.3.0",
+    "@fluentui-react-native/drawer": "^0.2.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.23.0 <1.0.0",
+    "@fluentui-react-native/menu": "^1.10.0",
+    "@fluentui-react-native/merge-props": ">=0.6.0 <1.0.0",
+    "@fluentui-react-native/notification": "0.22.0",
+    "@fluentui-react-native/radio-group": ">=0.17.0 <1.0.0",
+    "@fluentui-react-native/separator": "^0.15.0",
+    "@fluentui-react-native/spinner": "^0.5.0",
+    "@fluentui-react-native/stack": ">=0.8.0 <1.0.0",
+    "@fluentui-react-native/switch": "^0.9.0",
+    "@fluentui-react-native/text": ">=0.20.0 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.9.0 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.25.0",
+    "@fluentui-react-native/theme-types": ">=0.32.0 <1.0.0",
+    "@fluentui-react-native/themed-stylesheet": "^1.5.0",
+    "@fluentui-react-native/theming-utils": ">=0.24.0 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.26.0 <1.0.0",
+    "@fluentui/react-native": ">=0.37.0 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@react-native-community/slider": "^4.2.0",
-    "@react-native-menu/menu": "^0.1.2",
+    "@react-native-menu/menu": "^0.7.3",
     "@react-native-picker/picker": "^2.2.1",
     "@warren-ms/react-native-icons": "^0.0.13",
-    "react": "17.0.2",
-    "react-native": "^0.68.0",
-    "react-native-macos": "^0.68.0",
-    "react-native-svg": "^12.3.0",
-    "react-native-windows": "^0.68.0",
+    "react": "18.2.0",
+    "react-native": "^0.71.0",
+    "react-native-macos": "^0.71.0",
+    "react-native-svg": "^13.7.0",
+    "react-native-windows": "^0.71.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
-    "@fluentui-react-native/focus-zone": "^0.11.43",
+    "@fluentui-react-native/focus-zone": "^0.12.0",
     "@fluentui-react-native/scripts": "^0.1.1",
     "@rnx-kit/cli": "^0.16.2",
     "@rnx-kit/metro-config": "^1.3.1",
     "flow-bin": "^0.113.0",
-    "metro-config": "^0.67.0",
-    "metro-react-native-babel-preset": "^0.67.0",
+    "metro-config": "^0.73.7",
+    "metro-react-native-babel-preset": "^0.73.7",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^2.3.16",
-    "react-test-renderer": "17.0.2"
+    "react-native-test-app": "^2.2.1",
+    "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
-    "@office-iss/react-native-win32": "^0.68.0"
+    "@office-iss/react-native-win32": "^0.71.0"
   },
   "jest": {
     "preset": "react-native"
@@ -163,7 +163,7 @@
         "@fluentui-react-native/scripts/align-deps-preset.js"
       ],
       "requirements": [
-        "react-native@0.68"
+        "react-native@0.71"
       ],
       "capabilities": [
         "core-android",

package/react-native.config.js

@@ -1,24 +1,23 @@
-const fs = require("fs");
-const path = require("path");
-const {
-  androidManifestPath,
-  iosProjectPath,
-  windowsProjectPath,
-} = require("react-native-test-app");
+const project = (() => {
+  try {
+    const { configureProjects } = require('react-native-test-app');
+    return configureProjects({
+      android: {
+        sourceDir: 'android',
+      },
+      ios: {
+        sourceDir: 'ios',
+      },
+      windows: {
+        sourceDir: 'windows',
+        solutionFile: 'windows/FluentTester.sln',
+      },
+    });
+  } catch (_) {
+    return undefined;
+  }
+})();
 
 module.exports = {
-  project: {
-    android: {
-      sourceDir: "android",
-      manifestPath: androidManifestPath(path.join(__dirname, "android")),
-    },
-    ios: {
-      project: iosProjectPath("ios"),
-    },
-    windows: fs.existsSync("windows/FluentTester.sln") && {
-      sourceDir: "windows",
-      solutionFile: "FluentTester.sln",
-      project: windowsProjectPath(path.join(__dirname, "windows")),
-    },
-  },
+  ...(project ? { project } : undefined),
 };

package/src/TestComponents/Button/ButtonIconTestSection.android.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import { ButtonV1 as Button } from '@fluentui/react-native';
 
-import { svgProps } from '../Common/iconExamples';
+import { testImage, svgProps } from '../Common/iconExamples';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
 
 export const ButtonIconTest: React.FunctionComponent = () => {
@@ -13,9 +13,6 @@ export const ButtonIconTest: React.FunctionComponent = () => {
     fontSize: 24,
   };
 
-  /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../../../assets/icon_24x24.png');
-
   return (
     <View style={testContentRootViewStyle}>
       <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>

package/src/TestComponents/Callout/CalloutE2ETest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ScreenRect } from 'react-native';
+import type { KeyboardMetrics } from 'react-native';
 import { View } from 'react-native';
 
 import type { DismissBehaviors } from '@fluentui/react-native';
@@ -31,7 +31,7 @@ export const E2ECalloutTest: React.FunctionComponent = () => {
     setShowCallout(false);
   }, [setIsCalloutVisible, setShowCallout]);
 
-  const myRect: ScreenRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
+  const myRect: KeyboardMetrics = { screenX: 10, screenY: 10, width: 100, height: 100 };
 
   return (
     <View>

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ScreenRect } from 'react-native';
+import type { KeyboardMetrics } from 'react-native';
 import { Text, View, Switch, ScrollView } from 'react-native';
 
 import { Button, Callout, Separator, Pressable, StealthButton } from '@fluentui/react-native';
@@ -380,7 +380,7 @@ const CustomCallout: React.FunctionComponent = () => {
     setShowCustomizedCallout(false);
   }, [setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
 
-  const myRect: ScreenRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
+  const myRect: KeyboardMetrics = { screenX: 10, screenY: 10, width: 100, height: 100 };
 
   return (
     <View>

package/src/TestComponents/Common/TestProps.tsx

@@ -16,6 +16,11 @@ export function testProps(id) {
       accessible: true,
       accessibilityLabel: id,
     },
+    macos: {
+      accessible: true,
+      accessibilityLabel: id,
+      testID: id,
+    },
     default: {
       testID: id,
     },

package/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -26,10 +26,10 @@ import { testProps } from '../Common/TestProps';
 
 export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
 
-type FocusZoneListWrapperProps = {
+type FocusZoneListWrapperProps = React.PropsWithChildren<{
   beforeID?: string;
   afterID?: string;
-};
+}>;
 export const FocusZoneListWrapper: React.FunctionComponent<FocusZoneListWrapperProps> = ({ beforeID, afterID, children }) => {
   const buttonProps: ButtonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
   return (