@fluentui-react-native/tester-core 0.1.1

package/lib-commonjs/TestComponents/ColorTokens/ColorTokenTest.js

@@ -0,0 +1,286 @@
+'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.ColorTokensTest = 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 default_theme_1 = require('@fluentui-react-native/default-theme');
+const e2e_testing_1 = require('@fluentui-react-native/e2e-testing');
+const theme_tokens_1 = require('@fluentui-react-native/theme-tokens');
+const theme_types_1 = require('@fluentui-react-native/theme-types');
+const themed_stylesheet_1 = require('@fluentui-react-native/themed-stylesheet');
+const theming_utils_1 = require('@fluentui-react-native/theming-utils');
+const win32_theme_1 = require('@fluentui-react-native/win32-theme');
+const react_native_svg_1 = __importStar(require('react-native-svg'));
+const styles_1 = require('../Common/styles');
+const TestProps_1 = require('../Common/TestProps');
+const Test_1 = require('../Test');
+const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((theme) => {
+  return {
+    swatch: {
+      width: 80,
+      height: 20,
+      marginRight: 5,
+      borderWidth: 2,
+      borderColor: theme.colors.bodyText,
+    },
+  };
+});
+const styles = react_native_1.StyleSheet.create({
+  swatchItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 5,
+  },
+  stackStyle: {
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
+  statusView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: 8,
+  },
+  // Needed to ensure that with the button is toggled on, the top of the newly shown
+  // content is visible so the user knows to scroll down
+  toggleButtonAreaPadding: { paddingBottom: 10 },
+  colorDescriptionStyle: { flexDirection: 'row', flexWrap: 'wrap', flex: 1 },
+  colorDescriptionNamePadding: { paddingRight: 5 },
+});
+const getSwatchColorStyle = (colorName, colorValue) => {
+  styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
+  return styles[colorName];
+};
+const ColorToken = (p) => {
+  if (p.colorValue === undefined) {
+    console.warn('Color token ' + p.colorName + ' is undefined');
+  }
+  const themedStyles = getThemedStyles((0, theme_types_1.useTheme)());
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    style: styles.swatchItem,
+    children: [
+      jsx_runtime_1.jsx(react_native_1.View, {
+        style: [getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch],
+        ...(0, TestProps_1.testProps)(e2e_testing_1.COLORTOKENS_TEST_COMPONENT),
+      }),
+      jsx_runtime_1.jsxs(react_native_1.View, {
+        style: styles.colorDescriptionStyle,
+        children: [
+          jsx_runtime_1.jsx(react_native_2.Text, { style: styles.colorDescriptionNamePadding, children: p.colorName }),
+          jsx_runtime_1.jsx(react_native_2.Text, { children: '(' + p.colorValue?.toString() + ')' }),
+        ],
+      }),
+    ],
+  });
+};
+const getSwatch = (item) => {
+  const { colorValue, colorName } = item;
+  return jsx_runtime_1.jsx(ColorToken, { colorValue: colorValue, colorName: colorName }, colorName);
+};
+/// Alias color tokens
+const AliasColorTokensSwatchList = () => {
+  const theme = (0, theme_types_1.useTheme)();
+  const isOfficeTheme =
+    theme.name === 'White' ||
+    theme.name === 'Colorful' ||
+    theme.name === 'DarkGray' ||
+    theme.name === 'Black' ||
+    theme.name === 'HighContrast';
+  const aliasColorTokens = isOfficeTheme
+    ? (0, win32_theme_1.createOfficeAliasTokens)(theme.name)
+    : (0, default_theme_1.createAliasTokens)((0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light'));
+  const aggregator = React.useCallback(
+    (colorName) => {
+      return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
+    },
+    [aliasColorTokens],
+  );
+  const flattenArray = React.useCallback(() => {
+    return Object.keys(aliasColorTokens).map(aggregator);
+  }, [aliasColorTokens, aggregator]);
+  const aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
+  const renderSwatch = React.useCallback(getSwatch, []);
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    style: styles_1.commonTestStyles.view,
+    children: jsx_runtime_1.jsx(react_native_1.View, {
+      style: styles.stackStyle,
+      children: aliasColorTokensAsArray.map((item) => renderSwatch(item)),
+    }),
+  });
+};
+/// Global color tokens - neutral
+const globalNeutralColorNamesSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color)
+  .filter((globalColorName) => globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white')
+  .sort((color1, color2) => {
+    const color1hex = theme_tokens_1.globalTokens.color[color1];
+    const color2hex = theme_tokens_1.globalTokens.color[color2];
+    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+    // will order the colors from dark to light
+    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+  });
+const globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map((colorName) => {
+  return {
+    colorName: colorName,
+    colorValue: theme_tokens_1.globalTokens.color[colorName],
+  };
+});
+const GlobalNeutralColorTokensSwatchList = () => {
+  const renderSwatch = React.useCallback(getSwatch, []);
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    style: styles_1.commonTestStyles.view,
+    children: jsx_runtime_1.jsx(react_native_1.View, {
+      style: styles.stackStyle,
+      children: globalNeutralColorTokensAsArray.map((item) => renderSwatch(item)),
+    }),
+  });
+};
+/// Global color tokens - shared
+const globalSharedColorNames = Object.keys(theme_tokens_1.globalTokens.color).filter(
+  (key) => theme_tokens_1.globalTokens.color[key].primary !== undefined,
+);
+const globalSharedColorVariantsSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color.red).sort((color1, color2) => {
+  const color1hex = theme_tokens_1.globalTokens.color.red[color1];
+  const color2hex = theme_tokens_1.globalTokens.color.red[color2];
+  // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+  // will order the colors from dark to light
+  return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+});
+const globalSharedColorTokensAsArray = globalSharedColorNames
+  .map((sharedColorName) => {
+    return globalSharedColorVariantsSortedDarkToLight.map((variant) => {
+      return {
+        colorName: sharedColorName + '.' + variant,
+        colorValue: theme_tokens_1.globalTokens.color[sharedColorName][variant],
+      };
+    });
+  })
+  .reduce((accumulator, sharedColor) => accumulator.concat(sharedColor));
+const GlobalSharedColorTokensSwatchList = () => {
+  const renderSwatch = React.useCallback(getSwatch, []);
+  const [showGlobalSharedColors, setShowGlobalSharedColors] = React.useState(false);
+  const toggleSvg = () => {
+    const plusPath =
+      'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
+    const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
+    const path = showGlobalSharedColors ? minusPath : plusPath;
+    return jsx_runtime_1.jsx(react_native_svg_1.default, {
+      children: jsx_runtime_1.jsx(react_native_svg_1.G, {
+        children: jsx_runtime_1.jsx(react_native_svg_1.Path, { d: path, fill: 'black' }),
+      }),
+    });
+  };
+  const svgProps = { src: toggleSvg };
+  const plusCodepoint = 0x2795;
+  const minusCodepoint = 0x2796;
+  const fontIconProps = {
+    codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
+    fontSize: 10,
+  };
+  const toggleIconProps =
+    react_native_1.Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    style: styles.toggleButtonAreaPadding,
+    children: [
+      jsx_runtime_1.jsxs(react_native_1.View, {
+        style: styles.statusView,
+        children: [
+          jsx_runtime_1.jsx(react_native_2.Text, { variant: 'subheaderStandard', children: 'Show color tokens' }),
+          jsx_runtime_1.jsx(react_native_2.ToggleButton, {
+            iconOnly: true,
+            icon: toggleIconProps,
+            onClick: () => setShowGlobalSharedColors(!showGlobalSharedColors),
+          }),
+        ],
+      }),
+      showGlobalSharedColors &&
+        jsx_runtime_1.jsx(react_native_1.View, {
+          style: styles_1.commonTestStyles.view,
+          children: jsx_runtime_1.jsx(react_native_1.View, {
+            style: styles.stackStyle,
+            children: globalSharedColorTokensAsArray.map((item) => renderSwatch(item)),
+          }),
+        }),
+    ],
+  });
+};
+const themeSections = [
+  {
+    name: 'Alias Color Tokens',
+    testID: e2e_testing_1.COLORTOKEN_TESTPAGE,
+    component: () => jsx_runtime_1.jsx(AliasColorTokensSwatchList, {}),
+  },
+  {
+    name: 'Global Color Tokens - Neutral Colors',
+    component: () => jsx_runtime_1.jsx(GlobalNeutralColorTokensSwatchList, {}),
+  },
+  {
+    name: 'Global Color Tokens - Shared Colors',
+    component: () => jsx_runtime_1.jsx(GlobalSharedColorTokensSwatchList, {}),
+  },
+];
+const ColorTokensTest = () => {
+  const status = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Backlog',
+    androidStatus: 'Production',
+  };
+  const description = 'Alias and global tokens given from token pipeline. Used to style components.';
+  return jsx_runtime_1.jsx(Test_1.Test, { name: 'Color Tokens Test', description: description, sections: themeSections, status: status });
+};
+exports.ColorTokensTest = ColorTokensTest;
+//# sourceMappingURL=ColorTokenTest.js.map

package/lib-commonjs/TestComponents/ColorTokens/ColorTokenTest.js.map

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

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

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

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

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

package/lib-commonjs/TestComponents/ColorTokens/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('./ColorTokenTest'), exports);
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconAlignment } from '@fluentui/react-native';
+interface IAlignmentPickerProps {
+  style?: StyleProp<ViewStyle>;
+  label: string;
+  onSelectionChange: (value: IconAlignment) => void;
+}
+export declare const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps>;
+export {};
+//# sourceMappingURL=AlignmentPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlignmentPicker.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/AlignmentPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAO5D,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,CAsB1E,CAAC"}

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

@@ -0,0 +1,81 @@
+'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.AlignmentPicker = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const React = __importStar(require('react'));
+const MenuPicker_1 = require('./MenuPicker');
+const styles_1 = require('../PersonaCoin/styles');
+const alignmentValues = [styles_1.undefinedText, 'start', 'center', 'end'];
+const AlignmentPicker = (props) => {
+  const { label, onSelectionChange, style } = props;
+  const [selectedValue, setSelectedValue] = React.useState();
+  const alignmentCollection = alignmentValues.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
+  return jsx_runtime_1.jsx(MenuPicker_1.MenuPicker, {
+    style: style,
+    prompt: label,
+    selected: selectedValue || styles_1.undefinedText,
+    onChange: (value, index) => {
+      const alignmentValue = index == 0 ? undefined : value;
+      onSelectionChange(alignmentValue);
+      setSelectedValue(alignmentValue);
+    },
+    collection: alignmentCollection,
+  });
+};
+exports.AlignmentPicker = AlignmentPicker;
+//# sourceMappingURL=AlignmentPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlignmentPicker.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/AlignmentPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAY,KAAK,kCAAc;AAK/B,6CAA0C;AAC1C,kDAAsD;AAEtD,MAAM,eAAe,GAAgD,CAAC,sBAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAQxG,MAAM,eAAe,GAAmD,CAAC,KAA4B,EAAE,EAAE,CAAC;IAC/G,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAiB,CAAC;IAC1E,MAAM,mBAAmB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QACzD,OAAO;YACL,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,KAAK;SACb,CAAC;IAAA,CACH,CAAC,CAAC;IACH,OAAO,CACL,kBAAC,uBAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,aAAa,IAAI,sBAAa,EACxC,QAAQ,EAAE,CAAC,KAAoB,EAAE,KAAa,EAAE,EAAE,CAAC;YACjD,MAAM,cAAc,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,iBAAiB,CAAC,cAAc,CAAC,CAAC;YAClC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAAA,CAClC,EACD,UAAU,EAAE,mBAAmB,GAC/B,CACH,CAAC;AAAA,CACH,CAAC;AAtBW,QAAA,eAAe,GAAf,eAAe,CAsB1B"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+export type { CollectionItem, MenuPickerProps };
+export declare const MenuPicker: React.FunctionComponent<MenuPickerProps>;
+//# sourceMappingURL=MenuPicker.android.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.android.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1E,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAOhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CA6B/D,CAAC"}

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

@@ -0,0 +1,31 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.MenuPicker = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const picker_1 = require('@react-native-picker/picker');
+const TestProps_1 = require('./TestProps');
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ * MenuPicker uses the community Picker package for Android
+ */
+const MenuPicker = (props) => {
+  const { prompt, selected, onChange, collection, style, testID } = props;
+  let selectedItemKey;
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      selectedItemKey = item.value;
+    }
+  });
+  return jsx_runtime_1.jsx(picker_1.Picker, {
+    prompt: prompt,
+    selectedValue: selectedItemKey,
+    onValueChange: (value, index) => onChange(value, index),
+    style: { ...style },
+    ...(0, TestProps_1.testProps)(testID),
+    children: collection.map((item, index) =>
+      jsx_runtime_1.jsx(picker_1.Picker.Item, { label: item.label, value: item.value, ...(0, TestProps_1.testProps)(item.testID) }, index),
+    ),
+  });
+};
+exports.MenuPicker = MenuPicker;
+//# sourceMappingURL=MenuPicker.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.android.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.android.tsx"],"names":[],"mappings":";;;;AAEA,wDAAqD;AAGrD,2CAAwC;AAGxC;;;GAGG;AAEI,MAAM,UAAU,GAA6C,CAAC,KAAsB,EAAE,EAAE,CAAC;IAC9F,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxE,IAAI,eAAe,CAAC;IAEpB,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;QAC3B,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC3B,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,CAAC;IAAA,CACF,CAAC,CAAC;IAEH,OAAO,CACL,kBAAC,eAAM,IACL,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,EAC9B,aAAa,EAAE,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,KAEf,IAAA,qBAAS,EAAC,MAAM,CAAC,YAEpB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,kBAAC,eAAM,CAAC,IAAI,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,EAEjB,KAAK,EAAE,IAAI,CAAC,KAAK,KACb,IAAA,qBAAS,EAAC,IAAI,CAAC,MAAM,CAAC,IAFrB,KAAK,CAGV,CACH,CAAC,GACK,CACV,CAAC;AAAA,CACH,CAAC;AA7BW,QAAA,UAAU,GAAV,UAAU,CA6BrB"}

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

@@ -0,0 +1,4 @@
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+export type { CollectionItem, MenuPickerProps };
+export declare const MenuPicker: React.FunctionComponent<MenuPickerProps>;
+//# sourceMappingURL=MenuPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAMhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAG/D,CAAC"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { MenuPickerProps, CollectionItem } from './MenuPicker.types';
+export type { MenuPickerProps, CollectionItem };
+export declare const MenuPicker: React.FunctionComponent<MenuPickerProps>;
+//# sourceMappingURL=MenuPicker.desktop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.desktop.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.desktop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAOhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAkC/D,CAAC"}

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

@@ -0,0 +1,68 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.MenuPicker = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const react_native_1 = require('react-native');
+const react_native_2 = require('@fluentui/react-native');
+const menu_1 = require('@fluentui-react-native/menu');
+const react_native_svg_1 = require('react-native-svg');
+const chevronXml = `
+<svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+  <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+</svg>`;
+const MenuPicker = (props) => {
+  const { prompt, selected, onChange, collection } = props;
+  let label;
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      label = item.label;
+    }
+  });
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    style: menuPickerStyles.container,
+    children: [
+      jsx_runtime_1.jsx(react_native_2.Text, { style: menuPickerStyles.prompt, children: prompt }),
+      jsx_runtime_1.jsxs(menu_1.Menu, {
+        children: [
+          jsx_runtime_1.jsx(menu_1.MenuTrigger, {
+            children: jsx_runtime_1.jsxs(react_native_2.ButtonV1, {
+              children: [
+                jsx_runtime_1.jsx(react_native_2.Text, { children: label }),
+                jsx_runtime_1.jsx(react_native_1.View, {
+                  style: menuPickerStyles.chevronContainer,
+                  children: jsx_runtime_1.jsx(react_native_svg_1.SvgXml, { xml: chevronXml }),
+                }),
+              ],
+            }),
+          }),
+          jsx_runtime_1.jsx(menu_1.MenuPopover, {
+            children: jsx_runtime_1.jsx(menu_1.MenuList, {
+              children: collection.map((collectionItem, index) =>
+                jsx_runtime_1.jsx(
+                  menu_1.MenuItem,
+                  { onClick: () => onChange(collectionItem.value, index), children: collectionItem.label },
+                  collectionItem.value ?? index,
+                ),
+              ),
+            }),
+          }),
+        ],
+      }),
+    ],
+  });
+};
+exports.MenuPicker = MenuPicker;
+const menuPickerStyles = react_native_1.StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});
+//# sourceMappingURL=MenuPicker.desktop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.desktop.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.desktop.tsx"],"names":[],"mappings":";;;;AACA,+CAAgD;AAEhD,yDAAkE;AAClE,sDAAiG;AACjG,uDAA0C;AAM1C,MAAM,UAAU,GAAG;;;OAGZ,CAAC;AAED,MAAM,UAAU,GAA6C,CAAC,KAAsB,EAAE,EAAE,CAAC;IAC9F,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAEzD,IAAI,KAAK,CAAC;IACV,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;QAC3B,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC3B,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACrB,CAAC;IAAA,CACF,CAAC,CAAC;IAEH,OAAO,CACL,mBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,SAAS;YACrC,kBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,MAAM,YAAG,MAAM,GAAQ,EACrD,mBAAC,WAAI;oBACH,kBAAC,kBAAW,cACV,mBAAC,uBAAM;gCACL,kBAAC,mBAAI,cAAE,KAAK,GAAQ,EACpB,kBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,YAC5C,kBAAC,yBAAM,IAAC,GAAG,EAAE,UAAU,GAAI,GACtB;gCACA,GACG,EACd,kBAAC,kBAAW,cACV,kBAAC,eAAQ,cACN,UAAU,CAAC,GAAG,CAAC,CAAC,cAA8B,EAAE,KAAa,EAAE,EAAE,CAAC,CACjE,kBAAC,eAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,YAC3D,cAAc,CAAC,KAAK,IAD8C,cAAc,CAAC,KAAK,IAAI,KAAK,CAEvF,CACZ,CAAC,GACO,GACC;oBACT;YACF,CACR,CAAC;AAAA,CACH,CAAC;AAlCW,QAAA,UAAU,GAAV,UAAU,CAkCrB;AAEF,MAAM,gBAAgB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACzC,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;IACD,MAAM,EAAE;QACN,WAAW,EAAE,CAAC;KACf;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { CollectionItem, MenuPickerProps } from './MenuPicker.types';
+export type { CollectionItem, MenuPickerProps };
+export declare const MenuPicker: React.FunctionComponent<MenuPickerProps>;
+//# sourceMappingURL=MenuPicker.ios.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.ios.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1E,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAqBhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAwC/D,CAAC"}