@fluentui-react-native/tester-core 0.1.1

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.js

@@ -0,0 +1,122 @@
+'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.MenuButtonV1E2ETest = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const React = __importStar(require('react'));
+const react_native_1 = require('react-native');
+const e2e_testing_1 = require('@fluentui-react-native/e2e-testing');
+const experimental_menu_button_1 = require('@fluentui-react-native/experimental-menu-button');
+const MenuButtonV1TestStyles_1 = require('./MenuButtonV1TestStyles');
+const testData_1 = require('./testData');
+const TestProps_1 = require('../Common/TestProps');
+const MenuButtonV1E2ETest = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+  const contextualMenuProps = {
+    accessibilityLabel: 'MenuButton',
+    shouldFocusOnMount: true,
+    shouldFocusOnContainer: false,
+  };
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    children: jsx_runtime_1.jsx(react_native_1.View, {
+      style: MenuButtonV1TestStyles_1.viewWrapperStyle,
+      children: jsx_runtime_1.jsxs(react_native_1.View, {
+        style: MenuButtonV1TestStyles_1.columnStyle,
+        children: [
+          jsx_runtime_1.jsxs(react_native_1.Text, {
+            children: [
+              jsx_runtime_1.jsx(react_native_1.Text, { children: 'Last Menu Item Clicked: ' }),
+              lastMenuItemClicked > 0
+                ? jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: lastMenuItemClicked })
+                : jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: 'none' }),
+            ],
+          }),
+          jsx_runtime_1.jsx(react_native_1.View, {
+            style: { ...MenuButtonV1TestStyles_1.rowStyle, paddingHorizontal: 5 },
+            children: jsx_runtime_1.jsx(react_native_1.View, {
+              style: MenuButtonV1TestStyles_1.columnStyle,
+              children: jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                content: 'Standard MenuButton with Accessibility Label',
+                menuItems: testData_1.menuItems,
+                onItemClick: onItemClick,
+                contextualMenu: contextualMenuProps,
+                accessibilityLabel: e2e_testing_1.MENUBUTTONV1_ACCESSIBILITY_LABEL,
+                ...(0, TestProps_1.testProps)(e2e_testing_1.MENUBUTTONV1_TEST_COMPONENT),
+              }),
+            }),
+          }),
+          jsx_runtime_1.jsx(react_native_1.View, {
+            style: { ...MenuButtonV1TestStyles_1.rowStyle, paddingHorizontal: 5 },
+            children: jsx_runtime_1.jsx(react_native_1.View, {
+              style: MenuButtonV1TestStyles_1.columnStyle,
+              children: jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                content: e2e_testing_1.MENUBUTTONV1_TEST_COMPONENT_LABEL,
+                menuItems: testData_1.menuItems,
+                onItemClick: onItemClick,
+                contextualMenu: contextualMenuProps,
+                ...(0, TestProps_1.testProps)(e2e_testing_1.MENUBUTTONV1_NO_A11Y_LABEL_COMPONENT),
+              }),
+            }),
+          }),
+        ],
+      }),
+    }),
+  });
+};
+exports.MenuButtonV1E2ETest = MenuButtonV1E2ETest;
+//# sourceMappingURL=MenuButtonV1E2ETest.js.map

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonV1E2ETest.js","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAY,KAAK,kCAAc;AAC/B,+CAA0C;AAG1C,oEAK4C;AAC5C,8FAA6E;AAE7E,qEAA8F;AAC9F,yCAAuC;AACvC,mDAAgD;AAEzC,MAAM,mBAAmB,GAA4B,GAAG,EAAE,CAAC;IAChE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,GAAG,EAAE,EAAE,CAAC;QACP,sBAAsB,CAAC,GAAG,CAAC,CAAC;IAAA,CAC7B,EACD,CAAC,sBAAsB,CAAC,CACzB,CAAC;IAEF,MAAM,mBAAmB,GAAwB;QAC/C,kBAAkB,EAAE,YAAY;QAChC,kBAAkB,EAAE,IAAI;QACxB,sBAAsB,EAAE,KAAK;KAC9B,CAAC;IAEF,OAAO,CACL,kBAAC,mBAAI,cACH,kBAAC,mBAAI,IAAC,KAAK,EAAE,yCAAgB,YAC3B,mBAAC,mBAAI,IAAC,KAAK,EAAE,oCAAW;oBACtB,mBAAC,mBAAI;4BACH,kBAAC,mBAAI,2CAAgC,EACpC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAC,mBAAI,IAAC,KAAK,EAAE,kCAAS,YAAG,mBAAmB,GAAQ,CAAC,CAAC,CAAC,kBAAC,mBAAI,IAAC,KAAK,EAAE,kCAAS,qBAAa,IAChH,EACP,kBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,GAAG,iCAAQ,EAAE,iBAAiB,EAAE,CAAC,EAAE,YAChD,kBAAC,mBAAI,IAAC,KAAK,EAAE,oCAAW,YACtB,kBAAC,qCAAU,IACT,OAAO,EAAC,8CAA8C,EACtD,SAAS,EAAE,oBAAS,EACpB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,8CAAgC,KAEhD,IAAA,qBAAS,EAAC,yCAA2B,CAAC,GAC1C,GACG,GACF,EACP,kBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,GAAG,iCAAQ,EAAE,iBAAiB,EAAE,CAAC,EAAE,YAChD,kBAAC,mBAAI,IAAC,KAAK,EAAE,oCAAW,YACtB,kBAAC,qCAAU,IACT,OAAO,EAAE,+CAAiC,EAC1C,SAAS,EAAE,oBAAS,EACpB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,mBAAmB,KAE/B,IAAA,qBAAS,EAAC,kDAAoC,CAAC,GACnD,GACG,GACF;oBACF,GACF,GACF,CACR,CAAC;AAAA,CACH,CAAC;AArDW,QAAA,mBAAmB,GAAnB,mBAAmB,CAqD9B"}

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1Test.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const MenuButtonV1Test: React.FunctionComponent;
+//# sourceMappingURL=MenuButtonV1Test.d.ts.map

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1Test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonV1Test.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkC/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAepC,CAAC"}

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1Test.js

@@ -0,0 +1,51 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.MenuButtonV1Test = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const e2e_testing_1 = require('@fluentui-react-native/e2e-testing');
+const CustomizedMenuButtonTest_1 = require('./CustomizedMenuButtonTest');
+const MenuButtonV1E2ETest_1 = require('./MenuButtonV1E2ETest');
+const NestedMenuButtonTest_1 = require('./NestedMenuButtonTest');
+const StandardMenuButtonTest_1 = require('./StandardMenuButtonTest');
+const Test_1 = require('../Test');
+const menuButtonSections = [
+  {
+    name: 'Standard MenuButton',
+    testID: e2e_testing_1.MENUBUTTONV1_TESTPAGE,
+    component: StandardMenuButtonTest_1.StandardMenuButton,
+  },
+  {
+    name: 'Nested MenuButton',
+    component: NestedMenuButtonTest_1.NestedMenuButton,
+  },
+  {
+    name: 'MenuButton with customized UI',
+    component: CustomizedMenuButtonTest_1.CustomizedMenuButton,
+  },
+];
+const e2eSections = [
+  {
+    name: 'E2E Testing MenuButton',
+    component: MenuButtonV1E2ETest_1.MenuButtonV1E2ETest,
+  },
+];
+const MenuButtonV1Test = () => {
+  const status = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+  const description =
+    'MenuButton is a component which contains ContextualMenu and Button components. This control combines and simplifies the API for customers.\nClicking on MenuButton opens ContextualMenu. It can have Submenu. But selection checks and a beak are not implemented.';
+  return jsx_runtime_1.jsx(Test_1.Test, {
+    name: 'MenuButtonV1 Test',
+    description: description,
+    sections: menuButtonSections,
+    status: status,
+    e2eSections: e2eSections,
+  });
+};
+exports.MenuButtonV1Test = MenuButtonV1Test;
+//# sourceMappingURL=MenuButtonV1Test.js.map

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1Test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonV1Test.js","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx"],"names":[],"mappings":";;;;AAEA,oEAA2E;AAE3E,yEAAkE;AAClE,+DAA4D;AAC5D,iEAA0D;AAC1D,qEAA8D;AAE9D,kCAA+B;AAE/B,MAAM,kBAAkB,GAAkB;IACxC;QACE,IAAI,EAAE,qBAAqB;QAC3B,MAAM,EAAE,mCAAqB;QAC7B,SAAS,EAAE,2CAAkB;KAC9B;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,SAAS,EAAE,uCAAgB;KAC5B;IACD;QACE,IAAI,EAAE,+BAA+B;QACrC,SAAS,EAAE,+CAAoB;KAChC;CACF,CAAC;AAEF,MAAM,WAAW,GAAkB;IACjC;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,yCAAmB;KAC/B;CACF,CAAC;AAEK,MAAM,gBAAgB,GAA4B,GAAG,EAAE,CAAC;IAC7D,MAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,YAAY;QACzB,SAAS,EAAE,YAAY;QACvB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,YAAY;KAC5B,CAAC;IAEF,MAAM,WAAW,GACf,oQAAoQ,CAAC;IAEvQ,OAAO,CACL,kBAAC,WAAI,IAAC,IAAI,EAAC,mBAAmB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,GAAI,CACpI,CAAC;AAAA,CACH,CAAC;AAfW,QAAA,gBAAgB,GAAhB,gBAAgB,CAe3B"}

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.d.ts

@@ -0,0 +1,6 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+export declare const viewWrapperStyle: ViewStyle;
+export declare const columnStyle: ViewStyle;
+export declare const rowStyle: ViewStyle;
+export declare const textColor: TextStyle;
+//# sourceMappingURL=MenuButtonV1TestStyles.d.ts.map

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonV1TestStyles.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,eAAO,MAAM,gBAAgB,EAAE,SAAwD,CAAC;AACxF,eAAO,MAAM,WAAW,EAAE,SAA6D,CAAC;AACxF,eAAO,MAAM,QAAQ,EAAE,SAAoC,CAAC;AAC5D,eAAO,MAAM,SAAS,EAAE,SAA6B,CAAC"}

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.js

@@ -0,0 +1,8 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.textColor = exports.rowStyle = exports.columnStyle = exports.viewWrapperStyle = void 0;
+exports.viewWrapperStyle = { flexDirection: 'row', paddingVertical: 5 };
+exports.columnStyle = { flexDirection: 'column', paddingHorizontal: 5 };
+exports.rowStyle = { flexDirection: 'row' };
+exports.textColor = { color: 'blue' };
+//# sourceMappingURL=MenuButtonV1TestStyles.js.map

package/lib-commonjs/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonV1TestStyles.js","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.ts"],"names":[],"mappings":";;;AACa,QAAA,gBAAgB,GAAc,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC;AAC3E,QAAA,WAAW,GAAc,EAAE,aAAa,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC,EAAE,CAAC;AAC3E,QAAA,QAAQ,GAAc,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAC/C,QAAA,SAAS,GAAc,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC"}

package/lib-commonjs/TestComponents/MenuButtonV1/NestedMenuButtonTest.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const NestedMenuButton: React.FunctionComponent;
+//# sourceMappingURL=NestedMenuButtonTest.d.ts.map

package/lib-commonjs/TestComponents/MenuButtonV1/NestedMenuButtonTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedMenuButtonTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBA6IpC,CAAC"}

package/lib-commonjs/TestComponents/MenuButtonV1/NestedMenuButtonTest.js

@@ -0,0 +1,217 @@
+'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.NestedMenuButton = 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_menu_button_1 = require('@fluentui-react-native/experimental-menu-button');
+const MenuButtonV1TestStyles_1 = require('./MenuButtonV1TestStyles');
+const testData_1 = require('./testData');
+const iconExamples_1 = require('../Common/iconExamples');
+const NestedMenuButton = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
+  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
+  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
+  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+  const [showSubmenu, setShowSubmenu] = React.useState(false);
+  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+  const [lastSubmenuItemClicked, setSubmenuLastItemClicked] = React.useState(null);
+  const toggleShowSubmenu = React.useCallback(() => {
+    setShowSubmenu(!showSubmenu);
+    setIsSubmenuVisible(!isSubmenuVisible);
+  }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
+  const onShowSubmenu = React.useCallback(() => {
+    setIsSubmenuVisible(true);
+  }, [setIsSubmenuVisible]);
+  const onDismissSubmenu = React.useCallback(() => {
+    setShowSubmenu(false);
+  }, [setShowSubmenu]);
+  const onSubmenuItemClick = React.useCallback(
+    (key) => {
+      setSubmenuLastItemClicked(key);
+    },
+    [setSubmenuLastItemClicked],
+  );
+  const nestedMenuItems = [
+    ...testData_1.menuItems,
+    {
+      hasSubmenu: true,
+      itemKey: '4',
+      text: 'SubmenuItem svg icon',
+      componentRef: React.useRef(null),
+      icon: testData_1.iconProps,
+      onHoverIn: toggleShowSubmenu,
+      showSubmenu,
+      submenuProps: {
+        onShow: onShowSubmenu,
+        setShowMenu: toggleShowSubmenu,
+        onDismiss: onDismissSubmenu,
+        onItemClick: onSubmenuItemClick,
+      },
+      submenuItems: [
+        {
+          icon: testData_1.iconProps,
+          text: 'SubmenuItem svg icon',
+          itemKey: '1',
+        },
+        {
+          itemKey: '2',
+          text: 'SubmenuItem 2',
+          disabled: true,
+        },
+        {
+          itemKey: '3',
+          text: 'SubmenuItem 3',
+        },
+      ],
+    },
+    {
+      itemKey: '5',
+      text: 'Menu Item',
+    },
+    {
+      hasSubmenu: true,
+      itemKey: '6',
+      text: 'SubmenuItem',
+      componentRef: React.useRef(null),
+      submenuProps: {
+        onItemClick: onSubmenuItemClick,
+      },
+      submenuItems: [
+        {
+          text: 'SubmenuItem 1',
+          itemKey: '1',
+        },
+        {
+          itemKey: '2',
+          text: 'SubmenuItem 2',
+        },
+        {
+          itemKey: '3',
+          text: 'SubmenuItem 3',
+        },
+      ],
+    },
+  ];
+  const rasterImageProps = {
+    rasterImageSource: {
+      src: iconExamples_1.testImage,
+    },
+    width: 12,
+    height: 12,
+  };
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    children: jsx_runtime_1.jsxs(react_native_1.View, {
+      style: MenuButtonV1TestStyles_1.viewWrapperStyle,
+      children: [
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          style: MenuButtonV1TestStyles_1.columnStyle,
+          children: [
+            jsx_runtime_1.jsxs(react_native_1.View, {
+              style: MenuButtonV1TestStyles_1.rowStyle,
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Should Focus on Mount' }),
+                jsx_runtime_1.jsx(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount }),
+              ],
+            }),
+            jsx_runtime_1.jsxs(react_native_1.View, {
+              style: MenuButtonV1TestStyles_1.rowStyle,
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Should Focus on Container' }),
+                jsx_runtime_1.jsx(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }),
+              ],
+            }),
+          ],
+        }),
+        jsx_runtime_1.jsx(react_native_2.Separator, { vertical: true }),
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          style: MenuButtonV1TestStyles_1.columnStyle,
+          children: [
+            jsx_runtime_1.jsxs(react_native_1.Text, {
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Last Menu Item Clicked: ' }),
+                lastMenuItemClicked > 0
+                  ? jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: lastMenuItemClicked })
+                  : jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: 'none' }),
+              ],
+            }),
+            jsx_runtime_1.jsxs(react_native_1.Text, {
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Last Submenu Item Clicked: ' }),
+                lastSubmenuItemClicked > 0
+                  ? jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: lastSubmenuItemClicked })
+                  : jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: 'none' }),
+              ],
+            }),
+            jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+              content: 'Press for Nested MenuButton',
+              icon: rasterImageProps,
+              menuItems: nestedMenuItems,
+              onItemClick: onItemClick,
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};
+exports.NestedMenuButton = NestedMenuButton;
+//# sourceMappingURL=NestedMenuButtonTest.js.map

package/lib-commonjs/TestComponents/MenuButtonV1/NestedMenuButtonTest.js.map

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

package/lib-commonjs/TestComponents/MenuButtonV1/StandardMenuButtonTest.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+import * as React from 'react';
+export declare const StandardMenuButton: React.FunctionComponent;
+//# sourceMappingURL=StandardMenuButtonTest.d.ts.map

package/lib-commonjs/TestComponents/MenuButtonV1/StandardMenuButtonTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardMenuButtonTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAyGtC,CAAC"}

package/lib-commonjs/TestComponents/MenuButtonV1/StandardMenuButtonTest.js

@@ -0,0 +1,205 @@
+'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.StandardMenuButton = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+const React = __importStar(require('react'));
+const react_native_1 = require('react-native');
+const react_native_2 = require('@fluentui/react-native');
+const experimental_menu_button_1 = require('@fluentui-react-native/experimental-menu-button');
+const MenuButtonV1TestStyles_1 = require('./MenuButtonV1TestStyles');
+const testData_1 = require('./testData');
+const iconExamples_1 = require('../Common/iconExamples');
+const StandardMenuButton = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
+  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
+  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
+  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+  const contextualMenuProps = {
+    accessibilityLabel: 'MenuButton',
+    shouldFocusOnMount: focusOnMount,
+    shouldFocusOnContainer: focusOnContainer,
+  };
+  const iconToShow = react_native_1.Platform.select({
+    macos: iconExamples_1.testImage, //GH #931, macOS MenuButton only supports showing PNG icons
+    default: testData_1.iconProps,
+  });
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    children: jsx_runtime_1.jsxs(react_native_1.View, {
+      style: MenuButtonV1TestStyles_1.viewWrapperStyle,
+      children: [
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          style: MenuButtonV1TestStyles_1.columnStyle,
+          children: [
+            jsx_runtime_1.jsxs(react_native_1.View, {
+              style: MenuButtonV1TestStyles_1.rowStyle,
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Should Focus on Mount' }),
+                jsx_runtime_1.jsx(react_native_1.Switch, { value: focusOnMount, onValueChange: toggleFocusOnMount }),
+              ],
+            }),
+            jsx_runtime_1.jsxs(react_native_1.View, {
+              style: MenuButtonV1TestStyles_1.rowStyle,
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Should Focus on Container' }),
+                jsx_runtime_1.jsx(react_native_1.Switch, { value: focusOnContainer, onValueChange: toggleFocusOnContainer }),
+              ],
+            }),
+          ],
+        }),
+        jsx_runtime_1.jsx(react_native_2.Separator, { vertical: true }),
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          style: MenuButtonV1TestStyles_1.columnStyle,
+          children: [
+            jsx_runtime_1.jsxs(react_native_1.Text, {
+              children: [
+                jsx_runtime_1.jsx(react_native_1.Text, { children: 'Last Menu Item Clicked: ' }),
+                lastMenuItemClicked > 0
+                  ? jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: lastMenuItemClicked })
+                  : jsx_runtime_1.jsx(react_native_1.Text, { style: MenuButtonV1TestStyles_1.textColor, children: 'none' }),
+              ],
+            }),
+            jsx_runtime_1.jsxs(react_native_1.View, {
+              style: { ...MenuButtonV1TestStyles_1.rowStyle, paddingHorizontal: 5 },
+              children: [
+                jsx_runtime_1.jsxs(react_native_1.View, {
+                  style: MenuButtonV1TestStyles_1.columnStyle,
+                  children: [
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      content: 'Standard MenuButton',
+                      tooltip: 'Standard MenuButton tooltip',
+                      menuItems: testData_1.menuItems,
+                      onItemClick: onItemClick,
+                      contextualMenu: contextualMenuProps,
+                    }),
+                    jsx_runtime_1.jsx(react_native_1.Text, { children: 'MenuButton with icon' }),
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      icon: iconToShow,
+                      content: 'MenuButton',
+                      menuItems: testData_1.menuItems,
+                      onItemClick: onItemClick,
+                      contextualMenu: contextualMenuProps,
+                    }),
+                    jsx_runtime_1.jsx(react_native_1.Text, { children: 'MenuButton with only icon' }),
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      icon: iconToShow,
+                      menuItems: testData_1.menuItems,
+                      onItemClick: onItemClick,
+                      contextualMenu: contextualMenuProps,
+                    }),
+                    jsx_runtime_1.jsx(react_native_1.Text, { children: 'Disabled MenuButton' }),
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      disabled: true,
+                      content: 'Disabled MenuButton',
+                      menuItems: testData_1.menuItems,
+                    }),
+                  ],
+                }),
+                jsx_runtime_1.jsx(react_native_2.Separator, { vertical: true }),
+                jsx_runtime_1.jsxs(react_native_1.View, {
+                  style: MenuButtonV1TestStyles_1.columnStyle,
+                  children: [
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      appearance: 'primary',
+                      content: 'Primary MenuButton',
+                      menuItems: testData_1.menuItems,
+                      onItemClick: onItemClick,
+                      contextualMenu: contextualMenuProps,
+                    }),
+                    jsx_runtime_1.jsx(react_native_1.Text, { children: 'Primary MenuButton with icon' }),
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      appearance: 'primary',
+                      icon: iconToShow,
+                      content: 'Primary MenuButton',
+                      menuItems: testData_1.menuItems,
+                      onItemClick: onItemClick,
+                      contextualMenu: contextualMenuProps,
+                    }),
+                    jsx_runtime_1.jsx(react_native_1.Text, { children: 'Primary MenuButton with only icon' }),
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      appearance: 'primary',
+                      icon: iconToShow,
+                      menuItems: testData_1.menuItems,
+                      onItemClick: onItemClick,
+                      contextualMenu: contextualMenuProps,
+                    }),
+                    jsx_runtime_1.jsx(react_native_1.Text, { children: 'Primary Disabled MenuButton' }),
+                    jsx_runtime_1.jsx(experimental_menu_button_1.MenuButton, {
+                      appearance: 'primary',
+                      disabled: true,
+                      content: 'Disabled Primary MenuButton',
+                      menuItems: testData_1.menuItems,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};
+exports.StandardMenuButton = StandardMenuButton;
+//# sourceMappingURL=StandardMenuButtonTest.js.map