@fluentui-react-native/tester 0.101.6 → 0.101.7

package/lib-commonjs/E2E/common/consts.d.ts

@@ -12,6 +12,21 @@ export declare const TABITEM_A11Y_ROLE = "ControlType.TabItem";
 export declare const TEXT_A11Y_ROLE = "ControlType.Text";
 export declare const BOOT_APP_TIMEOUT = 60000;
 export declare const PAGE_TIMEOUT = 15000;
+export declare const enum Attribute {
+    AccessibilityLabel = "Name",
+    AccessibilityRole = "ControlType",
+    IsEnabled = "IsEnabled",
+    IsFocused = "HasKeyboardFocus",
+    IsRequiredForForm = "IsRequiredForForm",
+    IsTogglePatternAvailable = "IsTogglePatternAvailable",
+    ToggleState = "Toggle.ToggleState"
+}
+export declare const enum AttributeValue {
+    on = "1",
+    off = "0",
+    true = "True",
+    false = "False"
+}
 export declare const enum Keys {
     NULL = "\uE000",
     CANCEL = "\uE001",

package/lib-commonjs/E2E/common/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/E2E/common/consts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,uBAAuB,CAAC;AACrD,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AACrD,eAAO,MAAM,kBAAkB,yBAAyB,CAAC;AACzD,eAAO,MAAM,cAAc,0BAA0B,CAAC;AACtD,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AACjD,eAAO,MAAM,kBAAkB,yBAAyB,CAAC;AACzD,eAAO,MAAM,qBAAqB,4BAA4B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAC/C,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AACvD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAGjD,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAGlC,0BAAkB,IAAI;IACpB,IAAI,WAAW;IACf,MAAM,WAAW;IACjB,IAAI,WAAW;IACf,UAAU,WAAW;IACrB,GAAG,WAAW;IACd,KAAK,WAAW;IAChB,MAAM,WAAW;IACjB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,OAAO,WAAW;IAClB,GAAG,WAAW;IACd,KAAK,WAAW;IAChB,MAAM,WAAW;IACjB,KAAK,WAAW;IAChB,OAAO,WAAW;IAClB,SAAS,WAAW;IACpB,GAAG,WAAW;IACd,IAAI,WAAW;IACf,UAAU,WAAW;IACrB,IAAI,WAAW;IACf,QAAQ,WAAW;IACnB,EAAE,WAAW;IACb,WAAW,WAAW;IACtB,KAAK,WAAW;IAChB,UAAU,WAAW;IACrB,IAAI,WAAW;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,SAAS,WAAW;IACpB,MAAM,WAAW;IAEjB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,QAAQ,WAAW;IACnB,GAAG,WAAW;IACd,SAAS,WAAW;IACpB,QAAQ,WAAW;IACnB,OAAO,WAAW;IAClB,MAAM,WAAW;IAEjB,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,GAAG,WAAW;IACd,GAAG,WAAW;IACd,GAAG,WAAW;CACf"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/E2E/common/consts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,uBAAuB,CAAC;AACrD,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AACrD,eAAO,MAAM,kBAAkB,yBAAyB,CAAC;AACzD,eAAO,MAAM,cAAc,0BAA0B,CAAC;AACtD,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AACjD,eAAO,MAAM,kBAAkB,yBAAyB,CAAC;AACzD,eAAO,MAAM,qBAAqB,4BAA4B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAC/C,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AACvD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAGjD,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAElC,0BAAkB,SAAS;IACzB,kBAAkB,SAAS;IAC3B,iBAAiB,gBAAgB;IACjC,SAAS,cAAc;IACvB,SAAS,qBAAqB;IAC9B,iBAAiB,sBAAsB;IACvC,wBAAwB,6BAA6B;IACrD,WAAW,uBAAuB;CACnC;AAED,0BAAkB,cAAc;IAC9B,EAAE,MAAM;IACR,GAAG,MAAM;IACT,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAGD,0BAAkB,IAAI;IACpB,IAAI,WAAW;IACf,MAAM,WAAW;IACjB,IAAI,WAAW;IACf,UAAU,WAAW;IACrB,GAAG,WAAW;IACd,KAAK,WAAW;IAChB,MAAM,WAAW;IACjB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,OAAO,WAAW;IAClB,GAAG,WAAW;IACd,KAAK,WAAW;IAChB,MAAM,WAAW;IACjB,KAAK,WAAW;IAChB,OAAO,WAAW;IAClB,SAAS,WAAW;IACpB,GAAG,WAAW;IACd,IAAI,WAAW;IACf,UAAU,WAAW;IACrB,IAAI,WAAW;IACf,QAAQ,WAAW;IACnB,EAAE,WAAW;IACb,WAAW,WAAW;IACtB,KAAK,WAAW;IAChB,UAAU,WAAW;IACrB,IAAI,WAAW;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,SAAS,WAAW;IACpB,MAAM,WAAW;IAEjB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,QAAQ,WAAW;IACnB,GAAG,WAAW;IACd,SAAS,WAAW;IACpB,QAAQ,WAAW;IACnB,OAAO,WAAW;IAClB,MAAM,WAAW;IAEjB,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,EAAE,WAAW;IACb,GAAG,WAAW;IACd,GAAG,WAAW;IACd,GAAG,WAAW;CACf"}

package/lib-commonjs/TestComponents/Common/MenuPicker.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export interface CollectionItem<T = string> {
     label: string;
     value?: T;
+    testID?: string;
 }
 export interface MenuPickerProps {
     prompt?: string;
@@ -9,6 +10,7 @@ export interface MenuPickerProps {
     onChange?: (value: any, index?: number) => void;
     collection?: CollectionItem[];
     style?: any;
+    testID?: string;
 }
 export declare const MenuPicker: React.FunctionComponent<MenuPickerProps>;
 //# sourceMappingURL=MenuPicker.d.ts.map

package/lib-commonjs/TestComponents/Common/MenuPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPicker.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,MAAM;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAsB/D,CAAC"}
+{"version":3,"file":"MenuPicker.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,MAAM;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAuB/D,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.js

@@ -5,14 +5,14 @@ var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var picker_1 = require("@react-native-picker/picker");
 var MenuPicker = function (props) {
-    var prompt = props.prompt, selected = props.selected, onChange = props.onChange, collection = props.collection, style = props.style;
+    var prompt = props.prompt, selected = props.selected, onChange = props.onChange, collection = props.collection, style = props.style, testID = props.testID;
     var selectedItemKey;
     collection.forEach(function (item) {
         if (item.value == selected) {
             selectedItemKey = item.value;
         }
     });
-    return (React.createElement(picker_1.Picker, { prompt: prompt, selectedValue: selectedItemKey, onValueChange: function (value, index) { return onChange(value, index); }, style: (0, tslib_1.__assign)({}, style) }, collection.map(function (item, index) { return (React.createElement(picker_1.Picker.Item, { label: item.label, key: index, value: item.value })); })));
+    return (React.createElement(picker_1.Picker, { testID: testID, prompt: prompt, selectedValue: selectedItemKey, onValueChange: function (value, index) { return onChange(value, index); }, style: (0, tslib_1.__assign)({}, style) }, collection.map(function (item, index) { return (React.createElement(picker_1.Picker.Item, { label: item.label, key: index, value: item.value, testID: item.testID })); })));
 };
 exports.MenuPicker = MenuPicker;
 //# sourceMappingURL=MenuPicker.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPicker.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,sDAAqD;AAoB9C,IAAM,UAAU,GAA6C,UAAC,KAAsB;IACjF,IAAA,MAAM,GAA4C,KAAK,OAAjD,EAAE,QAAQ,GAAkC,KAAK,SAAvC,EAAE,QAAQ,GAAwB,KAAK,SAA7B,EAAE,UAAU,GAAY,KAAK,WAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAChE,IAAI,eAAe,CAAC;IAEpB,UAAU,CAAC,OAAO,CAAC,UAAC,IAAI;QACtB,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YAC1B,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAM,IACL,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,EAC9B,aAAa,EAAE,UAAC,KAAa,EAAE,KAAa,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EAAtB,CAAsB,EACvE,KAAK,4BAAO,KAAK,KAEhB,UAAU,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAC/B,oBAAC,eAAM,CAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAClE,EAFgC,CAEhC,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,UAAU,cAsBrB"}
+{"version":3,"file":"MenuPicker.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,sDAAqD;AAsB9C,IAAM,UAAU,GAA6C,UAAC,KAAsB;IACjF,IAAA,MAAM,GAAoD,KAAK,OAAzD,EAAE,QAAQ,GAA0C,KAAK,SAA/C,EAAE,QAAQ,GAAgC,KAAK,SAArC,EAAE,UAAU,GAAoB,KAAK,WAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IACxE,IAAI,eAAe,CAAC;IAEpB,UAAU,CAAC,OAAO,CAAC,UAAC,IAAI;QACtB,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YAC1B,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAM,IACL,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,EAC9B,aAAa,EAAE,UAAC,KAAa,EAAE,KAAa,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EAAtB,CAAsB,EACvE,KAAK,4BAAO,KAAK,KAEhB,UAAU,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAC/B,oBAAC,eAAM,CAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,CACvF,EAFgC,CAEhC,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,UAAU,cAuBrB"}

package/lib-commonjs/TestComponents/FocusZone/FocusZoneE2ETest.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+import { FocusZoneDirection } from '@fluentui/react-native';
+export declare const FocusZoneDirections: FocusZoneDirection[];
+declare type FocusZoneListWrapperProps = {
+    beforeID?: string;
+    afterID?: string;
+};
+export declare const FocusZoneListWrapper: React.FunctionComponent<FocusZoneListWrapperProps>;
+declare type GridOfButtonsProps = {
+    gridWidth: number;
+    gridHeight: number;
+    tabRef?: React.RefObject<View>;
+    tabbableIdx?: number;
+    e2etesting?: boolean;
+};
+export declare const GridOfButtons: React.FunctionComponent<GridOfButtonsProps>;
+export declare const FocusZone2D: React.FunctionComponent;
+export {};
+//# sourceMappingURL=FocusZoneE2ETest.d.ts.map

package/lib-commonjs/TestComponents/FocusZone/FocusZoneE2ETest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusZoneE2ETest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/FocusZoneE2ETest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAA+B,MAAM,wBAAwB,CAAC;AAkBzF,eAAO,MAAM,mBAAmB,EAAE,kBAAkB,EAAwD,CAAC;AAE7G,aAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CASnF,CAAC;AAEF,aAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAwBrE,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAsD/B,CAAC"}

package/lib-commonjs/TestComponents/FocusZone/FocusZoneE2ETest.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusZone2D = exports.GridOfButtons = exports.FocusZoneListWrapper = exports.FocusZoneDirections = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var react_native_1 = require("react-native");
+var react_native_2 = require("@fluentui/react-native");
+var switch_1 = require("@fluentui-react-native/switch");
+var button_1 = require("@fluentui-react-native/button");
+var styles_1 = require("../Common/styles");
+var consts_1 = require("./consts");
+var styles_2 = require("./styles");
+exports.FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
+var FocusZoneListWrapper = function (_a) {
+    var beforeID = _a.beforeID, afterID = _a.afterID, children = _a.children;
+    var buttonProps = { children: 'Click to Focus', style: styles_2.focusZoneTestStyles.listWrapperButton };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(button_1.ButtonV1, (0, tslib_1.__assign)({}, buttonProps, { testID: beforeID })),
+        children,
+        react_1.default.createElement(button_1.ButtonV1, (0, tslib_1.__assign)({}, buttonProps, { testID: afterID }))));
+};
+exports.FocusZoneListWrapper = FocusZoneListWrapper;
+var GridOfButtons = function (props) {
+    return (react_1.default.createElement(react_native_1.View, { style: styles_2.focusZoneTestStyles.dashedBorder }, (0, tslib_1.__spreadArray)([], Array(props.gridHeight), true).map(function (_value, heightIndex) {
+        return (react_1.default.createElement(react_native_1.View, { key: heightIndex, style: styles_2.focusZoneTestStyles.focusZoneViewStyle }, (0, tslib_1.__spreadArray)([], Array(props.gridWidth), true).map(function (_value, widthIndex) {
+            var gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
+            return (react_1.default.createElement(styles_2.GridButton, { testID: props.e2etesting ? (0, consts_1.FOCUSZONE_GRID_BUTTON)(gridIndex) : undefined, key: widthIndex, style: styles_2.focusZoneTestStyles.focusZoneButton, componentRef: gridIndex === props.tabbableIdx ? props.tabRef : undefined },
+                react_1.default.createElement(react_native_2.Text, null, gridIndex)));
+        })));
+    })));
+};
+exports.GridOfButtons = GridOfButtons;
+var FocusZone2D = function () {
+    var _a = react_1.default.useState(false), is2DNav = _a[0], set2dNav = _a[1];
+    var _b = react_1.default.useState(false), isDisabled = _b[0], setDisabled = _b[1];
+    var _c = react_1.default.useState(false), isCircularNav = _c[0], setIsCircularNav = _c[1];
+    var _d = react_1.default.useState(false), useDeffaultTabbableElement = _d[0], setUseDeffaultTabbableElement = _d[1];
+    var _e = react_1.default.useState('bidirectional'), direction = _e[0], setDirection = _e[1];
+    var tabbableRef = react_1.default.useRef(null);
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.root },
+        react_1.default.createElement(react_native_1.View, { style: styles_1.commonTestStyles.settings },
+            react_1.default.createElement(react_native_2.Text, { variant: "subheaderSemibold", testID: consts_1.FOCUSZONE_TEST_COMPONENT }, "FocusZone Direction"),
+            react_1.default.createElement(react_native_2.MenuButton, { testID: consts_1.FOCUSZONE_DIRECTION_PICKER, content: "Current direction: ".concat(direction), menuItems: exports.FocusZoneDirections.map(function (dir) { return ({
+                    itemKey: dir,
+                    text: dir,
+                    testID: (0, consts_1.FOCUSZONE_DIRECTION_ID)(dir),
+                }); }), onItemClick: function (dir) { return setDirection(dir); } }),
+            react_1.default.createElement(switch_1.Switch, { testID: consts_1.FOCUSZONE_TWO_DIM_SWITCH, label: "2D Navigation", checked: is2DNav, onChange: function (_, checked) { return set2dNav(checked); } }),
+            react_1.default.createElement(switch_1.Switch, { testID: consts_1.FOCUSZONE_DISABLED_SWITCH, label: "Disabled", checked: isDisabled, onChange: function (_, checked) { return setDisabled(checked); } }),
+            react_1.default.createElement(switch_1.Switch, { testID: consts_1.FOCUSZONE_CIRCLE_NAV_SWITCH, label: "Circular Navigation", checked: isCircularNav, onChange: function (_, checked) { return setIsCircularNav(checked); } }),
+            react_1.default.createElement(switch_1.Switch, { testID: consts_1.FOCUSZONE_DEFAULT_TABBABLE_SWITCH, label: "Use Default Tabbable Element", checked: useDeffaultTabbableElement, onChange: function (_, checked) { return setUseDeffaultTabbableElement(checked); } })),
+        react_1.default.createElement(exports.FocusZoneListWrapper, { beforeID: consts_1.FOCUSZONE_GRID_BEFORE, afterID: consts_1.FOCUSZONE_GRID_AFTER },
+            react_1.default.createElement(react_native_2.FocusZone, { disabled: isDisabled, use2DNavigation: is2DNav, focusZoneDirection: direction, isCircularNavigation: isCircularNav, defaultTabbableElement: useDeffaultTabbableElement ? tabbableRef : undefined },
+                react_1.default.createElement(exports.GridOfButtons, { gridWidth: 3, gridHeight: 3, tabRef: tabbableRef, tabbableIdx: 4, e2etesting: true })))));
+};
+exports.FocusZone2D = FocusZone2D;
+//# sourceMappingURL=FocusZoneE2ETest.js.map

package/lib-commonjs/TestComponents/FocusZone/FocusZoneE2ETest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusZoneE2ETest.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/FocusZoneE2ETest.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/TestComponents/FocusZone/FocusZoneTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusZoneTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/FocusZoneTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuO/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAUjC,CAAC"}
+{"version":3,"file":"FocusZoneTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/FocusZoneTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgJ/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAUjC,CAAC"}

package/lib-commonjs/TestComponents/FocusZone/FocusZoneTest.js

@@ -10,21 +10,33 @@ var experimental_checkbox_1 = require("@fluentui-react-native/experimental-check
 var Test_1 = require("../Test");
 var consts_1 = require("./consts");
 var styles_1 = require("./styles");
-var styles_2 = require("../Common/styles");
+var FocusZoneE2ETest_1 = require("./FocusZoneE2ETest");
 var MenuPicker_1 = require("../Common/MenuPicker");
-var FocusZoneDirections = ['bidirectional', 'horizontal', 'vertical', 'none'];
-var directionCollection = FocusZoneDirections.map(function (x) { return ({
-    label: x,
-    value: x,
-}); });
+var directionCollection = FocusZoneE2ETest_1.FocusZoneDirections.map(function (dir) { return ({ label: dir, value: dir }); });
 var Checkboxes = function (props) {
     return (React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder },
         React.createElement(experimental_checkbox_1.Checkbox, (0, tslib_1.__assign)({ label: "Option A" }, props)),
         React.createElement(experimental_checkbox_1.Checkbox, (0, tslib_1.__assign)({ label: "Option B" }, props)),
         React.createElement(experimental_checkbox_1.Checkbox, (0, tslib_1.__assign)({ label: "Option C" }, props))));
 };
+var DirectionalFocusZone = function () {
+    var _a = React.useState('none'), direction = _a[0], setDirection = _a[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MenuPicker_1.MenuPicker, { prompt: "Direction", selected: direction, onChange: setDirection, collection: directionCollection }),
+        React.createElement(react_native_2.FocusZone, { focusZoneDirection: direction },
+            React.createElement(Checkboxes, null))));
+};
+var CommonUsageFocusZone = function () {
+    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
+        React.createElement(react_native_2.FocusZone, { isCircularNavigation: true },
+            React.createElement(styles_1.SubheaderText, null, "FocusZone with Circular Navigation"),
+            React.createElement(Checkboxes, null)),
+        React.createElement(react_native_2.FocusZone, { disabled: true },
+            React.createElement(styles_1.SubheaderText, null, "Disabled FocusZone"),
+            React.createElement(Checkboxes, null))));
+};
 var FocusZoneInsideScrollView = function () {
-    return (React.createElement(FocusZoneListWrapper, null,
+    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
         React.createElement(react_native_2.FocusZone, { focusZoneDirection: "bidirectional" },
             React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder },
                 React.createElement(button_1.ButtonV1, { style: styles_1.focusZoneTestStyles.listWrapperButton }, "Inside Focus Zone"),
@@ -42,89 +54,29 @@ var FocusZoneNoProps = function () {
         React.createElement(Checkboxes, null)));
 };
 var NestedFocusZone = function () {
-    return (React.createElement(FocusZoneListWrapper, null,
+    return (React.createElement(FocusZoneE2ETest_1.FocusZoneListWrapper, null,
         React.createElement(React.Fragment, null,
             React.createElement(react_native_2.Text, null, "Parent FocusZone, vertical"),
             React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.nestedFocusZoneStyle },
                 React.createElement(react_native_2.FocusZone, { focusZoneDirection: "vertical" },
                     React.createElement(react_native_2.Text, null, "Inner FocusZone 1, horizontal"),
                     React.createElement(react_native_2.FocusZone, { focusZoneDirection: "horizontal" },
-                        React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
+                        React.createElement(FocusZoneE2ETest_1.GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
                     React.createElement(react_native_2.Text, null, "Inner FocusZone 2, horizontal"),
                     React.createElement(react_native_2.FocusZone, { focusZoneDirection: "horizontal" },
-                        React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
+                        React.createElement(FocusZoneE2ETest_1.GridOfButtons, { gridWidth: 3, gridHeight: 1 })),
                     React.createElement(button_1.ButtonV1, null, "Inside Focus Zone"))))));
 };
-var FocusZoneListWrapper = function (props) {
-    var buttonProps = { children: 'Click to Focus', style: styles_1.focusZoneTestStyles.listWrapperButton };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(button_1.ButtonV1, (0, tslib_1.__assign)({}, buttonProps)),
-        React.Children.map(props.children, function (child) {
-            return (React.createElement(React.Fragment, null,
-                child,
-                React.createElement(button_1.ButtonV1, (0, tslib_1.__assign)({}, buttonProps))));
-        })));
-};
-var DirectionalFocusZone = function () {
-    var _a = React.useState('none'), direction = _a[0], setDirection = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MenuPicker_1.MenuPicker, { prompt: "Direction", selected: direction, onChange: setDirection, collection: directionCollection }),
-        React.createElement(react_native_2.FocusZone, { focusZoneDirection: direction },
-            React.createElement(Checkboxes, null))));
-};
-var CommonUsageFocusZone = function () {
-    return (React.createElement(FocusZoneListWrapper, null,
-        React.createElement(react_native_2.FocusZone, { isCircularNavigation: true },
-            React.createElement(styles_1.SubheaderText, null, "FocusZone with Circular Navigation"),
-            React.createElement(Checkboxes, null)),
-        React.createElement(react_native_2.FocusZone, { disabled: true },
-            React.createElement(styles_1.SubheaderText, null, "Disabled FocusZone"),
-            React.createElement(Checkboxes, null))));
-};
-var GridOfButtons = function (props) {
-    return (React.createElement(react_native_1.View, { style: styles_1.focusZoneTestStyles.dashedBorder }, (0, tslib_1.__spreadArray)([], Array(props.gridHeight), true).map(function (_value, heightIndex) {
-        return (React.createElement(react_native_1.View, { key: heightIndex, style: styles_1.focusZoneTestStyles.focusZoneViewStyle }, (0, tslib_1.__spreadArray)([], Array(props.gridWidth), true).map(function (_value, widthIndex) {
-            var gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
-            return (React.createElement(styles_1.GridButton, { key: widthIndex, style: styles_1.focusZoneTestStyles.focusZoneButton },
-                React.createElement(react_native_2.Text, null, gridIndex)));
-        })));
-    })));
-};
-function SwitchWithLabel(props) {
-    var label = props.label, value = props.value, onValueChange = props.onValueChange;
-    return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
-        React.createElement(react_native_2.Text, null, label),
-        React.createElement(react_native_1.Switch, { value: value, onValueChange: onValueChange })));
-}
-var FocusZone2D = function () {
-    var _a = React.useState(false), is2DNav = _a[0], set2dNav = _a[1];
-    var _b = React.useState(false), isDisabled = _b[0], setDisabled = _b[1];
-    var _c = React.useState(false), isCircularNav = _c[0], setIsCircularNav = _c[1];
-    var _d = React.useState('bidirectional'), direction = _d[0], setDirection = _d[1];
-    return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
-        React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
-            React.createElement(SwitchWithLabel, { label: "2D Navigation", value: is2DNav, onValueChange: set2dNav }),
-            React.createElement(SwitchWithLabel, { label: "Disabled", value: isDisabled, onValueChange: setDisabled }),
-            React.createElement(SwitchWithLabel, { label: "Circular Navigation", value: isCircularNav, onValueChange: setIsCircularNav }),
-            React.createElement(MenuPicker_1.MenuPicker, { prompt: "Direction", selected: direction, onChange: setDirection, collection: directionCollection })),
-        React.createElement(FocusZoneListWrapper, null,
-            React.createElement(react_native_2.FocusZone, { disabled: isDisabled, use2DNavigation: is2DNav, focusZoneDirection: direction, isCircularNavigation: isCircularNav },
-                React.createElement(GridOfButtons, { gridWidth: 3, gridHeight: 3 })))));
-};
 var focusZoneSections = [
     {
         name: 'Common FocusZone Usage',
         component: CommonUsageFocusZone,
+        testID: consts_1.FOCUSZONE_TESTPAGE,
     },
     {
         name: 'Directional FocusZone Usage',
-        testID: consts_1.FOCUSZONE_TESTPAGE,
         component: DirectionalFocusZone,
     },
-    {
-        name: '2D Navigation',
-        component: FocusZone2D,
-    },
     {
         name: 'ScrollView inside FocusZone',
         component: FocusZoneInsideScrollView,
@@ -141,6 +93,10 @@ var focusZoneSections = [
         name: 'Nested FocusZone',
         component: NestedFocusZone,
     },
+    {
+        name: '2D Navigation + E2E Testing',
+        component: FocusZoneE2ETest_1.FocusZone2D,
+    },
 ];
 var FocusZoneTest = function () {
     var status = {

package/lib-commonjs/TestComponents/FocusZone/FocusZoneTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusZoneTest.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/FocusZoneTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAwD;AACxD,uDAA6E;AAC7E,wDAAgF;AAChF,sFAAuF;AACvF,gCAA4D;AAC5D,mCAA8C;AAC9C,mCAA0E;AAC1E,2CAAoD;AACpD,mDAAkE;AAElE,IAAM,mBAAmB,GAAyB,CAAC,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;AACtG,IAAM,mBAAmB,GAAyC,mBAAmB,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC;IAChG,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;CACT,CAAC,EAH+F,CAG/F,CAAC,CAAC;AAEJ,IAAM,UAAU,GAAG,UAAC,KAAoB;IACtC,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,4BAAmB,CAAC,YAAY;QAC3C,oBAAC,gCAAQ,0BAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI;QACxC,oBAAC,gCAAQ,0BAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI;QACxC,oBAAC,gCAAQ,0BAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CACnC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,yBAAyB,GAA4B;IACzD,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,wBAAS,IAAC,kBAAkB,EAAC,eAAe;YAC3C,oBAAC,mBAAI,IAAC,KAAK,EAAE,4BAAmB,CAAC,YAAY;gBAC3C,oBAAC,iBAAM,IAAC,KAAK,EAAE,4BAAmB,CAAC,iBAAiB,wBAA4B;gBAChF,oBAAC,yBAAU,IACT,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE,4BAAmB,CAAC,eAAe,EAC1C,qBAAqB,EAAE,4BAAmB,CAAC,sBAAsB,EACjE,4BAA4B,EAAE,IAAI;oBAElC,oBAAC,iBAAM,IAAC,KAAK,EAAE,4BAAmB,CAAC,gBAAgB,QAAY;oBAC/D,oBAAC,iBAAM,IAAC,KAAK,EAAE,4BAAmB,CAAC,gBAAgB,QAAY;oBAC/D,oBAAC,iBAAM,IAAC,KAAK,EAAE,4BAAmB,CAAC,gBAAgB,QAAY,CACpD,CACR,CACG,CACS,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,4BAA4B,GAA4B;IAC5D,OAAO,CACL,oBAAC,wBAAS;QACR,oBAAC,UAAU,IAAC,QAAQ,SAAG,CACb,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAA4B;IAChD,OAAO,CACL,oBAAC,wBAAS;QACR,oBAAC,UAAU,OAAG,CACJ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,eAAe,GAA4B;IAC/C,OAAO,CACL,oBAAC,oBAAoB;QACnB;YACE,oBAAC,mBAAI,qCAAkC;YACvC,oBAAC,mBAAI,IAAC,KAAK,EAAE,4BAAmB,CAAC,oBAAoB;gBACnD,oBAAC,wBAAS,IAAC,kBAAkB,EAAC,UAAU;oBACtC,oBAAC,mBAAI,wCAAqC;oBAC1C,oBAAC,wBAAS,IAAC,kBAAkB,EAAC,YAAY;wBACxC,oBAAC,aAAa,IAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAI,CACpC;oBACZ,oBAAC,mBAAI,wCAAqC;oBAC1C,oBAAC,wBAAS,IAAC,kBAAkB,EAAC,YAAY;wBACxC,oBAAC,aAAa,IAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAI,CACpC;oBACZ,oBAAC,iBAAM,4BAA2B,CACxB,CACP,CACN,CACkB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,oBAAoB,GAAG,UAAC,KAAK;IACjC,IAAM,WAAW,GAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,4BAAmB,CAAC,iBAAiB,EAAE,CAAC;IAC9G,OAAO,CACL;QACE,oBAAC,iBAAM,4BAAK,WAAW,EAAI;QAC1B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAC,KAAK;YACxC,OAAO,CACL;gBACG,KAAK;gBACN,oBAAC,iBAAM,4BAAK,WAAW,EAAI,CAC1B,CACJ,CAAC;QACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,oBAAoB,GAA4B;IAC9C,IAAA,KAA4B,KAAK,CAAC,QAAQ,CAAqB,MAAM,CAAC,EAArE,SAAS,QAAA,EAAE,YAAY,QAA8C,CAAC;IAE7E,OAAO,CACL;QACE,oBAAC,uBAAU,IAAC,MAAM,EAAC,WAAW,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,mBAAmB,GAAI;QAC/G,oBAAC,wBAAS,IAAC,kBAAkB,EAAE,SAAS;YACtC,oBAAC,UAAU,OAAG,CACJ,CACX,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,oBAAoB,GAA4B;IACpD,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,wBAAS,IAAC,oBAAoB,EAAE,IAAI;YACnC,oBAAC,sBAAa,6CAAmD;YACjE,oBAAC,UAAU,OAAG,CACJ;QACZ,oBAAC,wBAAS,IAAC,QAAQ,EAAE,IAAI;YACvB,oBAAC,sBAAa,6BAAmC;YACjD,oBAAC,UAAU,OAAG,CACJ,CACS,CACxB,CAAC;AACJ,CAAC,CAAC;AAOF,IAAM,aAAa,GAAgD,UAAC,KAAyB;IAC3F,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,4BAAmB,CAAC,YAAY,IAC1C,+BAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAE,GAAG,CAAC,UAAC,MAAM,EAAE,WAAmB;QAC5D,OAAO,CACL,oBAAC,mBAAI,IAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,4BAAmB,CAAC,kBAAkB,IAClE,+BAAI,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAE,GAAG,CAAC,UAAC,MAAM,EAAE,UAAkB;YAC1D,IAAM,SAAS,GAAG,WAAW,GAAG,KAAK,CAAC,SAAS,GAAG,UAAU,GAAG,CAAC,CAAC;YACjE,OAAO,CACL,oBAAC,mBAAU,IAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,4BAAmB,CAAC,eAAe;gBACrE,oBAAC,mBAAI,QAAE,SAAS,CAAQ,CACb,CACd,CAAC;QACJ,CAAC,CAAC,CACG,CACR,CAAC;IACJ,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAQF,SAAS,eAAe,CAAC,KAA4B;IAC3C,IAAA,KAAK,GAA2B,KAAK,MAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,aAAa,GAAK,KAAK,cAAV,CAAW;IAC9C,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAgB,CAAC,MAAM;QAClC,oBAAC,mBAAI,QAAE,KAAK,CAAQ;QACpB,oBAAC,qBAAM,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CACjD,CACR,CAAC;AACJ,CAAC;AAED,IAAM,WAAW,GAA4B;IACrC,IAAA,KAAsB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA1C,OAAO,QAAA,EAAE,QAAQ,QAAyB,CAAC;IAC5C,IAAA,KAA4B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAhD,UAAU,QAAA,EAAE,WAAW,QAAyB,CAAC;IAClD,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAxD,aAAa,QAAA,EAAE,gBAAgB,QAAyB,CAAC;IAC1D,IAAA,KAA4B,KAAK,CAAC,QAAQ,CAAqB,eAAe,CAAC,EAA9E,SAAS,QAAA,EAAE,YAAY,QAAuD,CAAC;IAEtF,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAgB,CAAC,IAAI;QAChC,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAgB,CAAC,QAAQ;YACpC,oBAAC,eAAe,IAAC,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,GAAI;YAClF,oBAAC,eAAe,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,GAAI;YACnF,oBAAC,eAAe,IAAC,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,GAAI;YACtG,oBAAC,uBAAU,IAAC,MAAM,EAAC,WAAW,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,mBAAmB,GAAI,CAC1G;QAEP,oBAAC,oBAAoB;YACnB,oBAAC,wBAAS,IAAC,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,oBAAoB,EAAE,aAAa;gBAC3H,oBAAC,aAAa,IAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAI,CACpC,CACS,CAClB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAkB;IACvC;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,oBAAoB;KAChC;IACD;QACE,IAAI,EAAE,6BAA6B;QACnC,MAAM,EAAE,2BAAkB;QAC1B,SAAS,EAAE,oBAAoB;KAChC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,WAAW;KACvB;IACD;QACE,IAAI,EAAE,6BAA6B;QACnC,SAAS,EAAE,yBAAyB;KACrC;IACD;QACE,IAAI,EAAE,wCAAwC;QAC9C,SAAS,EAAE,4BAA4B;KACxC;IACD;QACE,IAAI,EAAE,yBAAyB;QAC/B,SAAS,EAAE,gBAAgB;KAC5B;IACD;QACE,IAAI,EAAE,kBAAkB;QACxB,SAAS,EAAE,eAAe;KAC3B;CACF,CAAC;AAEK,IAAM,aAAa,GAA4B;IACpD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAE,iBAAiB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACrH,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB"}
+{"version":3,"file":"FocusZoneTest.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/FocusZoneTest.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/TestComponents/FocusZone/consts.d.ts

@@ -1,5 +1,15 @@
+import { FocusZoneDirection } from '@fluentui/react-native';
 export declare const HOMEPAGE_FOCUSZONE_BUTTON = "Homepage_FocusZone_Button";
 export declare const FOCUSZONE_TESTPAGE = "FocusZone_TestPage";
 export declare const FOCUSZONE_TEST_COMPONENT = "FocusZone_Test_Component";
 export declare const FOCUSZONE_SECOND_TEST_COMPONENT = "FocusZone_Second_Test_Component";
+export declare const FOCUSZONE_GRID_BEFORE = "FocusZone_Grid_Before";
+export declare const FOCUSZONE_GRID_AFTER = "FocusZone_Grid_After";
+export declare const FOCUSZONE_GRID_BUTTON: (idx: number) => string;
+export declare const FOCUSZONE_TWO_DIM_SWITCH = "FocusZone_2D_Switch";
+export declare const FOCUSZONE_DISABLED_SWITCH = "FocusZone_Disabled_Switch";
+export declare const FOCUSZONE_DEFAULT_TABBABLE_SWITCH = "FocusZone_Default_Tabbable_Switch";
+export declare const FOCUSZONE_CIRCLE_NAV_SWITCH = "FocusZone_Circular_Navigation_Switch";
+export declare const FOCUSZONE_DIRECTION_PICKER = "FocusZone_Direction_Picker";
+export declare const FOCUSZONE_DIRECTION_ID: (direction: FocusZoneDirection) => string;
 //# sourceMappingURL=consts.d.ts.map

package/lib-commonjs/TestComponents/FocusZone/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,8BAA8B,CAAC;AACrE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AAGvD,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AAGnE,eAAO,MAAM,+BAA+B,oCAAoC,CAAC"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,eAAO,MAAM,yBAAyB,8BAA8B,CAAC;AACrE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AAGvD,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AAGnE,eAAO,MAAM,+BAA+B,oCAAoC,CAAC;AAGjF,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,oBAAoB,yBAAyB,CAAC;AAG3D,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAAkC,CAAC;AAEpF,eAAO,MAAM,wBAAwB,wBAAwB,CAAC;AAC9D,eAAO,MAAM,yBAAyB,8BAA8B,CAAC;AACrE,eAAO,MAAM,iCAAiC,sCAAsC,CAAC;AACrF,eAAO,MAAM,2BAA2B,yCAAyC,CAAC;AAElF,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AACvE,eAAO,MAAM,sBAAsB,cAAe,kBAAkB,WAA2C,CAAC"}

package/lib-commonjs/TestComponents/FocusZone/consts.js

@@ -1,10 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FOCUSZONE_SECOND_TEST_COMPONENT = exports.FOCUSZONE_TEST_COMPONENT = exports.FOCUSZONE_TESTPAGE = exports.HOMEPAGE_FOCUSZONE_BUTTON = void 0;
+exports.FOCUSZONE_DIRECTION_ID = exports.FOCUSZONE_DIRECTION_PICKER = exports.FOCUSZONE_CIRCLE_NAV_SWITCH = exports.FOCUSZONE_DEFAULT_TABBABLE_SWITCH = exports.FOCUSZONE_DISABLED_SWITCH = exports.FOCUSZONE_TWO_DIM_SWITCH = exports.FOCUSZONE_GRID_BUTTON = exports.FOCUSZONE_GRID_AFTER = exports.FOCUSZONE_GRID_BEFORE = exports.FOCUSZONE_SECOND_TEST_COMPONENT = exports.FOCUSZONE_TEST_COMPONENT = exports.FOCUSZONE_TESTPAGE = exports.HOMEPAGE_FOCUSZONE_BUTTON = void 0;
 exports.HOMEPAGE_FOCUSZONE_BUTTON = 'Homepage_FocusZone_Button';
 exports.FOCUSZONE_TESTPAGE = 'FocusZone_TestPage';
 /* E2E Testing FocusZone 1 */
 exports.FOCUSZONE_TEST_COMPONENT = 'FocusZone_Test_Component'; // A component on each specific test page
 /* E2E Testing FocusZone 2 */
 exports.FOCUSZONE_SECOND_TEST_COMPONENT = 'FocusZone_Second_Test_Component';
+/* FocusZone List Wrapper Buttons Keys */
+exports.FOCUSZONE_GRID_BEFORE = 'FocusZone_Grid_Before';
+exports.FOCUSZONE_GRID_AFTER = 'FocusZone_Grid_After';
+/* Grid Button Test IDs */
+var FOCUSZONE_GRID_BUTTON = function (idx) { return "FocusZone_GridButton_".concat(idx); };
+exports.FOCUSZONE_GRID_BUTTON = FOCUSZONE_GRID_BUTTON;
+exports.FOCUSZONE_TWO_DIM_SWITCH = 'FocusZone_2D_Switch';
+exports.FOCUSZONE_DISABLED_SWITCH = 'FocusZone_Disabled_Switch';
+exports.FOCUSZONE_DEFAULT_TABBABLE_SWITCH = 'FocusZone_Default_Tabbable_Switch';
+exports.FOCUSZONE_CIRCLE_NAV_SWITCH = 'FocusZone_Circular_Navigation_Switch';
+exports.FOCUSZONE_DIRECTION_PICKER = 'FocusZone_Direction_Picker';
+var FOCUSZONE_DIRECTION_ID = function (direction) { return "FocusZone_Direction_Opt_".concat(direction); };
+exports.FOCUSZONE_DIRECTION_ID = FOCUSZONE_DIRECTION_ID;
 //# sourceMappingURL=consts.js.map

package/lib-commonjs/TestComponents/FocusZone/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,yBAAyB,GAAG,2BAA2B,CAAC;AACxD,QAAA,kBAAkB,GAAG,oBAAoB,CAAC;AAEvD,6BAA6B;AAChB,QAAA,wBAAwB,GAAG,0BAA0B,CAAC,CAAC,yCAAyC;AAE7G,6BAA6B;AAChB,QAAA,+BAA+B,GAAG,iCAAiC,CAAC"}
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/consts.ts"],"names":[],"mappings":";;;AAEa,QAAA,yBAAyB,GAAG,2BAA2B,CAAC;AACxD,QAAA,kBAAkB,GAAG,oBAAoB,CAAC;AAEvD,6BAA6B;AAChB,QAAA,wBAAwB,GAAG,0BAA0B,CAAC,CAAC,yCAAyC;AAE7G,6BAA6B;AAChB,QAAA,+BAA+B,GAAG,iCAAiC,CAAC;AAEjF,yCAAyC;AAC5B,QAAA,qBAAqB,GAAG,uBAAuB,CAAC;AAChD,QAAA,oBAAoB,GAAG,sBAAsB,CAAC;AAE3D,0BAA0B;AACnB,IAAM,qBAAqB,GAAG,UAAC,GAAW,IAAK,OAAA,+BAAwB,GAAG,CAAE,EAA7B,CAA6B,CAAC;AAAvE,QAAA,qBAAqB,yBAAkD;AAEvE,QAAA,wBAAwB,GAAG,qBAAqB,CAAC;AACjD,QAAA,yBAAyB,GAAG,2BAA2B,CAAC;AACxD,QAAA,iCAAiC,GAAG,mCAAmC,CAAC;AACxE,QAAA,2BAA2B,GAAG,sCAAsC,CAAC;AAErE,QAAA,0BAA0B,GAAG,4BAA4B,CAAC;AAChE,IAAM,sBAAsB,GAAG,UAAC,SAA6B,IAAK,OAAA,kCAA2B,SAAS,CAAE,EAAtC,CAAsC,CAAC;AAAnG,QAAA,sBAAsB,0BAA6E"}

package/lib-commonjs/TestComponents/FocusZone/styles.d.ts

@@ -22,6 +22,11 @@ export declare const focusZoneTestStyles: {
         borderWidth: number;
         borderStyle: "dashed";
     };
+    radioGroup: {
+        display: "flex";
+        flexDirection: "row";
+        fontSize: number;
+    };
     scrollViewStyle: {
         height: number;
         width: number;

package/lib-commonjs/TestComponents/FocusZone/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC9B,CAAC;AAEH,eAAO,MAAM,UAAU,iRAWrB,CAAC;AAEH,eAAO,MAAM,aAAa;;yQAGxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC;AAEH,eAAO,MAAM,UAAU,iRAWrB,CAAC;AAEH,eAAO,MAAM,aAAa;;yQAGxB,CAAC"}

package/lib-commonjs/TestComponents/FocusZone/styles.js

@@ -29,6 +29,11 @@ exports.focusZoneTestStyles = react_native_1.StyleSheet.create({
         borderWidth: 1,
         borderStyle: 'dashed',
     },
+    radioGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        fontSize: 12,
+    },
     scrollViewStyle: {
         height: 100,
         width: 300,

package/lib-commonjs/TestComponents/FocusZone/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":";;;AAAA,6CAAgD;AAChD,uDAA8C;AAC9C,wDAAmE;AACnE,oDAAmD;AAEtC,QAAA,mBAAmB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACnD,kBAAkB,EAAE;QAClB,aAAa,EAAE,KAAK;QACpB,YAAY,EAAE,YAAY;QAC1B,UAAU,EAAE,YAAY;QACxB,OAAO,EAAE,EAAE;KACZ;IACD,oBAAoB,EAAE;QACpB,WAAW,EAAE,CAAC;QACd,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;KACV;IACD,eAAe,EAAE;QACf,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;KACX;IACD,iBAAiB,EAAE;QACjB,cAAc,EAAE,EAAE;KACnB;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,QAAQ;KACtB;IACD,eAAe,EAAE;QACf,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;KACX;IACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,MAAM;KACxB;IACD,gBAAgB,EAAE;QAChB,gBAAgB,EAAE,EAAE;QACpB,YAAY,EAAE,GAAG;KAClB;CACF,CAAC,CAAC;AAEU,QAAA,UAAU,GAAG,iBAAM,CAAC,OAAO,CAAC;IACvC,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,WAAI;QACV,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE;QACT,OAAO,EAAE;YACP,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;SAC1E;KACF;CACF,CAAC,CAAC;AAEU,QAAA,aAAa,GAAG,mBAAI,CAAC,SAAS,CAAC;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;IACxC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,WAAW,EAAE,EAAE;CACrD,CAAC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusZone/styles.ts"],"names":[],"mappings":";;;AAAA,6CAAgD;AAChD,uDAA8C;AAC9C,wDAAmE;AACnE,oDAAmD;AAEtC,QAAA,mBAAmB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACnD,kBAAkB,EAAE;QAClB,aAAa,EAAE,KAAK;QACpB,YAAY,EAAE,YAAY;QAC1B,UAAU,EAAE,YAAY;QACxB,OAAO,EAAE,EAAE;KACZ;IACD,oBAAoB,EAAE;QACpB,WAAW,EAAE,CAAC;QACd,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;KACV;IACD,eAAe,EAAE;QACf,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;KACX;IACD,iBAAiB,EAAE;QACjB,cAAc,EAAE,EAAE;KACnB;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,QAAQ;KACtB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,EAAE;KACb;IACD,eAAe,EAAE;QACf,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;KACX;IACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,MAAM;KACxB;IACD,gBAAgB,EAAE;QAChB,gBAAgB,EAAE,EAAE;QACpB,YAAY,EAAE,GAAG;KAClB;CACF,CAAC,CAAC;AAEU,QAAA,UAAU,GAAG,iBAAM,CAAC,OAAO,CAAC;IACvC,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,WAAI;QACV,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE;QACT,OAAO,EAAE;YACP,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;SAC1E;KACF;CACF,CAAC,CAAC;AAEU,QAAA,aAAa,GAAG,mBAAI,CAAC,SAAS,CAAC;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;IACxC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,WAAW,EAAE,EAAE;CACrD,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.101.6",
+  "version": "0.101.7",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",

package/src/E2E/FocusZone/pages/FocusZonePageObject.ts

@@ -1,12 +1,115 @@
-import { FOCUSZONE_TESTPAGE, FOCUSZONE_TEST_COMPONENT, HOMEPAGE_FOCUSZONE_BUTTON } from '../../../TestComponents/FocusZone/consts';
+import { FocusZoneDirection } from '@fluentui/react-native';
+import { Attribute, AttributeValue, Keys } from '../../common/consts';
+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_TESTPAGE,
+  FOCUSZONE_TEST_COMPONENT,
+  FOCUSZONE_TWO_DIM_SWITCH,
+  HOMEPAGE_FOCUSZONE_BUTTON,
+} from '../../../TestComponents/FocusZone/consts';
 import { BasePage, By } from '../../common/BasePage';
 
+export const enum GridFocusZoneOption {
+  SetDirection = 0,
+  Set2DNavigation,
+  SetCircularNavigation,
+  UseDefaultTabbableElement,
+  Disable,
+}
+
+export const enum GridButtonSelector {
+  Before = 0,
+  One,
+  Two,
+  Three,
+  Four,
+  Five,
+  Six,
+  Seven,
+  Eight,
+  Nine,
+  After,
+}
+
+type BooleanGridFocusZoneOption =
+  | GridFocusZoneOption.UseDefaultTabbableElement
+  | GridFocusZoneOption.Set2DNavigation
+  | GridFocusZoneOption.SetCircularNavigation
+  | GridFocusZoneOption.Disable;
+
 class FocusZonePageObject extends BasePage {
-  // OVERRIDE: We use isExisting() here instead of isDisplayed() because FocusZone does not have any UI to it, it's simply
-  // a wrapper that adds keyboard focus functionality
   async waitForPrimaryElementDisplayed(timeout?: number): Promise<void> {
     const errorMsg = 'The FocusZone UI Element did not load correctly. Please see logs.';
-    await this.waitForCondition(async () => await this._primaryComponent.isExisting(), errorMsg, timeout);
+    await this.waitForCondition(async () => await this._primaryComponent.isDisplayed(), errorMsg, timeout);
+  }
+
+  async resetTest() {
+    await this.configureGridFocusZone(GridFocusZoneOption.SetDirection, 'bidirectional');
+    await this.configureGridFocusZone(GridFocusZoneOption.Set2DNavigation, false);
+    await this.configureGridFocusZone(GridFocusZoneOption.SetCircularNavigation, false);
+    await this.configureGridFocusZone(GridFocusZoneOption.Disable, false);
+  }
+
+  async configureGridFocusZone(option: GridFocusZoneOption.SetDirection, direction: FocusZoneDirection);
+  async configureGridFocusZone(option: BooleanGridFocusZoneOption, value: boolean);
+  async configureGridFocusZone(option: GridFocusZoneOption, arg: any): Promise<void> {
+    let switchElement: WebdriverIO.Element;
+    switch (option) {
+      case GridFocusZoneOption.SetDirection:
+        await (await this._directionPicker).click();
+        await browser.waitUntil(async () => await (await this._getGridFocusZoneMenuOption(arg)).isDisplayed());
+        await (await this._getGridFocusZoneMenuOption(arg)).click();
+        return;
+      case GridFocusZoneOption.Set2DNavigation:
+        switchElement = await this._twoDimSwitch;
+        break;
+      case GridFocusZoneOption.SetCircularNavigation:
+        switchElement = await this._circleNavSwitch;
+        break;
+      case GridFocusZoneOption.UseDefaultTabbableElement:
+        switchElement = await this._defaultTabbableElementSwitch;
+        break;
+      case GridFocusZoneOption.Disable:
+        switchElement = await this._disabledSwitch;
+        break;
+      default:
+    }
+    const switchValue = await switchElement.isSelected();
+    if (switchValue !== arg) {
+      await switchElement.click();
+    }
+  }
+
+  async sendKeys(selector: GridButtonSelector, keys: Keys[]): Promise<void> {
+    const btn = await this._getGridButton(selector);
+    await btn.addValue(keys);
+  }
+
+  async gridButtonIsFocused(selector: GridButtonSelector): Promise<boolean> {
+    const btn = await this._getGridButton(selector);
+    return (await this.getElementAttribute(btn, Attribute.IsFocused)) === AttributeValue.true;
+  }
+
+  private async _getGridButton(selector: GridButtonSelector): Promise<WebdriverIO.Element> {
+    switch (selector) {
+      case GridButtonSelector.Before:
+        return await this._gridBeforeButton;
+      case GridButtonSelector.After:
+        return await this._gridAfterButton;
+      default:
+        return await By(FOCUSZONE_GRID_BUTTON(selector));
+    }
+  }
+
+  private async _getGridFocusZoneMenuOption(direction: FocusZoneDirection) {
+    return await By(FOCUSZONE_DIRECTION_ID(direction));
   }
 
   /*****************************************/
@@ -27,6 +130,34 @@ class FocusZonePageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_FOCUSZONE_BUTTON);
   }
+
+  get _directionPicker() {
+    return By(FOCUSZONE_DIRECTION_PICKER);
+  }
+
+  get _twoDimSwitch() {
+    return By(FOCUSZONE_TWO_DIM_SWITCH);
+  }
+
+  get _disabledSwitch() {
+    return By(FOCUSZONE_DISABLED_SWITCH);
+  }
+
+  get _circleNavSwitch() {
+    return By(FOCUSZONE_CIRCLE_NAV_SWITCH);
+  }
+
+  get _defaultTabbableElementSwitch() {
+    return By(FOCUSZONE_DEFAULT_TABBABLE_SWITCH);
+  }
+
+  get _gridBeforeButton() {
+    return By(FOCUSZONE_GRID_BEFORE);
+  }
+
+  get _gridAfterButton() {
+    return By(FOCUSZONE_GRID_AFTER);
+  }
 }
 
 export default new FocusZonePageObject();