@fluentui-react-native/tester 0.170.21 → 0.170.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.170.21",
+  "version": "0.170.23",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -38,6 +38,7 @@
     "@fluentui-react-native/avatar": "1.12.8",
     "@fluentui-react-native/badge": "0.11.2",
     "@fluentui-react-native/button": "0.39.4",
+    "@fluentui-react-native/callout": "0.27.2",
     "@fluentui-react-native/chip": "0.4.8",
     "@fluentui-react-native/default-theme": "0.26.2",
     "@fluentui-react-native/divider": "0.7.8",
@@ -48,7 +49,7 @@
     "@fluentui-react-native/experimental-avatar": "0.21.4",
     "@fluentui-react-native/experimental-checkbox": "0.17.9",
     "@fluentui-react-native/experimental-expander": "0.8.3",
-    "@fluentui-react-native/experimental-menu-button": "0.10.17",
+    "@fluentui-react-native/experimental-menu-button": "0.10.18",
     "@fluentui-react-native/experimental-native-date-picker": "0.11.0",
     "@fluentui-react-native/experimental-shadow": "0.6.4",
     "@fluentui-react-native/experimental-shimmer": "0.13.5",
@@ -56,16 +57,16 @@
     "@fluentui-react-native/icon": "0.21.8",
     "@fluentui-react-native/input": "0.7.8",
     "@fluentui-react-native/interactive-hooks": "0.27.4",
-    "@fluentui-react-native/menu": "1.14.20",
+    "@fluentui-react-native/menu": "1.14.21",
     "@fluentui-react-native/merge-props": "0.9.1",
     "@fluentui-react-native/notification": "0.25.11",
-    "@fluentui-react-native/overflow": "0.3.20",
-    "@fluentui-react-native/radio-group": "0.21.14",
+    "@fluentui-react-native/overflow": "0.3.21",
+    "@fluentui-react-native/radio-group": "0.21.15",
     "@fluentui-react-native/separator": "0.18.2",
     "@fluentui-react-native/spinner": "0.9.9",
     "@fluentui-react-native/stack": "0.10.7",
     "@fluentui-react-native/switch": "0.13.7",
-    "@fluentui-react-native/tablist": "0.7.2",
+    "@fluentui-react-native/tablist": "0.7.3",
     "@fluentui-react-native/text": "0.24.6",
     "@fluentui-react-native/theme": "0.11.1",
     "@fluentui-react-native/theme-tokens": "0.27.1",
@@ -75,7 +76,7 @@
     "@fluentui-react-native/tooltip": "0.4.11",
     "@fluentui-react-native/vibrancy-view": "0.2.2",
     "@fluentui-react-native/win32-theme": "0.34.5",
-    "@fluentui/react-native": "0.42.11",
+    "@fluentui/react-native": "0.42.12",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
@@ -94,7 +95,7 @@
     "@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.19.6",
+    "@fluentui-react-native/focus-zone": "0.20.0",
     "@fluentui-react-native/scripts": "0.1.1",
     "@react-native/babel-preset": "^0.73.0",
     "@react-native/metro-babel-transformer": "^0.73.0",

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import type { KeyboardMetrics } from 'react-native';
 import { Text, View, Switch, ScrollView, Platform } from 'react-native';
 
-import { ButtonV1 as Button, Callout, Separator, Pressable } from '@fluentui/react-native';
-import type { CalloutNativeCommands, IFocusable, RestoreFocusEvent, DismissBehaviors, ICalloutProps } from '@fluentui/react-native';
+import { ButtonV1 as Button, Separator, Pressable } from '@fluentui/react-native';
+import type { IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native';
+import type { CalloutNativeCommands, ICalloutProps } from '@fluentui-react-native/callout';
+import { Callout } from '@fluentui-react-native/callout';
 
 import { E2ECalloutTest } from './CalloutE2ETest';
 import { CALLOUT_TESTPAGE } from '../../../../E2E/src/Callout/consts';

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -220,7 +220,54 @@ const FocusZoneTextInput: React.FunctionComponent = () => {
   );
 };
 
+export const FirstFocusTest = () => {
+  const outerNormalRef = React.useRef(null);
+  const innerNormalRef = React.useRef(null);
+  const innerDirectRef = React.useRef(null);
+  const innerFZRef = React.useRef(null);
+  const outerNativeID = 'nativeIDToOuterButton';
+  const innerNativeID = 'nativeIDToInnerButton';
+  const innerDirectNativeID = 'nativeIDDirectToInnerButton';
+  const [outerFocusZoneTabbableElement, setOuterFocusZoneTabbableElement] = React.useState<React.RefObject<View> | string>();
+  const [innerFocusZoneTabbableElement, setInnerFocusZoneTabbableElement] = React.useState<React.RefObject<View> | string>();
+
+  return (
+    <FocusZone defaultTabbableElement={outerFocusZoneTabbableElement} tabKeyNavigation="Normal">
+      <View>
+        <Button onClick={() => setOuterFocusZoneTabbableElement(undefined)}>clear OuterFocusZone</Button>
+        <Button componentRef={outerNormalRef} onClick={() => setOuterFocusZoneTabbableElement(outerNormalRef)}>
+          Test ref
+        </Button>
+        <Button nativeID={outerNativeID} onClick={() => setOuterFocusZoneTabbableElement(outerNativeID)}>
+          Test nativeId
+        </Button>
+      </View>
+      <FocusZone componentRef={innerFZRef} defaultTabbableElement={innerFocusZoneTabbableElement}>
+        <Button onClick={() => setInnerFocusZoneTabbableElement(undefined)}>clear InnerFocusZone</Button>
+        <Button componentRef={innerDirectRef} onClick={() => setOuterFocusZoneTabbableElement(innerDirectRef)}>
+          Test nested (direct ref)
+        </Button>
+        <Button nativeID={innerDirectNativeID} onClick={() => setOuterFocusZoneTabbableElement(innerDirectNativeID)}>
+          Test nested (direct nativeID)
+        </Button>
+        <Button componentRef={innerNormalRef} onClick={() => setInnerFocusZoneTabbableElement(innerNormalRef)}>
+          Test inner zone (ref)
+        </Button>
+        <Button nativeID={innerNativeID} onClick={() => setInnerFocusZoneTabbableElement(innerNativeID)}>
+          Test inner zone (nativeID)
+        </Button>
+        <Button onClick={() => setOuterFocusZoneTabbableElement(innerFZRef)}>Test nested (transitive)</Button>
+      </FocusZone>
+    </FocusZone>
+  );
+};
+
 const focusZoneSections: TestSection[] = [
+  {
+    name: 'First Focus FocusZone Usage',
+    component: FirstFocusTest,
+    testID: FOCUSZONE_TESTPAGE,
+  },
   {
     name: 'Common FocusZone Usage',
     component: CommonUsageFocusZone,