@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -1,182 +0,0 @@
-import * as React from 'react';
-import type { TouchableHighlightProps } from 'react-native';
-import { TouchableHighlight, View } from 'react-native';
-
-import { FocusTrapZone, Text } from '@fluentui/react-native';
-import { FOCUSTRAPZONE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import type { Theme } from '@fluentui-react-native/framework';
-import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks';
-import { useFocusState } from '@fluentui-react-native/interactive-hooks';
-import { Stack } from '@fluentui-react-native/stack';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  return {
-    trapZoneStyle: {
-      padding: 10,
-      borderWidth: 2,
-      borderColor: t.colors.neutralStroke1,
-      borderStyle: 'dashed',
-    },
-    activeTrapZoneStyle: {
-      padding: 10,
-      borderColor: t.colors.neutralStroke1,
-      borderWidth: 2,
-      borderStyle: 'solid',
-    },
-    componentTwiddlerStyle: {
-      borderWidth: 1,
-      padding: 8,
-      margin: 4,
-      borderColor: t.colors.neutralStroke1,
-      borderStyle: 'solid',
-    },
-    focusedComponentTwiddlerStyle: {
-      borderWidth: 1,
-      padding: 8,
-      margin: 4,
-      borderStyle: 'solid',
-      borderColor: t.colors.strokeFocus2,
-      backgroundColor: t.colors.neutralBackground1Hover,
-    },
-    componentTwiddlerText: {
-      color: t.colors.neutralForeground1,
-    },
-    focusedComponentTwiddlerText: {
-      color: t.colors.neutralForeground1Hover,
-    },
-  };
-});
-
-interface IComponentTwiddlerProps {
-  label?: string;
-  onPress?: TouchableHighlightProps['onPress'];
-}
-
-export const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (props: IComponentTwiddlerProps) => {
-  const [focusProps, focusState] = useFocusState({});
-  const theme = useTheme();
-  const themedStyles = getThemedStyles(theme);
-
-  return (
-    <TouchableHighlight {...{ focusable: false }} onPress={props.onPress}>
-      <View
-        focusable={true}
-        {...(focusProps as any)}
-        style={focusState.focused ? themedStyles.focusedComponentTwiddlerStyle : themedStyles.componentTwiddlerStyle}
-      >
-        <Text style={focusState.focused ? themedStyles.focusedComponentTwiddlerText : themedStyles.componentTwiddlerText}>
-          {props.label}
-        </Text>
-      </View>
-    </TouchableHighlight>
-  );
-};
-
-const BasicFocusTrapZone: React.FunctionComponent = () => {
-  const theme = useTheme();
-  const themedStyles = getThemedStyles(theme);
-
-  const [state, setState] = React.useState({
-    useTrapZone: false,
-    renderTrapZone: true,
-    disableFirstFocus: false,
-    ignoreExternalFocusing: false,
-    focusPreviouslyFocusedInnerElement: false,
-  });
-
-  const ftzRef = React.useRef<View>(null);
-
-  const onKeyDown = React.useCallback(
-    (ev: KeyPressEvent) => {
-      if (ev.nativeEvent.key === 'Enter') {
-        setState({ ...state, useTrapZone: !state.useTrapZone });
-      } else if (ev.nativeEvent.key === ' ') {
-        setState({ ...state, renderTrapZone: !state.renderTrapZone });
-      } else if (ev.nativeEvent.key === 'f' && ftzRef.current) {
-        ftzRef.current!.focus();
-      }
-    },
-    [state, setState],
-  );
-
-  const onTwiddleExternalFocusing = React.useCallback(() => {
-    setState({ ...state, ignoreExternalFocusing: !state.ignoreExternalFocusing });
-  }, [state, setState]);
-
-  const onTwiddleFocusPrevious = React.useCallback(() => {
-    setState({ ...state, focusPreviouslyFocusedInnerElement: !state.focusPreviouslyFocusedInnerElement });
-  }, [state, setState]);
-
-  const onTwiddleFirstFocus = React.useCallback(() => {
-    setState({ ...state, disableFirstFocus: !state.disableFirstFocus });
-  }, [state, setState]);
-
-  return (
-    <View {...{ onKeyDown: onKeyDown }}>
-      <Stack style={stackStyle} gap={5}>
-        <ComponentTwiddler label="Press space to render or enter to trap, f to focus" />
-        <ComponentTwiddler
-          label={state.ignoreExternalFocusing ? 'ignoreExternalFocusing: true' : 'ignoreExternalFocusing: false'}
-          onPress={onTwiddleExternalFocusing}
-        />
-        <ComponentTwiddler
-          label={
-            state.focusPreviouslyFocusedInnerElement
-              ? 'focusPreviouslyFocusedInnerElement: true'
-              : 'focusPreviouslyFocusedInnerElement: false'
-          }
-          onPress={onTwiddleFocusPrevious}
-        />
-        <ComponentTwiddler
-          label={state.disableFirstFocus ? 'disableFirstFocus: true' : 'disableFirstFocus: false'}
-          onPress={onTwiddleFirstFocus}
-        />
-        {state.renderTrapZone && (
-          <FocusTrapZone
-            componentRef={ftzRef}
-            disableFirstFocus={state.disableFirstFocus}
-            ignoreExternalFocusing={state.ignoreExternalFocusing}
-            focusPreviouslyFocusedInnerElement={state.focusPreviouslyFocusedInnerElement}
-            disabled={!state.useTrapZone}
-            style={state.useTrapZone ? themedStyles.activeTrapZoneStyle : themedStyles.trapZoneStyle}
-          >
-            <Text>{state.useTrapZone ? 'Trap Active' : 'Trap Active'}</Text>
-            <ComponentTwiddler label="trapped" />
-            <ComponentTwiddler label="trapped" />
-            <ComponentTwiddler label="trapped" />
-            <ComponentTwiddler label="trapped" />
-          </FocusTrapZone>
-        )}
-      </Stack>
-    </View>
-  );
-};
-
-const focusTrapZoneSections: TestSection[] = [
-  {
-    name: 'Basic FocusTrapZone Usage',
-    testID: FOCUSTRAPZONE_TESTPAGE,
-    component: BasicFocusTrapZone,
-  },
-];
-
-export const FocusTrapTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Backlog',
-    iosStatus: 'N/A',
-    macosStatus: 'N/A',
-    androidStatus: 'N/A',
-  };
-
-  const description =
-    'FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.';
-
-  return <Test name="Focus Trap Zone Test" description={description} sections={focusTrapZoneSections} status={status}></Test>;
-};

package/src/TestComponents/FocusTrapZone/index.ts

@@ -1 +0,0 @@
-export * from './FocusTrapZoneTest';

package/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -1,170 +0,0 @@
-import React from 'react';
-import { Platform, View } from 'react-native';
-
-import type { FocusZoneDirection, FocusZoneTabNavigation, IFocusable } from '@fluentui/react-native';
-import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
-import type { ButtonProps } from '@fluentui-react-native/button';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import {
-  FOCUSZONE_CIRCLE_NAV_SWITCH,
-  FOCUSZONE_DEFAULT_TABBABLE_SWITCH,
-  FOCUSZONE_DIRECTION_ID,
-  FOCUSZONE_DIRECTION_PICKER,
-  FOCUSZONE_DISABLED_SWITCH,
-  FOCUSZONE_GRID_AFTER,
-  FOCUSZONE_GRID_BEFORE,
-  FOCUSZONE_GRID_BUTTON,
-  FOCUSZONE_TEST_COMPONENT,
-  FOCUSZONE_TWO_DIM_SWITCH,
-} from '@fluentui-react-native/e2e-testing';
-import type { GridButtonIndex } from '@fluentui-react-native/e2e-testing';
-import { Switch } from '@fluentui-react-native/switch';
-
-import { focusZoneTestStyles, GridButton } from './styles';
-import { commonTestStyles } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
-export const FocusZoneTabNavigations: FocusZoneTabNavigation[] = ['None', 'NavigateWrap', 'NavigateStopAtEnds', 'Normal'];
-
-// Buttons by default focus on click on Win32, but they don't on the Mac, so place focus explicitly for convenience
-function useFocusOnClickForMac(): Partial<ButtonProps> {
-  const componentRef = React.useRef<IFocusable>();
-  const onClick = React.useCallback(() => componentRef.current?.focus(), [componentRef]);
-  return Platform.OS === 'macos' ? { componentRef, onClick } : {};
-}
-
-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 (
-    <>
-      <Button
-        {...buttonProps}
-        {...useFocusOnClickForMac()}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(beforeID)}
-      />
-      {children}
-      <Button
-        {...buttonProps}
-        {...useFocusOnClickForMac()}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(afterID)}
-      />
-    </>
-  );
-};
-
-type GridOfButtonsProps = {
-  gridWidth: number;
-  gridHeight: number;
-  tabRef?: React.RefObject<View>;
-  tabbableIdx?: number;
-  e2etesting?: boolean;
-};
-
-export const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props: GridOfButtonsProps) => {
-  return (
-    <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={gridIndex === props.tabbableIdx ? props.tabRef : undefined}
-                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                  {...testProps(props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex as GridButtonIndex) : undefined)}
-                >
-                  <Text>{gridIndex}</Text>
-                </GridButton>
-              );
-            })}
-          </View>
-        );
-      })}
-    </View>
-  );
-};
-
-export const FocusZone2D: React.FunctionComponent = () => {
-  const [is2DNav, set2dNav] = React.useState(false);
-  const [isDisabled, setDisabled] = React.useState(false);
-  const [isCircularNav, setIsCircularNav] = React.useState(false);
-  const [useDeffaultTabbableElement, setUseDeffaultTabbableElement] = React.useState(false);
-  const [direction, setDirection] = React.useState<FocusZoneDirection>('bidirectional');
-
-  const tabbableRef = React.useRef(null);
-
-  return (
-    <View style={commonTestStyles.root}>
-      <View style={commonTestStyles.settings}>
-        <Text
-          variant="subheaderSemibold"
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(FOCUSZONE_TEST_COMPONENT)}
-        >
-          FocusZone Direction
-        </Text>
-        <MenuButton
-          content={`Current direction: ${direction}`}
-          menuItems={FocusZoneDirections.map((dir) => ({
-            itemKey: dir,
-            text: dir,
-            testID: FOCUSZONE_DIRECTION_ID(dir),
-          }))}
-          onItemClick={(dir) => setDirection(dir as FocusZoneDirection)}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(FOCUSZONE_DIRECTION_PICKER)}
-        />
-        <Switch
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(FOCUSZONE_TWO_DIM_SWITCH)}
-          label="2D Navigation"
-          checked={is2DNav}
-          onChange={(_, checked) => set2dNav(checked)}
-        />
-        <Switch
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(FOCUSZONE_DISABLED_SWITCH)}
-          label="Disabled"
-          checked={isDisabled}
-          onChange={(_, checked) => setDisabled(checked)}
-        />
-        <Switch
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(FOCUSZONE_CIRCLE_NAV_SWITCH)}
-          label="Circular Navigation"
-          checked={isCircularNav}
-          onChange={(_, checked) => setIsCircularNav(checked)}
-        />
-        <Switch
-          label="Use Default Tabbable Element"
-          checked={useDeffaultTabbableElement}
-          onChange={(_, checked) => setUseDeffaultTabbableElement(checked)}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(FOCUSZONE_DEFAULT_TABBABLE_SWITCH)}
-        />
-      </View>
-
-      <FocusZoneListWrapper beforeID={FOCUSZONE_GRID_BEFORE} afterID={FOCUSZONE_GRID_AFTER}>
-        <FocusZone
-          disabled={isDisabled}
-          use2DNavigation={is2DNav}
-          focusZoneDirection={direction}
-          isCircularNavigation={isCircularNav}
-          defaultTabbableElement={useDeffaultTabbableElement ? tabbableRef : undefined}
-        >
-          <GridOfButtons gridWidth={3} gridHeight={3} tabRef={tabbableRef} tabbableIdx={4} e2etesting />
-        </FocusZone>
-      </FocusZoneListWrapper>
-    </View>
-  );
-};

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,333 +0,0 @@
-import * as React from 'react';
-import { View, ScrollView, Pressable, TextInput } from 'react-native';
-
-import type { FocusZoneDirection, FocusZoneTabNavigation } from '@fluentui/react-native';
-import { FocusZone, MenuButton, Text, useOnPressWithFocus } from '@fluentui/react-native';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { FOCUSZONE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import type { CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-
-import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, FocusZoneTabNavigations, GridOfButtons } from './FocusZoneE2ETest';
-import { focusZoneTestStyles, SubheaderText } from './styles';
-import type { CollectionItem } from '../Common/MenuPicker';
-import { MenuPicker } from '../Common/MenuPicker';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const directionCollection: CollectionItem[] = FocusZoneDirections.map((dir) => ({ label: dir, value: dir }));
-
-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 DirectionalFocusZone: React.FunctionComponent = () => {
-  const [direction, setDirection] = React.useState<FocusZoneDirection>('none');
-
-  return (
-    <>
-      <MenuPicker prompt="Direction" selected={direction} onChange={setDirection} collection={directionCollection} />
-      <FocusZone focusZoneDirection={direction}>
-        <Checkboxes />
-      </FocusZone>
-    </>
-  );
-};
-
-const CommonUsageFocusZone: React.FunctionComponent = () => {
-  return (
-    <FocusZoneListWrapper>
-      <FocusZone isCircularNavigation={true}>
-        <SubheaderText>FocusZone with Circular Navigation</SubheaderText>
-        <Checkboxes />
-      </FocusZone>
-      <FocusZone disabled={true}>
-        <SubheaderText>Disabled FocusZone</SubheaderText>
-        <Checkboxes />
-      </FocusZone>
-    </FocusZoneListWrapper>
-  );
-};
-
-const FocusZoneInsideScrollView: React.FunctionComponent = () => {
-  return (
-    <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 FocusZoneNoFocusableElements: React.FunctionComponent = () => {
-  return (
-    <FocusZone>
-      <Checkboxes disabled />
-    </FocusZone>
-  );
-};
-
-const FocusZoneNoProps: React.FunctionComponent = () => {
-  return (
-    <FocusZone>
-      <Checkboxes />
-    </FocusZone>
-  );
-};
-
-const FocusZoneTabNavigationComponent: React.FunctionComponent = () => {
-  const [tabNavigation, setTabNavigation] = React.useState<FocusZoneTabNavigation>('None');
-
-  return (
-    <View>
-      <Text>FocusZone Tab Navigation</Text>
-      <MenuButton
-        content={`Current tab key navigation: ${tabNavigation}`}
-        menuItems={FocusZoneTabNavigations.map((dir) => ({
-          itemKey: dir,
-          text: dir,
-        }))}
-        onItemClick={(dir) => setTabNavigation(dir as FocusZoneTabNavigation)}
-      />
-      <FocusZone tabKeyNavigation={tabNavigation}>
-        <Checkboxes />
-      </FocusZone>
-    </View>
-  );
-};
-
-const TinyBox = () => {
-  const ref = React.useRef<View>();
-  const onPress = useOnPressWithFocus(ref, null);
-
-  return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
-};
-
-const WideBox = () => {
-  const ref = React.useRef<View>();
-  const onPress = useOnPressWithFocus(ref, null);
-
-  return <Pressable focusable style={focusZoneTestStyles.wideBoxStyle} ref={ref} onPress={onPress} />;
-};
-
-const TinyText = () => {
-  return (
-    <Text selectable style={focusZoneTestStyles.smallBoxStyle}>
-      Hi
-    </Text>
-  );
-};
-
-const WideText = () => {
-  return (
-    <Text selectable style={focusZoneTestStyles.wideBoxStyle}>
-      Hello world
-    </Text>
-  );
-};
-
-const DifferentSizesTest: React.FunctionComponent = () => {
-  return (
-    <FocusZone focusZoneDirection="bidirectional">
-      <View style={focusZoneTestStyles.dashedBorder}>
-        <WideBox />
-        <TinyBox />
-        <WideBox />
-        <TinyText />
-        <WideText />
-      </View>
-    </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">
-              <GridOfButtons gridWidth={3} gridHeight={1} />
-            </FocusZone>
-            <Text>Inner FocusZone 2, horizontal</Text>
-            <FocusZone focusZoneDirection="horizontal">
-              <GridOfButtons gridWidth={3} gridHeight={1} />
-            </FocusZone>
-            <Button>Inside Focus Zone</Button>
-          </FocusZone>
-        </View>
-      </>
-    </FocusZoneListWrapper>
-  );
-};
-
-const FocusZoneGrid: React.FunctionComponent = () => {
-  const [isCircularNavigation, setCircularNavigation] = React.useState(true);
-  const [tabNavigation, setTabNavigation] = React.useState<FocusZoneTabNavigation>('None');
-  const onCircularNavigationChange = React.useCallback((_, isChecked: boolean) => setCircularNavigation(isChecked), []);
-
-  return (
-    <FocusZoneListWrapper>
-      <>
-        <Text>FocusZone Grid</Text>
-        <Checkbox label="Circular Navigation" checked={isCircularNavigation} onChange={onCircularNavigationChange} />
-        <MenuButton
-          content={`Tab key navigation: ${tabNavigation}`}
-          menuItems={FocusZoneTabNavigations.map((dir) => ({
-            itemKey: dir,
-            text: dir,
-          }))}
-          onItemClick={(dir) => setTabNavigation(dir as FocusZoneTabNavigation)}
-        />
-        <FocusZone isCircularNavigation tabKeyNavigation={tabNavigation}>
-          <GridOfButtons gridWidth={3} gridHeight={3} />
-        </FocusZone>
-      </>
-    </FocusZoneListWrapper>
-  );
-};
-
-const FocusZoneTextInput: React.FunctionComponent = () => {
-  return (
-    <FocusZoneListWrapper>
-      <>
-        <Text>FocusZone Grid</Text>
-        <FocusZone>
-          <TextInput multiline={true} />
-        </FocusZone>
-      </>
-    </FocusZoneListWrapper>
-  );
-};
-
-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,
-    testID: FOCUSZONE_TESTPAGE,
-  },
-  {
-    name: 'Directional FocusZone Usage',
-    component: DirectionalFocusZone,
-  },
-  {
-    name: 'FocusZone with Tab Key Abstraction',
-    component: FocusZoneTabNavigationComponent,
-  },
-  {
-    name: 'ScrollView inside FocusZone',
-    component: FocusZoneInsideScrollView,
-  },
-  {
-    name: 'FocusZone with no focusable components',
-    component: FocusZoneNoFocusableElements,
-  },
-  {
-    name: 'FocusZone with no props',
-    component: FocusZoneNoProps,
-  },
-  {
-    name: 'Different Sized Children',
-    component: DifferentSizesTest,
-  },
-  {
-    name: 'Nested FocusZone',
-    component: NestedFocusZone,
-  },
-  {
-    name: 'FocusZone Grid',
-    component: FocusZoneGrid,
-  },
-  {
-    name: 'FocusZone with TextInput',
-    component: FocusZoneTextInput,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: '2D Navigation + E2E Testing',
-    component: FocusZone2D,
-  },
-];
-
-export const FocusZoneTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Backlog',
-    macosStatus: 'Production',
-    androidStatus: 'Backlog',
-  };
-
-  return (
-    <Test name="FocusZone Test" description={'No description.'} sections={focusZoneSections} status={status} e2eSections={e2eSections} />
-  );
-};

package/src/TestComponents/FocusZone/index.ts

@@ -1 +0,0 @@
-export * from './FocusZoneTest';