@fluentui-react-native/tester 0.69.5 → 0.69.6

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/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

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PersonaSize, PersonaCoinFluentColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native';
-import { Switch, View, Text, Picker, ColorValue } from 'react-native';
+import { StyledPicker } from '../Common/StyledPicker';
+import { Switch, View, Text, ColorValue } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@@ -46,19 +47,6 @@ const allColors: WithUndefined<PersonaCoinFluentColor>[] = [
 
 const allPresences: WithUndefined<PersonaPresence>[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
 
-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: React.FunctionComponent = () => {
   const [showImage, setShowImage] = React.useState(true);
   const [imageSize, setImageSize] = React.useState<WithUndefined<PersonaSize>>('size72');
@@ -75,26 +63,27 @@ export const StandardUsage: React.FunctionComponent = () => {
   return (
     <View style={commonStyles.root}>
       {/* settings */}
-      <View style={commonStyles.settings}>
+      <View style={commonStyles.settingsPicker}>
         <View style={commonStyles.switch}>
           <Text style={textStyles}>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
         </View>
-
         <StyledPicker prompt="Size" selected={imageSize} onChange={onSizeChange} collection={allSizes} />
         <StyledPicker prompt="Coin color" selected={coinColor} onChange={onColorChange} collection={allColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
 
       {/* component under test */}
-      <PersonaCoin
-        size={imageSize === undefinedText ? undefined : imageSize}
-        initials="SN"
-        imageDescription="Photo of Satya Nadella"
-        presence={presence === undefinedText ? undefined : presence}
-        imageUrl={showImage ? satyaPhotoUrl : undefined}
-        coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
-      />
+      <View style={commonStyles.pickerControlled}>
+        <PersonaCoin
+          size={imageSize === undefinedText ? undefined : imageSize}
+          initials="SN"
+          imageDescription="Photo of Satya Nadella"
+          presence={presence === undefinedText ? undefined : presence}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
+        />
+      </View>
     </View>
   );
 };

package/src/FluentTester/theme/ThemePickers.android.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { View, PickerPropsAndroid } from 'react-native';
+import { View } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
 import { Theme, useTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { Picker } from '@react-native-picker/picker';
+import { Picker, PickerProps } from '@react-native-picker/picker';
 
 const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
   return {
@@ -52,13 +52,13 @@ export const ThemePickers: React.FunctionComponent = () => {
 
   type DropdownEntry = { label: string; value: string };
 
-  const dropdownProps: PickerPropsAndroid = {
+  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };
+
+  const dropdownProps: Omit<PickerProps, 'onValueChange' | 'selectedValue'> = {
     style: themedPickerStyles.dropdown,
     mode: 'dropdown',
   };
 
-  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };
-
   const Dropdown = (props: DropdownProps) => {
     const { initial, onValueChange, options } = props;
     return (

package/src/FluentTester/theme/ThemePickers.macos.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { Picker } from '@react-native-picker/picker';
+import { SvgXml } from 'react-native-svg';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { ButtonV1 as Button } from '@fluentui/react-native';
 import { testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
@@ -24,6 +26,17 @@ export const themePickerStyles = StyleSheet.create({
   },
 });
 
+const themeMenuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  svg: {
+    padding: 4,
+  },
+});
+
 type PartPickerEntry = { label: string; value: string };
 
 type PartPickerProps = {
@@ -32,6 +45,37 @@ type PartPickerProps = {
   onChange: (value: string) => void;
 };
 
+const ThemeMenuPicker = ({ selected, onChange, collection, style }) => {
+  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>`;
+
+  return (
+    <View style={{ ...themeMenuPickerStyles.container, ...style }}>
+      <Menu>
+        <MenuTrigger>
+          <Button>
+            <Text>{selected}</Text>
+            <View style={themeMenuPickerStyles.svg}>
+              <SvgXml xml={chevronXml} />
+            </View>
+          </Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {collection.map((entry: PartPickerEntry, index: number) => (
+              <MenuItem onClick={() => onChange(entry.value)} key={`entry${index}`}>
+                {entry.label}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </View>
+  );
+};
+
 export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
   const { initial, contents, onChange } = props;
   const [value, setValue] = React.useState(initial);
@@ -42,13 +86,7 @@ export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: Part
     },
     [setValue, onChange],
   );
-  return (
-    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
-      {contents.map((entry: PartPickerEntry, index: number) => (
-        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
-      ))}
-    </Picker>
-  );
+  return <ThemeMenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });

package/src/FluentTester/theme/ThemePickers.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { View, Picker, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
 import { ThemeOptions } from '@fluentui-react-native/theme-types';
+import { MenuPicker } from '../TestComponents/Common/MenuPicker';
 
 export const themePickerStyles = StyleSheet.create({
   pickerRoot: {
@@ -42,13 +43,10 @@ export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: Part
     },
     [setValue, onChange],
   );
-  return (
-    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
-      {contents.map((entry: PartPickerEntry, index: number) => (
-        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
-      ))}
-    </Picker>
-  );
+  const MenuPickerCollection = contents.map((entry: PartPickerEntry) => {
+    return entry.label;
+  });
+  return <MenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={MenuPickerCollection} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });