@fluentui-react-native/tester 0.93.2 → 0.93.5

package/src/TestComponents/Common/MenuPicker.windows.tsx

@@ -1,14 +1,14 @@
 export * from './MenuPicker.desktop';
 import * as React from 'react';
 import { Button, Text, View, StyleSheet } from 'react-native';
-import { MenuPickerProps, collectionItem } from './MenuPicker';
+import { MenuPickerProps, CollectionItem } from './MenuPicker';
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, onChange, collection } = props;
   return (
     <View style={menuPickerStyles.container}>
       <Text style={menuPickerStyles.prompt}>{prompt}</Text>
-      {collection.map((item: collectionItem, index: number) => (
+      {collection.map((item: CollectionItem, index: number) => (
         <Button onPress={() => onChange(item.value, index)} key={index} title={item.label} />
       ))}
     </View>

package/src/TestComponents/Common/styles.ts

@@ -5,7 +5,7 @@ export const commonTestStyles = StyleSheet.create({
   root: {
     marginTop: 16,
     marginRight: 32,
-    flexDirection: 'row',
+    flexDirection: 'column',
     alignItems: 'flex-start',
   },
   flex: { flex: 1 },

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,116 +1,118 @@
 import * as React from 'react';
-import { View, Switch } from 'react-native';
-import { FocusZone, Text, FocusZoneDirection, Checkbox } from '@fluentui/react-native';
+import { View, Switch, ScrollView } from 'react-native';
+import { FocusZone, Text, FocusZoneDirection } from '@fluentui/react-native';
 import { ButtonV1 as Button, ButtonProps } from '@fluentui-react-native/button';
+import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { FOCUSZONE_TESTPAGE } from './consts';
-import { focusZoneTestStyles, GridButton, stackStyleFocusZone, SubheaderText } from './styles';
+import { focusZoneTestStyles, GridButton, SubheaderText } from './styles';
 import { commonTestStyles } from '../Common/styles';
-import { Stack } from '@fluentui-react-native/stack';
-import { MenuButton, MenuButtonItemProps } from '@fluentui-react-native/experimental-menu-button';
+import { CollectionItem, MenuPicker } from '../Common/MenuPicker';
 
-const ListOfCheckboxes: React.FunctionComponent = () => {
+const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
+const directionCollection: CollectionItem<FocusZoneDirection>[] = FocusZoneDirections.map((x) => ({
+  label: x,
+  value: x,
+}));
+
+const Checkboxes = (props: CheckboxProps) => {
+  return (
+    <View style={focusZoneTestStyles.dashedBorder}>
+      <Checkbox label="Option A" {...props} />
+      <Checkbox label="Option B" {...props} />
+      <Checkbox label="Option C" {...props} />
+    </View>
+  );
+};
+
+const FocusZoneInsideScrollView: React.FunctionComponent = () => {
   return (
-    <React.Fragment>
-      <Checkbox label="Option A" />
-      <Checkbox label="Option B" />
-      <Checkbox label="Option C" />
-    </React.Fragment>
+    <FocusZoneListWrapper>
+      <FocusZone focusZoneDirection="bidirectional">
+        <View style={focusZoneTestStyles.dashedBorder}>
+          <Button style={focusZoneTestStyles.listWrapperButton}>Inside Focus Zone</Button>
+          <ScrollView
+            focusable={false}
+            style={focusZoneTestStyles.scrollViewStyle}
+            contentContainerStyle={focusZoneTestStyles.scrollViewContentStyle}
+            showsVerticalScrollIndicator={true}
+          >
+            <Button style={focusZoneTestStyles.scrollViewButton}>1</Button>
+            <Button style={focusZoneTestStyles.scrollViewButton}>2</Button>
+            <Button style={focusZoneTestStyles.scrollViewButton}>3</Button>
+          </ScrollView>
+        </View>
+      </FocusZone>
+    </FocusZoneListWrapper>
   );
 };
 
-const ListOfDisabledCheckboxes: React.FunctionComponent = () => {
+const FocusZoneNoFocusableElements: React.FunctionComponent = () => {
   return (
-    <React.Fragment>
-      <Checkbox label="Option A" disabled={true} />
-      <Checkbox label="Option B" disabled={true} />
-      <Checkbox label="Option C" disabled={true} />
-    </React.Fragment>
+    <FocusZone>
+      <Checkboxes disabled />
+    </FocusZone>
   );
 };
 
-const EdgeCasesFocusZone: React.FunctionComponent = () => {
+const FocusZoneNoProps: React.FunctionComponent = () => {
   return (
-    <Stack style={stackStyleFocusZone}>
-      <FocusZone>
-        <SubheaderText>FocusZone with no focusable elements</SubheaderText>
-        <ListOfDisabledCheckboxes />
-      </FocusZone>
-      <FocusZone>
-        <SubheaderText>FocusZone with no props set</SubheaderText>
-        <ListOfCheckboxes />
-      </FocusZone>
-      <FocusZone>
-        <SubheaderText>FocusZone with no elements</SubheaderText>
-      </FocusZone>
-      <SubheaderText>Nested FocusZones</SubheaderText>
-      <Button>Outside Focus Zone</Button>
-      <Text>Parent FocusZone, vertical</Text>
-      <View style={focusZoneTestStyles.nestedFocusZoneStyle}>
-        <FocusZone focusZoneDirection="vertical">
-          <Text>Inner FocusZone 1, horizontal</Text>
-          <View style={focusZoneTestStyles.nestedFocusZoneStyle}>
+    <FocusZone>
+      <Checkboxes />
+    </FocusZone>
+  );
+};
+
+const NestedFocusZone: React.FunctionComponent = () => {
+  return (
+    <FocusZoneListWrapper>
+      <>
+        <Text>Parent FocusZone, vertical</Text>
+        <View style={focusZoneTestStyles.nestedFocusZoneStyle}>
+          <FocusZone focusZoneDirection="vertical">
+            <Text>Inner FocusZone 1, horizontal</Text>
             <FocusZone focusZoneDirection="horizontal">
-              <View style={focusZoneTestStyles.focusZoneContainer}>
-                {GridOfButtons({
-                  gridWidth: 3,
-                  gridHeight: 1,
-                })}
-              </View>
+              <GridOfButtons gridWidth={3} gridHeight={1} />
             </FocusZone>
-          </View>
-          <Text>Inner FocusZone 2, horizontal</Text>
-          <View style={focusZoneTestStyles.nestedFocusZoneStyle}>
+            <Text>Inner FocusZone 2, horizontal</Text>
             <FocusZone focusZoneDirection="horizontal">
-              <View style={focusZoneTestStyles.focusZoneContainer}>
-                {GridOfButtons({
-                  gridWidth: 3,
-                  gridHeight: 1,
-                })}
-              </View>
+              <GridOfButtons gridWidth={3} gridHeight={1} />
             </FocusZone>
-          </View>
-          <Button>Inside Focus Zone</Button>
-        </FocusZone>
-      </View>
-      <Button>Outside Focus Zone</Button>
-    </Stack>
+            <Button>Inside Focus Zone</Button>
+          </FocusZone>
+        </View>
+      </>
+    </FocusZoneListWrapper>
   );
 };
 
-const FocusZoneListWrapper: React.FunctionComponent = (props) => {
-  const buttonProps: ButtonProps = { children: 'Click to Focus', style: { marginVertical: 10 } };
+const FocusZoneListWrapper = (props) => {
+  const buttonProps: ButtonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
   return (
-    <React.Fragment>
+    <>
       <Button {...buttonProps} />
       {React.Children.map(props.children, (child) => {
         return (
-          <React.Fragment>
+          <>
             {child}
             <Button {...buttonProps} />
-          </React.Fragment>
+          </>
         );
       })}
-    </React.Fragment>
+    </>
   );
 };
 
-const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
-
 const DirectionalFocusZone: React.FunctionComponent = () => {
+  const [direction, setDirection] = React.useState<FocusZoneDirection>('none');
+
   return (
-    <FocusZoneListWrapper>
-      <FocusZone>
-        <SubheaderText>FocusZone with no props set</SubheaderText>
-        <ListOfCheckboxes />
+    <>
+      <MenuPicker prompt="Direction" selected={direction} onChange={setDirection} collection={directionCollection} />
+      <FocusZone focusZoneDirection={direction}>
+        <Checkboxes />
       </FocusZone>
-      {FocusZoneDirections.map((direction, index) => (
-        <FocusZone key={index} focusZoneDirection={direction}>
-          <SubheaderText>FocusZone with arrow key navigation: {direction}</SubheaderText>
-          <ListOfCheckboxes />
-        </FocusZone>
-      ))}
-    </FocusZoneListWrapper>
+    </>
   );
 };
 
@@ -119,11 +121,11 @@ const CommonUsageFocusZone: React.FunctionComponent = () => {
     <FocusZoneListWrapper>
       <FocusZone isCircularNavigation={true}>
         <SubheaderText>FocusZone with Circular Navigation</SubheaderText>
-        <ListOfCheckboxes />
+        <Checkboxes />
       </FocusZone>
       <FocusZone disabled={true}>
         <SubheaderText>Disabled FocusZone</SubheaderText>
-        <ListOfCheckboxes />
+        <Checkboxes />
       </FocusZone>
     </FocusZoneListWrapper>
   );
@@ -132,27 +134,18 @@ const CommonUsageFocusZone: React.FunctionComponent = () => {
 type GridOfButtonsProps = {
   gridWidth: number;
   gridHeight: number;
-  buttonRefs?: React.RefObject<View>[];
-  onClick?: (index: number) => void;
 };
 
 const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props: GridOfButtonsProps) => {
   return (
-    <React.Fragment>
+    <View style={focusZoneTestStyles.dashedBorder}>
       {[...Array(props.gridHeight)].map((_value, heightIndex: number) => {
         return (
           <View key={heightIndex} style={focusZoneTestStyles.focusZoneViewStyle}>
             {[...Array(props.gridWidth)].map((_value, widthIndex: number) => {
               const gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
               return (
-                <GridButton
-                  key={widthIndex}
-                  style={focusZoneTestStyles.focusZoneButton}
-                  componentRef={props?.buttonRefs?.[gridIndex]}
-                  onClick={() => {
-                    props?.onClick?.(gridIndex);
-                  }}
-                >
+                <GridButton key={widthIndex} style={focusZoneTestStyles.focusZoneButton}>
                   <Text>{gridIndex}</Text>
                 </GridButton>
               );
@@ -160,47 +153,7 @@ const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props: GridO
           </View>
         );
       })}
-    </React.Fragment>
-  );
-};
-
-const Navigation2DFocusZone: React.FunctionComponent = () => {
-  const [defaultTabbableElementIndex, setDefaultTabbableElementIndex] = React.useState<number | null>(5);
-  const gridWidth = 3,
-    gridHeight = 4;
-
-  const refMemo = React.useMemo(
-    () =>
-      Array(gridWidth * gridHeight)
-        .fill(null)
-        .map(() => React.createRef<View>()),
-    [gridWidth, gridHeight],
-  );
-  const buttonRefs = React.useRef(refMemo);
-  const defaultTextNote = 'The defaultTabbableElement is ' + defaultTabbableElementIndex;
-  return (
-    <React.Fragment>
-      <Text>{defaultTextNote}</Text>
-      <Button onClick={() => setDefaultTabbableElementIndex(null)} style={{ marginTop: 10 }}>
-        Clear defaultTabbableElement
-      </Button>
-      <FocusZoneListWrapper>
-        <FocusZone
-          use2DNavigation={true}
-          defaultTabbableElement={defaultTabbableElementIndex ? buttonRefs.current[defaultTabbableElementIndex] : undefined}
-          isCircularNavigation={true}
-        >
-          <View style={focusZoneTestStyles.focusZoneContainer}>
-            {GridOfButtons({
-              gridWidth: 3,
-              gridHeight: 4,
-              buttonRefs: buttonRefs.current,
-              onClick: (index: number) => setDefaultTabbableElementIndex(index),
-            })}
-          </View>
-        </FocusZone>
-      </FocusZoneListWrapper>
-    </React.Fragment>
+    </View>
   );
 };
 
@@ -220,67 +173,59 @@ function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement {
   );
 }
 
-const CustomizableFocusZone: React.FunctionComponent = () => {
+const FocusZone2D: React.FunctionComponent = () => {
   const [is2DNav, set2dNav] = React.useState(false);
   const [isDisabled, setDisabled] = React.useState(false);
   const [isCircularNav, setIsCircularNav] = React.useState(false);
-  const [focusZoneDirection, setFocusZoneDirection] = React.useState<FocusZoneDirection>('bidirectional');
-  const menuItems: MenuButtonItemProps[] = FocusZoneDirections.map((direction) => ({ itemKey: direction, text: direction }));
+  const [direction, setDirection] = React.useState<FocusZoneDirection>('bidirectional');
 
   return (
     <View style={commonTestStyles.root}>
-      <Stack style={stackStyleFocusZone}>
-        <View style={commonTestStyles.settings}>
-          <SwitchWithLabel label="2D Navigation" value={is2DNav} onValueChange={set2dNav} />
-          <SwitchWithLabel label="Disabled" value={isDisabled} onValueChange={setDisabled} />
-          <SwitchWithLabel label="Circular Navigation" value={isCircularNav} onValueChange={setIsCircularNav} />
-          <MenuButton
-            content={focusZoneDirection}
-            menuItems={menuItems}
-            onItemClick={(direction) => setFocusZoneDirection(direction as FocusZoneDirection)}
-            contextualMenu={{
-              shouldFocusOnMount: true,
-              shouldFocusOnContainer: true,
-            }}
-          />
-        </View>
+      <View style={commonTestStyles.settings}>
+        <SwitchWithLabel label="2D Navigation" value={is2DNav} onValueChange={set2dNav} />
+        <SwitchWithLabel label="Disabled" value={isDisabled} onValueChange={setDisabled} />
+        <SwitchWithLabel label="Circular Navigation" value={isCircularNav} onValueChange={setIsCircularNav} />
+        <MenuPicker prompt="Direction" selected={direction} onChange={setDirection} collection={directionCollection} />
+      </View>
 
-        <FocusZoneListWrapper>
-          <FocusZone
-            disabled={isDisabled}
-            use2DNavigation={is2DNav}
-            focusZoneDirection={focusZoneDirection}
-            isCircularNavigation={isCircularNav}
-          >
-            <View style={focusZoneTestStyles.focusZoneContainer}>{GridOfButtons({ gridWidth: 3, gridHeight: 3 })}</View>
-          </FocusZone>
-        </FocusZoneListWrapper>
-      </Stack>
+      <FocusZoneListWrapper>
+        <FocusZone disabled={isDisabled} use2DNavigation={is2DNav} focusZoneDirection={direction} isCircularNavigation={isCircularNav}>
+          <GridOfButtons gridWidth={3} gridHeight={3} />
+        </FocusZone>
+      </FocusZoneListWrapper>
     </View>
   );
 };
 
 const focusZoneSections: TestSection[] = [
+  {
+    name: 'Common FocusZone Usage',
+    component: CommonUsageFocusZone,
+  },
   {
     name: 'Directional FocusZone Usage',
     testID: FOCUSZONE_TESTPAGE,
     component: DirectionalFocusZone,
   },
   {
-    name: 'Common FocusZone Usage',
-    component: CommonUsageFocusZone,
+    name: '2D Navigation',
+    component: FocusZone2D,
   },
   {
-    name: '2D Navigation',
-    component: Navigation2DFocusZone,
+    name: 'ScrollView inside FocusZone',
+    component: FocusZoneInsideScrollView,
+  },
+  {
+    name: 'FocusZone with no focusable components',
+    component: FocusZoneNoFocusableElements,
   },
   {
-    name: 'Customizable FocusZone',
-    component: CustomizableFocusZone,
+    name: 'FocusZone with no props',
+    component: FocusZoneNoProps,
   },
   {
-    name: 'FocusZone Edge Cases',
-    component: EdgeCasesFocusZone,
+    name: 'Nested FocusZone',
+    component: NestedFocusZone,
   },
 ];
 

package/src/TestComponents/FocusZone/styles.ts

@@ -1,5 +1,4 @@
 import { StyleSheet, View } from 'react-native';
-import { IStackProps } from '@fluentui-react-native/stack';
 import { Text } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Icon } from '@fluentui-react-native/icon';
@@ -9,11 +8,7 @@ export const focusZoneTestStyles = StyleSheet.create({
     flexDirection: 'row',
     alignContent: 'flex-start',
     alignItems: 'flex-start',
-  },
-  focusZoneContainer: {
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-    padding: 4,
+    padding: 10,
   },
   nestedFocusZoneStyle: {
     borderWidth: 1,
@@ -21,8 +16,27 @@ export const focusZoneTestStyles = StyleSheet.create({
     margin: 8,
   },
   focusZoneButton: {
-    height: 50,
-    width: 50,
+    height: 30,
+    width: 100,
+    margin: 10,
+  },
+  listWrapperButton: {
+    marginVertical: 10,
+  },
+  dashedBorder: {
+    borderWidth: 1,
+    borderStyle: 'dashed',
+  },
+  scrollViewStyle: {
+    height: 100,
+    width: 300,
+  },
+  scrollViewContentStyle: {
+    backgroundColor: 'grey',
+  },
+  scrollViewButton: {
+    marginHorizontal: 20,
+    marginBottom: 100,
   },
 });
 
@@ -43,8 +57,3 @@ export const SubheaderText = Text.customize({
   tokens: { variant: 'subheaderSemibold' },
   root: { style: { textDecorationLine: 'underline' } },
 });
-
-export const stackStyleFocusZone: IStackProps['style'] = {
-  flexDirection: 'column',
-  marginBottom: 40,
-};