@fluentui-react-native/tester 0.69.3 → 0.69.6

package/lib-commonjs/FluentTester/theme/ThemePickers.js.map

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

package/lib-commonjs/FluentTester/theme/ThemePickers.macos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePickers.macos.d.ts","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.macos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAEH,aAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAiB/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAsBhC,CAAC"}
+{"version":3,"file":"ThemePickers.macos.d.ts","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.macos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAaH,aAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiCF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAW/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAsBhC,CAAC"}

package/lib-commonjs/FluentTester/theme/ThemePickers.macos.js

@@ -5,7 +5,9 @@ var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var react_native_1 = require("react-native");
 var experimental_text_1 = require("@fluentui-react-native/experimental-text");
-var picker_1 = require("@react-native-picker/picker");
+var react_native_svg_1 = require("react-native-svg");
+var menu_1 = require("@fluentui-react-native/menu");
+var react_native_2 = require("@fluentui/react-native");
 var CustomThemes_1 = require("./CustomThemes");
 var applyTheme_1 = require("./applyTheme");
 var applyBrand_1 = require("./applyBrand");
@@ -24,6 +26,29 @@ exports.themePickerStyles = react_native_1.StyleSheet.create({
         fontSize: 12,
     },
 });
+var themeMenuPickerStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 5,
+    },
+    svg: {
+        padding: 4,
+    },
+});
+var ThemeMenuPicker = function (_a) {
+    var selected = _a.selected, onChange = _a.onChange, collection = _a.collection, style = _a.style;
+    var chevronXml = "\n  <svg width=\"12\" height=\"16\" viewBox=\"0 0 11 6\" color=\"#000\">\n    <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' />\n  </svg>";
+    return (React.createElement(react_native_1.View, { style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, themeMenuPickerStyles.container), style) },
+        React.createElement(menu_1.Menu, null,
+            React.createElement(menu_1.MenuTrigger, null,
+                React.createElement(react_native_2.ButtonV1, null,
+                    React.createElement(experimental_text_1.Text, null, selected),
+                    React.createElement(react_native_1.View, { style: themeMenuPickerStyles.svg },
+                        React.createElement(react_native_svg_1.SvgXml, { xml: chevronXml })))),
+            React.createElement(menu_1.MenuPopover, null,
+                React.createElement(menu_1.MenuList, null, collection.map(function (entry, index) { return (React.createElement(menu_1.MenuItem, { onClick: function () { return onChange(entry.value); }, key: "entry".concat(index) }, entry.label)); }))))));
+};
 var PartPicker = function (props) {
     var initial = props.initial, contents = props.contents, onChange = props.onChange;
     var _a = React.useState(initial), value = _a[0], setValue = _a[1];
@@ -31,7 +56,7 @@ var PartPicker = function (props) {
         setValue(newValue);
         onChange(newValue);
     }, [setValue, onChange]);
-    return (React.createElement(picker_1.Picker, { selectedValue: value, style: exports.themePickerStyles.dropdown, onValueChange: onValueChange }, contents.map(function (entry, index) { return (React.createElement(picker_1.Picker.Item, { label: entry.label, value: entry.value, key: "entry".concat(index) })); })));
+    return React.createElement(ThemeMenuPicker, { selected: value, style: exports.themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
 };
 exports.PartPicker = PartPicker;
 var PickerLabel = experimental_text_1.Text.customize({ variant: 'bodySemibold' });

package/lib-commonjs/FluentTester/theme/ThemePickers.macos.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePickers.macos.js","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.macos.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAgD;AAChD,8EAAgE;AAChE,sDAAqD;AACrD,+CAA6C;AAC7C,2CAAwD;AACxD,2CAAyD;AAE5C,QAAA,iBAAiB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACjD,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;KACrB;IAED,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,CAAC;KACX;IAED,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC;AAUI,IAAM,UAAU,GAA6C,UAAC,KAAsB;IACjF,IAAA,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IACxC,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAClD,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,UAAC,QAAgB;QACf,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAC;IACF,OAAO,CACL,oBAAC,eAAM,IAAC,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,yBAAiB,CAAC,QAAQ,EAAE,aAAa,EAAE,aAAa,IAC1F,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa,IAAK,OAAA,CACvD,oBAAC,eAAM,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,eAAQ,KAAK,CAAE,GAAI,CAC9E,EAFwD,CAExD,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,UAAU,cAiBrB;AAEF,IAAM,WAAW,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC;AAEzD,IAAM,YAAY,GAA4B;IACnD,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,QAAgB;QACvD,0BAAW,CAAC,KAAK,GAAG,QAAuB,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,QAAgB;QACzD,0BAAW,CAAC,SAAS,GAAG,QAAsB,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,UAAU;QACvC,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,kBAAsB;YAClC,oBAAC,kBAAU,IAAC,OAAO,EAAE,0BAAW,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,yBAAY,GAAI,CAC5F;QAEP,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,kBAAsB;YAClC,oBAAC,kBAAU,IAAC,OAAO,EAAE,0BAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,yBAAY,GAAI,CACtF,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,YAAY,gBAsBvB"}
+{"version":3,"file":"ThemePickers.macos.js","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.macos.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.69.3",
+  "version": "0.69.6",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.10.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.12.3 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.1.3",
+    "@fluentui-react-native/avatar": "^1.1.4",
     "@fluentui-react-native/badge": ">=0.0.44 <1.0.0",
     "@fluentui-react-native/button": ">=0.22.29 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
@@ -38,7 +38,7 @@
     "@fluentui-react-native/experimental-drawer": ">=0.1.13 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.5.0 <1.0.0",
     "@fluentui-react-native/experimental-expander": "0.3.33",
-    "@fluentui-react-native/experimental-menu-button": ">=0.3.49 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.3.50 <1.0.0",
     "@fluentui-react-native/experimental-shadow": "0.2.0",
     "@fluentui-react-native/experimental-shimmer": "0.6.33",
     "@fluentui-react-native/experimental-tabs": "0.4.52",
@@ -46,7 +46,7 @@
     "@fluentui-react-native/framework": ">=0.7.30 <1.0.0",
     "@fluentui-react-native/icon": "0.12.1",
     "@fluentui-react-native/interactive-hooks": ">=0.16.3 <1.0.0",
-    "@fluentui-react-native/menu": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.2",
     "@fluentui-react-native/notification": "0.1.0",
     "@fluentui-react-native/stack": ">=0.6.29 <1.0.0",
     "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
@@ -54,7 +54,7 @@
     "@fluentui-react-native/themed-stylesheet": "^1.3.3",
     "@fluentui-react-native/theming-utils": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.19.2 <1.0.0",
-    "@fluentui/react-native": ">=0.30.3 <1.0.0",
+    "@fluentui/react-native": ">=0.30.4 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/FluentTester/TestComponents/Avatar/BasicAvatar.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useCallback, FunctionComponent } from 'react';
 import { AvatarSize, AvatarSizes, AvatarColor, AvatarColors, Avatar, AvatarActive } from '@fluentui-react-native/avatar';
 import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-native/badge';
-import { Switch, View, Text, Picker, ColorValue, Platform } from 'react-native';
+import { Switch, View, Text, ColorValue, Platform } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import TestSvg from '../../test-data/test.svg';
 import { SvgIconProps } from '@fluentui-react-native/icon';
+import { StyledPicker } from '../Common/StyledPicker';
 
 type WithUndefined<T> = T | typeof undefinedText;
 
@@ -16,19 +17,6 @@ const avatarColors: AvatarColor[] = ['neutral', 'brand', 'colorful', ...AvatarCo
 const allSizes: WithUndefined<AvatarSize>[] = [undefinedText, ...AvatarSizes];
 const allPresences: WithUndefined<PresenceBadgeStatus>[] = [undefinedText, ...PresenceBadgeStatuses];
 
-const StyledPicker = (props) => {
-  const { prompt, selected, onChange, collection } = props;
-  const theme = useTheme();
-  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
-  return (
-    <Picker prompt={prompt} style={pickerStyles} selectedValue={selected} onValueChange={onChange}>
-      {collection.map((value, index) => (
-        <Picker.Item label={value} key={index} value={value} />
-      ))}
-    </Picker>
-  );
-};
-
 export const StandardUsage: FunctionComponent = () => {
   const [isSquare, setSquare] = useState(false);
   const [showImage, setShowImage] = useState(true);
@@ -64,7 +52,7 @@ export const StandardUsage: FunctionComponent = () => {
 
   return (
     <View style={commonStyles.root}>
-      <View style={commonStyles.settings}>
+      <View style={commonStyles.settingsPicker}>
         <View style={commonStyles.switch}>
           <Text style={textStyles}>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
@@ -84,58 +72,60 @@ export const StandardUsage: FunctionComponent = () => {
         <StyledPicker prompt="Avatar Color" selected={avatarColor} onChange={onAvatarColorChange} collection={avatarColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
-      <Avatar
-        accessibilityLabel="Fall-back Icon"
-        accessibilityHint="A picture representing a user"
-        size={imageSize === undefinedText ? undefined : imageSize}
-      />
-      <Avatar
-        active={active}
-        activeAppearance={activeAppearance}
-        size={imageSize === undefinedText ? undefined : imageSize}
-        name="Satya Nadella"
-        shape={isSquare ? 'square' : 'circular'}
-        accessibilityLabel="Photo of Satya Nadella"
-        badge={{ status: presence === undefinedText ? undefined : presence, outOfOffice }}
-        imageUrl={showImage ? satyaPhotoUrl : undefined}
-        avatarColor={avatarColor}
-      />
-      <Avatar
-        active={active}
-        activeAppearance={activeAppearance}
-        size={imageSize === undefinedText ? undefined : imageSize}
-        shape={isSquare ? 'square' : 'circular'}
-        accessibilityLabel="Icon"
-        name="* Richard Faynman *"
-        avatarColor="#ff0099"
-        initialsColor="yellow"
-      />
-      {svgIconsEnabled && (
-        <>
-          <Avatar
-            active={active}
-            activeAppearance={activeAppearance}
-            size={imageSize === undefinedText ? undefined : imageSize}
-            shape={isSquare ? 'square' : 'circular'}
-            accessibilityLabel="SVG Icon"
-            icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }}
-            avatarColor={avatarColor}
-            badge={{ status: 'outOfOffice', outOfOffice }}
-          />
-          <Avatar
-            accessibilityHint="A picture representing a user"
-            active={active}
-            activeAppearance={activeAppearance}
-            size={imageSize === undefinedText ? undefined : imageSize}
-            shape={isSquare ? 'square' : 'circular'}
-            accessibilityLabel="SVG Icon"
-            icon={{ svgSource: svgProps }}
-            avatarColor={avatarColor}
-            badge={{ status: 'away', outOfOffice }}
-            idForColor="15"
-          />
-        </>
-      )}
+      <View style={commonStyles.pickerControlled}>
+        <Avatar
+          accessibilityLabel="Fall-back Icon"
+          accessibilityHint="A picture representing a user"
+          size={imageSize === undefinedText ? undefined : imageSize}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          name="Satya Nadella"
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="Photo of Satya Nadella"
+          badge={{ status: presence === undefinedText ? undefined : presence, outOfOffice }}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          avatarColor={avatarColor}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="Icon"
+          name="* Richard Faynman *"
+          avatarColor="#ff0099"
+          initialsColor="yellow"
+        />
+        {svgIconsEnabled && (
+          <>
+            <Avatar
+              active={active}
+              activeAppearance={activeAppearance}
+              size={imageSize === undefinedText ? undefined : imageSize}
+              shape={isSquare ? 'square' : 'circular'}
+              accessibilityLabel="SVG Icon"
+              icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }}
+              avatarColor={avatarColor}
+              badge={{ status: 'outOfOffice', outOfOffice }}
+            />
+            <Avatar
+              accessibilityHint="A picture representing a user"
+              active={active}
+              activeAppearance={activeAppearance}
+              size={imageSize === undefinedText ? undefined : imageSize}
+              shape={isSquare ? 'square' : 'circular'}
+              accessibilityLabel="SVG Icon"
+              icon={{ svgSource: svgProps }}
+              avatarColor={avatarColor}
+              badge={{ status: 'away', outOfOffice }}
+              idForColor="15"
+            />
+          </>
+        )}
+      </View>
     </View>
   );
 };

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScreenRect, Text, View, Switch, Picker, ScrollView } from 'react-native';
+import { ScreenRect, Text, View, Switch, ScrollView } from 'react-native';
 import {
   Button,
   Callout,
@@ -14,6 +14,7 @@ import { CALLOUT_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ECalloutTest } from './CalloutE2ETest';
 import { fluentTesterStyles } from '../Common/styles';
+import { MenuPicker } from '../Common/MenuPicker';
 
 const StandardCallout: React.FunctionComponent = () => {
   const [showStandardCallout, setShowStandardCallout] = React.useState(false);
@@ -233,35 +234,24 @@ const StandardCallout: React.FunctionComponent = () => {
             <Text>Enable ScrollView Callout</Text>
           </View>
 
-          <Picker
+          <MenuPicker
             prompt="Background Color"
-            selectedValue={selectedBackgroundColor || colorDefault}
-            onValueChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
-          >
-            {colorSelections.map((color, index) => (
-              <Picker.Item label={color} key={index} value={color} />
-            ))}
-          </Picker>
-
-          <Picker
+            selected={selectedBackgroundColor || colorDefault}
+            onChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
+            collection={colorSelections}
+          />
+          <MenuPicker
             prompt="Border Color"
-            selectedValue={selectedBorderColor || colorDefault}
-            onValueChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
-          >
-            {colorSelections.map((color, index) => (
-              <Picker.Item label={color} key={index} value={color} />
-            ))}
-          </Picker>
-
-          <Picker
+            selected={selectedBorderColor || colorDefault}
+            onChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
+            collection={colorSelections}
+          />
+          <MenuPicker
             prompt="Border Width"
-            selectedValue={selectedBorderWidth || borderWidthDefault}
-            onValueChange={(width) => setSelectedBorderWidth(width === borderWidthDefault ? undefined : width)}
-          >
-            {borderWidthSelections.map((width, index) => (
-              <Picker.Item label={width} key={index} value={width} />
-            ))}
-          </Picker>
+            selected={selectedBorderWidth || borderWidthDefault}
+            onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
+            collection={borderWidthSelections}
+          />
         </View>
 
         <Separator vertical />

package/src/FluentTester/TestComponents/Common/AlignmentPicker.tsx

@@ -1,28 +1,32 @@
 import * as React from 'react';
 import { undefinedText } from '../PersonaCoin/styles';
 import { IconAlignment } from '@fluentui/react-native';
-import { Picker, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
+import { MenuPicker } from './MenuPicker';
 
 const alignmentValues: Array<typeof undefinedText | IconAlignment> = [undefinedText, 'start', 'center', 'end'];
 
 interface IAlignmentPickerProps {
   style?: StyleProp<ViewStyle>;
   label: string;
-  onSelectionChange: (value: IconAlignment | undefined) => void;
+  onSelectionChange: (value: IconAlignment) => void;
 }
 
 export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (props: IAlignmentPickerProps) => {
   const { label, onSelectionChange, style } = props;
+  const [selectedValue, setSelectedValue] = React.useState<IconAlignment>();
+
   return (
-    <Picker
+    <MenuPicker
       style={style}
       prompt={label}
-      selectedValue={undefinedText}
-      onValueChange={(value, index) => onSelectionChange(index == 0 ? undefined : value)}
-    >
-      {alignmentValues.map((alignment, index) => (
-        <Picker.Item label={alignment} key={index} value={alignment} />
-      ))}
-    </Picker>
+      selected={selectedValue || undefinedText}
+      onChange={(value: IconAlignment, index: number) => {
+        const alignmentValue = index == 0 ? undefined : value;
+        onSelectionChange(alignmentValue);
+        setSelectedValue(alignmentValue);
+      }}
+      collection={alignmentValues}
+    />
   );
 };

package/src/FluentTester/TestComponents/Common/MenuPicker.desktop.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import { SvgXml } from '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>`;
+
+interface MenuPickerProps {
+  prompt?: string;
+  selected?: any;
+  onChange?: (value: any, index?: number) => void;
+  collection?: any[];
+  style?: any;
+}
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection } = props;
+  return (
+    <View style={menuPickerStyles.container}>
+      <Text style={menuPickerStyles.prompt}>{prompt}</Text>
+      <Menu>
+        <MenuTrigger>
+          <Button>
+            <Text>{selected}</Text>
+            <View style={menuPickerStyles.chevronContainer}>
+              <SvgXml xml={chevronXml} />
+            </View>
+          </Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {collection.map((value, index) => (
+              <MenuItem onClick={() => onChange(value, index)} key={index}>
+                {value}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </View>
+  );
+};
+
+const menuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});

package/src/FluentTester/TestComponents/Common/MenuPicker.macos.tsx

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

package/src/FluentTester/TestComponents/Common/MenuPicker.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Picker } from '@react-native-picker/picker';
+
+/*
+ * 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 iOS/Win32 and our own Picker for Win32/MacOS.
+ */
+
+interface MenuPickerProps {
+  prompt?: string;
+  selected?: any;
+  onChange?: (value: any, index?: number) => void;
+  collection?: any[];
+  style?: any;
+}
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection, style } = props;
+
+  return (
+    <Picker
+      prompt={prompt}
+      selectedValue={selected}
+      onValueChange={(itemValue: any, index: number) => onChange(itemValue, index)}
+      style={{ ...style }}
+    >
+      {collection.map((value, index) => (
+        <Picker.Item label={value} key={index} value={value} />
+      ))}
+    </Picker>
+  );
+};

package/src/FluentTester/TestComponents/Common/MenuPicker.win32.tsx

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

package/src/FluentTester/TestComponents/Common/MenuPicker.windows.tsx

@@ -0,0 +1,38 @@
+export * from './MenuPicker.desktop';
+import * as React from 'react';
+import { Button, Text, View, StyleSheet } from 'react-native';
+
+interface MenuPickerProps {
+  prompt?: string;
+  selected?: any;
+  onChange?: (value: any, index?: number) => void;
+  collection?: any[];
+  style?: any;
+}
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, onChange, collection } = props;
+  return (
+    <View style={menuPickerStyles.container}>
+      <Text style={menuPickerStyles.prompt}>{prompt}</Text>
+      {collection.map((value, index) => (
+        <Button onPress={() => onChange(value, index)} key={index} title={value} />
+      ))}
+    </View>
+  );
+};
+
+const menuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});

package/src/FluentTester/TestComponents/Common/StyledPicker.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MenuPicker } from './MenuPicker';
+import { ColorValue } from 'react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { commonTestStyles as commonStyles } from './styles';
+
+export const StyledPicker = (props) => {
+  const { prompt, selected, onChange, collection } = props;
+  const theme = useTheme();
+  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
+  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={collection} />;
+};

package/src/FluentTester/TestComponents/Common/styles.ts

@@ -26,6 +26,14 @@ export const commonTestStyles = StyleSheet.create({
   settings: {
     flexGrow: 1,
   },
+  settingsPicker: {
+    flexDirection: 'column',
+    flex: 1,
+  },
+  pickerControlled: {
+    flex: 1,
+    flexDirection: 'row',
+  },
   vmargin: {
     marginVertical: 6,
   },

package/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -508,7 +508,7 @@ const contextualMenuSections: TestSection[] = [
 
 export const ContextualMenuTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
-    win32Status: 'Experimental',
+    win32Status: 'Deprecated',
     uwpStatus: 'Backlog',
     iosStatus: 'Backlog',
     macosStatus: 'Backlog',

package/src/FluentTester/TestComponents/Persona/StandardUsage.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { Persona, PersonaSize } from '@fluentui/react-native';
 import { rajeshImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import { View, Text, Switch, Picker } from 'react-native';
+import { View, Text, Switch } from 'react-native';
 import { undefinedText } from '../PersonaCoin/styles';
+import { MenuPicker } from '../Common/MenuPicker';
 
 type WithUndefined<T> = T | typeof undefinedText;
 
@@ -53,17 +54,13 @@ export const StandardUsage: React.FunctionComponent = () => {
         <SwitchWithLabel label="Show secondary text" value={showSecondary} onValueChange={setShowSecondary} />
         <SwitchWithLabel label="Show tertiary text" value={showTertiary} onValueChange={setShowTertiary} />
         <SwitchWithLabel label="Show optional text" value={showOptional} onValueChange={setShowOptional} />
-
-        <Picker
+        <MenuPicker
           prompt="Size"
           style={commonStyles.header}
-          selectedValue={imageSize || undefinedText}
-          onValueChange={(size) => setImageSize(size === undefinedText ? undefined : size)}
-        >
-          {allSizes.map((size, index) => (
-            <Picker.Item label={size} key={index} value={size} />
-          ))}
-        </Picker>
+          selected={imageSize || undefinedText}
+          onChange={(size: PersonaSize | typeof undefinedText) => setImageSize(size === undefinedText ? undefined : size)}
+          collection={allSizes}
+        />
       </View>
 
       <Persona