@fluentui-react-native/tester-core 0.1.1

package/lib-commonjs/TestComponents/Expander/ExpanderTest.js

@@ -0,0 +1,207 @@
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ExpanderTest = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const React = __importStar(require('react'));
+const react_native_1 = require('react-native');
+const react_native_2 = require('@fluentui/react-native');
+const experimental_expander_1 = require('@fluentui-react-native/experimental-expander');
+const stack_1 = require('@fluentui-react-native/stack');
+const consts_1 = require('./consts');
+const styles_1 = require('../Common/styles');
+const Test_1 = require('../Test');
+const CustomizedExpander = experimental_expander_1.Expander.customize({
+  headerBackground: '#9c9c9c',
+  headerForeground: '#ffffff',
+  contentBackground: '#c3c3c3',
+  chevronBackground: '#ff7f7f',
+  chevronForeground: '#ffffff',
+  chevronPointerOverBackground: '#b5ffb2',
+  chevronPointerOverForeground: '#bfbdbd',
+  chevronPressedBackground: '#ffb2f4',
+  chevronPressedForeground: '#912a2a',
+  headerForegroundPointerOver: '#27f238',
+  headerForegroundPressed: '#f227eb',
+  headerBorderBrush: '#f22727',
+  headerBorderPointerOverBrush: '#27f238',
+  headerBorderPressedBrush: '#f227eb',
+  contentBorderBrush: '#f227eb',
+  headerBorderThickness: 2,
+  chevronBorderBrush: '#f22727',
+  chevronBorderPointerOverBrush: '#27f238',
+  chevronBorderPressedBrush: '#f227eb',
+  chevronBorderThickness: 2,
+});
+const ExpanderMainTest = () => {
+  /** This test page has not yet been tested and does not currently build because
+   * the react-native-test-app does not yet support WinUI 2.6
+   * Filed issue in react-native-test-app: https://github.com/microsoft/react-native-test-app/issues/444
+   */
+  const [switchValue, setSwitchValue] = React.useState(false);
+  const [expanderText, setExpanderText] = React.useState('Initial state');
+  const onExpanding = () => {
+    setExpanderText('Expanding event changed title');
+  };
+  const onCollapsing = () => {
+    setExpanderText('Collapsing event changed title');
+  };
+  return jsx_runtime_1.jsxs(stack_1.Stack, {
+    style: styles_1.stackStyle,
+    children: [
+      jsx_runtime_1.jsx(react_native_2.Text, { children: 'expanded=true, expandDirection=up, and event functionality' }),
+      jsx_runtime_1.jsxs(experimental_expander_1.Expander, {
+        collapsedHeight: 50,
+        expandedHeight: 100,
+        expanded: true,
+        expandDirection: 'up',
+        onCollapsing: onExpanding,
+        onExpanding: onCollapsing,
+        children: [
+          jsx_runtime_1.jsx(react_native_2.Text, { children: expanderText }),
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'Text in the content' }),
+        ],
+      }),
+      jsx_runtime_1.jsx(react_native_2.Text, { children: 'enabled = false' }),
+      jsx_runtime_1.jsxs(experimental_expander_1.Expander, {
+        collapsedHeight: 50,
+        expandedHeight: 100,
+        enabled: false,
+        children: [
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'User cannot interact with this control' }),
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'Content that you should not see' }),
+        ],
+      }),
+      jsx_runtime_1.jsx(react_native_2.Text, { children: 'Multiple components in header and content' }),
+      jsx_runtime_1.jsxs(experimental_expander_1.Expander, {
+        collapsedHeight: 64,
+        expandedHeight: 150,
+        children: [
+          jsx_runtime_1.jsxs(react_native_1.View, {
+            style: { flexDirection: 'row', width: 200, height: 62 },
+            children: [
+              jsx_runtime_1.jsxs(react_native_1.View, {
+                style: { alignSelf: 'center' },
+                children: [
+                  jsx_runtime_1.jsx(react_native_2.Text, { children: 'Line one' }),
+                  jsx_runtime_1.jsx(react_native_2.Text, { children: 'Line two' }),
+                ],
+              }),
+              jsx_runtime_1.jsx(react_native_1.Switch, {
+                style: { marginLeft: 'auto', marginTop: 12 },
+                value: switchValue,
+                onValueChange: setSwitchValue,
+              }),
+            ],
+          }),
+          jsx_runtime_1.jsxs(react_native_1.View, {
+            children: [
+              jsx_runtime_1.jsx(react_native_2.Text, { children: 'First line of text' }),
+              jsx_runtime_1.jsx(react_native_2.Text, { children: 'Second line of text' }),
+            ],
+          }),
+        ],
+      }),
+      jsx_runtime_1.jsx(react_native_2.Text, { children: 'Customized Expander' }),
+      jsx_runtime_1.jsxs(CustomizedExpander, {
+        collapsedHeight: 50,
+        expandedHeight: 100,
+        children: [
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'Text in the header' }),
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'Text in the content' }),
+        ],
+      }),
+    ],
+  });
+};
+const BasicExpander = () => {
+  return jsx_runtime_1.jsx(stack_1.Stack, {
+    style: styles_1.stackStyle,
+    children: jsx_runtime_1.jsx(react_native_1.View, {
+      style: styles_1.commonTestStyles.root,
+      children: jsx_runtime_1.jsxs(experimental_expander_1.Expander, {
+        collapsedHeight: 50,
+        expandedHeight: 100,
+        children: [
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'Text in the header' }),
+          jsx_runtime_1.jsx(react_native_2.Text, { children: 'Text in the content' }),
+        ],
+      }),
+    }),
+  });
+};
+const expanderSections = [
+  {
+    name: 'BaseExpander',
+    testID: consts_1.EXPANDER_TESTPAGE,
+    component: BasicExpander,
+  },
+  {
+    name: 'Expander',
+    testID: consts_1.EXPANDER_TESTPAGE,
+    component: ExpanderMainTest,
+  },
+];
+const ExpanderTest = () => {
+  const status = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+  const description =
+    'Expander is a content control that displays components in the header and content. The control has an expanded and collapsed size. Expander is a native control implemented with WinUI 2.6 Expander.';
+  return jsx_runtime_1.jsx(Test_1.Test, { name: 'Expander Test', description: description, sections: expanderSections, status: status });
+};
+exports.ExpanderTest = ExpanderTest;
+//# sourceMappingURL=ExpanderTest.js.map

package/lib-commonjs/TestComponents/Expander/ExpanderTest.js.map

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

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

@@ -0,0 +1,3 @@
+export declare const HOMEPAGE_EXPANDER_BUTTON = 'Homepage_Expander_Button';
+export declare const EXPANDER_TESTPAGE = 'Expander_TestPage';
+//# sourceMappingURL=consts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Expander/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

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

@@ -0,0 +1,6 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.EXPANDER_TESTPAGE = exports.HOMEPAGE_EXPANDER_BUTTON = void 0;
+exports.HOMEPAGE_EXPANDER_BUTTON = 'Homepage_Expander_Button';
+exports.EXPANDER_TESTPAGE = 'Expander_TestPage';
+//# sourceMappingURL=consts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../src/TestComponents/Expander/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,wBAAwB,GAAG,0BAA0B,CAAC;AACtD,QAAA,iBAAiB,GAAG,mBAAmB,CAAC"}

package/lib-commonjs/TestComponents/Expander/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ExpanderTest';
+export * from './consts';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/TestComponents/Expander/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Expander/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}

package/lib-commonjs/TestComponents/Expander/index.js

@@ -0,0 +1,30 @@
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m) if (p !== 'default' && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  };
+Object.defineProperty(exports, '__esModule', { value: true });
+__exportStar(require('./ExpanderTest'), exports);
+__exportStar(require('./consts'), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/TestComponents/Expander/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/Expander/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,2CAAyB"}

package/lib-commonjs/TestComponents/FocusTrapZone/FocusTrapZoneTest.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { TouchableHighlightProps } from 'react-native';
+interface IComponentTwiddlerProps {
+  label?: string;
+  onPress?: TouchableHighlightProps['onPress'];
+}
+export declare const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps>;
+export declare const FocusTrapTest: React.FunctionComponent;
+export {};
+//# sourceMappingURL=FocusTrapZoneTest.d.ts.map

package/lib-commonjs/TestComponents/FocusTrapZone/FocusTrapZoneTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrapZoneTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAsD5D,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAkB9E,CAAC;AA0FF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAajC,CAAC"}

package/lib-commonjs/TestComponents/FocusTrapZone/FocusTrapZoneTest.js

@@ -0,0 +1,219 @@
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.FocusTrapTest = exports.ComponentTwiddler = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const React = __importStar(require('react'));
+const react_native_1 = require('react-native');
+const react_native_2 = require('@fluentui/react-native');
+const e2e_testing_1 = require('@fluentui-react-native/e2e-testing');
+const interactive_hooks_1 = require('@fluentui-react-native/interactive-hooks');
+const stack_1 = require('@fluentui-react-native/stack');
+const theme_types_1 = require('@fluentui-react-native/theme-types');
+const themed_stylesheet_1 = require('@fluentui-react-native/themed-stylesheet');
+const styles_1 = require('../Common/styles');
+const Test_1 = require('../Test');
+const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((t) => {
+  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,
+    },
+  };
+});
+const ComponentTwiddler = (props) => {
+  const [focusProps, focusState] = (0, interactive_hooks_1.useFocusState)({});
+  const theme = (0, theme_types_1.useTheme)();
+  const themedStyles = getThemedStyles(theme);
+  return jsx_runtime_1.jsx(react_native_1.TouchableHighlight, {
+    focusable: false,
+    onPress: props.onPress,
+    children: jsx_runtime_1.jsx(react_native_1.View, {
+      focusable: true,
+      ...focusProps,
+      style: focusState.focused ? themedStyles.focusedComponentTwiddlerStyle : themedStyles.componentTwiddlerStyle,
+      children: jsx_runtime_1.jsx(react_native_2.Text, {
+        style: focusState.focused ? themedStyles.focusedComponentTwiddlerText : themedStyles.componentTwiddlerText,
+        children: props.label,
+      }),
+    }),
+  });
+};
+exports.ComponentTwiddler = ComponentTwiddler;
+const BasicFocusTrapZone = () => {
+  const theme = (0, theme_types_1.useTheme)();
+  const themedStyles = getThemedStyles(theme);
+  const [state, setState] = React.useState({
+    useTrapZone: false,
+    renderTrapZone: true,
+    disableFirstFocus: false,
+    ignoreExternalFocusing: false,
+    focusPreviouslyFocusedInnerElement: false,
+  });
+  const ftzRef = React.useRef(null);
+  const onKeyDown = React.useCallback(
+    (ev) => {
+      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 jsx_runtime_1.jsx(react_native_1.View, {
+    onKeyDown: onKeyDown,
+    children: jsx_runtime_1.jsxs(stack_1.Stack, {
+      style: styles_1.stackStyle,
+      gap: 5,
+      children: [
+        jsx_runtime_1.jsx(exports.ComponentTwiddler, { label: 'Press space to render or enter to trap, f to focus' }),
+        jsx_runtime_1.jsx(exports.ComponentTwiddler, {
+          label: state.ignoreExternalFocusing ? 'ignoreExternalFocusing: true' : 'ignoreExternalFocusing: false',
+          onPress: onTwiddleExternalFocusing,
+        }),
+        jsx_runtime_1.jsx(exports.ComponentTwiddler, {
+          label: state.focusPreviouslyFocusedInnerElement
+            ? 'focusPreviouslyFocusedInnerElement: true'
+            : 'focusPreviouslyFocusedInnerElement: false',
+          onPress: onTwiddleFocusPrevious,
+        }),
+        jsx_runtime_1.jsx(exports.ComponentTwiddler, {
+          label: state.disableFirstFocus ? 'disableFirstFocus: true' : 'disableFirstFocus: false',
+          onPress: onTwiddleFirstFocus,
+        }),
+        state.renderTrapZone &&
+          jsx_runtime_1.jsxs(react_native_2.FocusTrapZone, {
+            componentRef: ftzRef,
+            disableFirstFocus: state.disableFirstFocus,
+            ignoreExternalFocusing: state.ignoreExternalFocusing,
+            focusPreviouslyFocusedInnerElement: state.focusPreviouslyFocusedInnerElement,
+            disabled: !state.useTrapZone,
+            style: state.useTrapZone ? themedStyles.activeTrapZoneStyle : themedStyles.trapZoneStyle,
+            children: [
+              jsx_runtime_1.jsx(react_native_2.Text, { children: state.useTrapZone ? 'Trap Active' : 'Trap Active' }),
+              jsx_runtime_1.jsx(exports.ComponentTwiddler, { label: 'trapped' }),
+              jsx_runtime_1.jsx(exports.ComponentTwiddler, { label: 'trapped' }),
+              jsx_runtime_1.jsx(exports.ComponentTwiddler, { label: 'trapped' }),
+              jsx_runtime_1.jsx(exports.ComponentTwiddler, { label: 'trapped' }),
+            ],
+          }),
+      ],
+    }),
+  });
+};
+const focusTrapZoneSections = [
+  {
+    name: 'Basic FocusTrapZone Usage',
+    testID: e2e_testing_1.FOCUSTRAPZONE_TESTPAGE,
+    component: BasicFocusTrapZone,
+  },
+];
+const FocusTrapTest = () => {
+  const status = {
+    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 jsx_runtime_1.jsx(Test_1.Test, {
+    name: 'Focus Trap Zone Test',
+    description: description,
+    sections: focusTrapZoneSections,
+    status: status,
+  });
+};
+exports.FocusTrapTest = FocusTrapTest;
+//# sourceMappingURL=FocusTrapZoneTest.js.map

package/lib-commonjs/TestComponents/FocusTrapZone/FocusTrapZoneTest.js.map

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

package/lib-commonjs/TestComponents/FocusTrapZone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FocusTrapZoneTest';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/TestComponents/FocusTrapZone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/FocusTrapZone/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/lib-commonjs/TestComponents/FocusTrapZone/index.js

@@ -0,0 +1,29 @@
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m) if (p !== 'default' && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  };
+Object.defineProperty(exports, '__esModule', { value: true });
+__exportStar(require('./FocusTrapZoneTest'), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/TestComponents/FocusTrapZone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/FocusTrapZone/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sDAAoC"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { FocusZoneDirection, FocusZoneTabNavigation } from '@fluentui/react-native';
+export declare const FocusZoneDirections: FocusZoneDirection[];
+export declare const FocusZoneTabNavigations: FocusZoneTabNavigation[];
+type FocusZoneListWrapperProps = React.PropsWithChildren<{
+  beforeID?: string;
+  afterID?: string;
+}>;
+export declare const FocusZoneListWrapper: React.FunctionComponent<FocusZoneListWrapperProps>;
+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,EAAY,IAAI,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAc,MAAM,wBAAwB,CAAC;AAuBrG,eAAO,MAAM,mBAAmB,EAAE,kBAAkB,EAAwD,CAAC;AAC7G,eAAO,MAAM,uBAAuB,EAAE,sBAAsB,EAA6D,CAAC;AAS1H,KAAK,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAmBnF,CAAC;AAEF,KAAK,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,CAyBrE,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAyE/B,CAAC"}