@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/Menu/MenuScrollView.tsx

@@ -1,100 +0,0 @@
-import React, { useState } from 'react';
-import { TextInput, StyleSheet, View } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-
-const styles = StyleSheet.create({
-  menuContainerRow: { flexDirection: 'row' },
-  menuMargin: { marginRight: 20 },
-});
-
-export const MenuScrollView: React.FunctionComponent = () => {
-  const [data, setData] = useState([
-    <MenuItem key={1}>MenuItem 1</MenuItem>,
-    <MenuItem key={2}>MenuItem 2</MenuItem>,
-    <MenuItem key={3}>MenuItem 3</MenuItem>,
-    <MenuItem key={4}>MenuItem 4</MenuItem>,
-    <MenuItem key={5}>MenuItem 5</MenuItem>,
-  ]);
-
-  const insertOnClick = React.useCallback(() => {
-    data.push(<MenuItem key={Math.random()}>MenuItem</MenuItem>);
-    const newList = [...data];
-    setData(newList);
-  }, [data]);
-
-  const popOnClick = React.useCallback(() => {
-    if (data.length > 0) {
-      data.pop();
-      const newList = [...data];
-      setData(newList);
-    }
-  }, [data]);
-
-  const [maxHeight, setMaxHeight] = useState<number>(800);
-  const menuItems = [];
-
-  for (let i = 0; i < 40; i++) {
-    menuItems.push(<MenuItem key={i}>MenuItem {i}</MenuItem>);
-  }
-
-  return (
-    <Stack style={stackStyle}>
-      <View style={styles.menuContainerRow}>
-        <TextInput
-          accessibilityLabel="Max height for menu"
-          style={[commonStyles.textBox, styles.menuMargin]}
-          placeholder="Max height for menu"
-          blurOnSubmit={true}
-          onSubmitEditing={(e) => {
-            setMaxHeight(parseInt(e.nativeEvent.text));
-          }}
-        />
-        <Menu>
-          <MenuTrigger>
-            <Button>Custom height</Button>
-          </MenuTrigger>
-          <MenuPopover maxHeight={maxHeight}>
-            <MenuList>{menuItems}</MenuList>
-          </MenuPopover>
-        </Menu>
-      </View>
-      <View style={styles.menuContainerRow}>
-        <Button appearance="subtle" onClick={insertOnClick}>
-          Add new menu item
-        </Button>
-        <Button appearance="subtle" onClick={popOnClick}>
-          Remove last menu item
-        </Button>
-        <Menu>
-          <MenuTrigger>
-            <Button>Mutable Menu: MaxHeight 250 </Button>
-          </MenuTrigger>
-          <MenuPopover maxHeight={250}>
-            <MenuList>{data}</MenuList>
-          </MenuPopover>
-        </Menu>
-      </View>
-      <Menu>
-        <MenuTrigger>
-          <Button>Height: 100 minWidth: 250</Button>
-        </MenuTrigger>
-        <MenuPopover maxHeight={100} minWidth={250}>
-          <MenuList>
-            <MenuItem>MenuItem 1</MenuItem>
-            <MenuItem>MenuItem 2</MenuItem>
-            <MenuItem>MenuItem 3</MenuItem>
-            <MenuItem>MenuItem 4</MenuItem>
-            <MenuItem>MenuItem 5</MenuItem>
-            <MenuItem>MenuItem 6</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};

package/src/TestComponents/Menu/MenuTest.tsx

@@ -1,567 +0,0 @@
-import React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { MENU_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import type { MenuProps } from '@fluentui-react-native/menu';
-import {
-  Menu,
-  MenuItem,
-  MenuItemCheckbox,
-  MenuItemRadio,
-  MenuTrigger,
-  MenuPopover,
-  MenuList,
-  MenuDivider,
-  MenuGroup,
-  MenuGroupHeader,
-} from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-import { Switch } from '@fluentui-react-native/switch';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { E2EMenuTest } from './E2EMenuTest';
-import { MenuComponentOutsideMenuList } from './MenuComponentOutsideMenuList';
-import { MenuIcons } from './MenuIcons';
-import { MenuTriggerChildRef } from './MenuRefs';
-import { MenuScrollView } from './MenuScrollView';
-import { MenuTooltips } from './MenuTooltips';
-import { MenuTriggerHoverCallback, MenuTriggerOnClickCallback } from './MenuTriggerCallbacks';
-import { stackStyle } from '../Common/styles';
-import { Test } from '../Test';
-import type { TestSection, PlatformStatus } from '../Test';
-
-const MenuDefault: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItem disabled>A disabled MenuItem</MenuItem>
-            <MenuItem>A third plain MenuItem</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const defaultCheckedTestCase = ['itemOne'];
-const checkedTestCase = ['itemTwo'];
-
-const MenuCheckmarks: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu defaultChecked={defaultCheckedTestCase}>
-        <MenuTrigger>
-          <Button>All checkmark items</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItemCheckbox name="itemOne">A MenuItem with checkmark</MenuItemCheckbox>
-            <MenuDivider />
-            <MenuItemCheckbox name="itemTwo">Another MenuItem with checkmark</MenuItemCheckbox>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-      <Menu hasCheckmarks checked={checkedTestCase}>
-        <MenuTrigger>
-          <Button>Some controlled checkmark items with alignment</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItemCheckbox name="itemTwo">A MenuItem with checkmark</MenuItemCheckbox>
-            <MenuItemCheckbox disabled name="itemThree">
-              A disabled MenuItem with checkmark
-            </MenuItemCheckbox>
-            <MenuItemCheckbox name="itemFour">A MenuItem with checkmark</MenuItemCheckbox>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-      <Menu>
-        <MenuTrigger>
-          <Button>Some checkmark items without alignment</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItemCheckbox name="itemTwo">A MenuItem with checkmark without alignment</MenuItemCheckbox>
-            <MenuItemCheckbox name="itemThree">A MenuItem with checkmark without alignment</MenuItemCheckbox>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const MenuRadioItem: React.FunctionComponent = () => {
-  const [checked, setChecked] = React.useState(['itemOne']);
-  const onCheckedChange = React.useCallback(
-    (_e, checkedChange) => {
-      setChecked(checkedChange);
-    },
-    [setChecked],
-  );
-
-  return (
-    <Stack style={stackStyle}>
-      <Text>Current checked: {checked.join(' ')}</Text>
-      <Menu defaultChecked={defaultCheckedTestCase} onCheckedChange={onCheckedChange}>
-        <MenuTrigger>
-          <Button>Items with radio selection</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItemRadio name="itemOne">A MenuItem with checkmark and radio selection</MenuItemRadio>
-            <MenuItemRadio name="itemTwo">Another MenuItem with checkmark and radio selection</MenuItemRadio>
-            <MenuItemRadio name="itemThree">A third MenuItem with checkmark and radio selection</MenuItemRadio>
-            <MenuItemCheckbox name="itemFour">A MenuItem with checkmark and toggle selection</MenuItemCheckbox>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const Submenu: React.FunctionComponent<MenuProps> = (props: MenuProps) => {
-  return (
-    <Menu {...props}>
-      <MenuTrigger>
-        <MenuItem>A second MenuItem trigger</MenuItem>
-      </MenuTrigger>
-      <MenuPopover minWidth={230}>
-        <MenuList>
-          <MenuItemCheckbox name={'a'}>A nested MenuItemCheckbox</MenuItemCheckbox>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <Submenu />
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-const MenuSubMenu: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A MenuItem</MenuItem>
-            <Submenu />
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const SubmenuWithScrollView: React.FunctionComponent<MenuProps> = (props: MenuProps) => {
-  return (
-    <Menu {...props}>
-      <MenuTrigger>
-        <MenuItem>A second MenuItem trigger</MenuItem>
-      </MenuTrigger>
-      <MenuPopover maxHeight={200}>
-        <MenuList>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-          <MenuItem>A nested MenuItem</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-const MenuSubMenuWithScrollView: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover doNotTakePointerCapture={true}>
-          <MenuList>
-            <MenuItem>A MenuItem</MenuItem>
-            <SubmenuWithScrollView />
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const MenuOpenOnHover: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu openOnHover>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A MenuItem</MenuItem>
-            <Submenu />
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const rootStackStyle = StyleSheet.create({ root: { ...(stackStyle as object), flexDirection: 'row' } });
-
-const MenuControlledOpen: React.FunctionComponent = () => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  const onOpenChange = () => {
-    setOpen(false);
-  };
-
-  return (
-    <Stack style={rootStackStyle.root}>
-      <Button onClick={() => setOpen(!open)}>Toggle open</Button>
-      {/* For Android Platform the Controlled trigger becomes unavailable because of the screen we show on the screen click on which closes the Menu , Hence we need to make the state change based on open change */}
-
-      <Menu {...(Platform.OS === 'android' && { onOpenChange })} open={open}>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A MenuItem</MenuItem>
-            {Platform.OS !== 'android' && <Submenu />}
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const CustomMenuPopover = MenuPopover.customize({ borderWidth: 4, borderColor: 'blue' });
-const CustomMenuList = MenuList.customize({ gap: 5, padding: 6, backgroundColor: 'pink' });
-const CustomMenuItem = MenuItem.customize({
-  gap: 5,
-  padding: 8,
-  backgroundColor: 'red',
-  color: 'white',
-  borderRadius: 2,
-  checkmarkSize: 10,
-  submenuIndicatorPadding: 4,
-  submenuIndicatorSize: 10,
-  fontSize: 14,
-});
-const CustomMenuCheckmark = MenuItemCheckbox.customize({
-  gap: 5,
-  padding: 8,
-  backgroundColor: 'red',
-  color: 'white',
-  borderRadius: 2,
-  checkmarkSize: 10,
-  fontSize: 14,
-  checkmarkColor: 'blue',
-});
-const CustomMenuDivider = MenuDivider.customize({
-  height: 8,
-  margin: 4,
-  marginVertical: 6,
-  width: 100,
-  backgroundColor: 'purple',
-});
-
-const MenuCustomized: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <CustomMenuPopover directionalHint="rightCenter">
-          <CustomMenuList>
-            <CustomMenuItem>A MenuItem</CustomMenuItem>
-            <CustomMenuItem>A MenuItem</CustomMenuItem>
-            <CustomMenuDivider />
-            <CustomMenuCheckmark name={'custom'}>A MenuItem</CustomMenuCheckmark>
-          </CustomMenuList>
-        </CustomMenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const MenuNofM: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItem disabled>A disabled MenuItem</MenuItem>
-            <MenuItem accessibilityPositionInSet={9}>A plain MenuItem</MenuItem>
-            <MenuDivider />
-            {Platform.OS !== 'android' && <Submenu accessibilityPositionInSet={16} accessibilitySetSize={7} />}
-            <MenuItem disabled accessibilitySetSize={2}>
-              A disabled MenuItem
-            </MenuItem>
-            <MenuItem>A plain MenuItem</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const CustomMenuTrigger: React.FunctionComponent = () => {
-  return (
-    <View style={{ backgroundColor: 'purple', width: 80, flexDirection: 'row', justifyContent: 'center' }}>
-      <MenuTrigger>
-        <Button>Test</Button>
-      </MenuTrigger>
-    </View>
-  );
-};
-
-const MenuWithCustomMenuTrigger: React.FunctionComponent<MenuProps> = (props: MenuProps) => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu {...props}>
-        <CustomMenuTrigger />
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItem disabled>A disabled MenuItem</MenuItem>
-            <MenuItem accessibilityPositionInSet={9}>A plain MenuItem</MenuItem>
-            <MenuDivider />
-            {Platform.OS !== 'android' && <Submenu />}
-            <MenuItem disabled accessibilitySetSize={2}>
-              A disabled MenuItem
-            </MenuItem>
-            <MenuItem>A plain MenuItem</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const MenuWithGroups: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>Test</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuGroup>
-              <MenuGroupHeader>Section 1</MenuGroupHeader>
-              <MenuItem>A plain MenuItem</MenuItem>
-              <MenuItem>A plain MenuItem</MenuItem>
-            </MenuGroup>
-            <MenuGroup>
-              <MenuGroupHeader>Section 2</MenuGroupHeader>
-              <MenuItem>A plain MenuItem</MenuItem>
-              <MenuItem>A plain MenuItem</MenuItem>
-              <MenuItem>A plain MenuItem</MenuItem>
-            </MenuGroup>
-            <MenuDivider />
-            <MenuGroup>
-              <MenuItem>A plain MenuItem</MenuItem>
-            </MenuGroup>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const menuAsABlackboxStyles = StyleSheet.create({
-  actionButton: { alignSelf: 'center', justifyContent: 'center' },
-  switch: { marginHorizontal: 10 },
-});
-
-const MenuAsABlackbox: React.FunctionComponent = () => {
-  const [open, setOpen] = React.useState<boolean>(false);
-  const [dnd, setDnD] = React.useState<boolean>(false);
-
-  const onOpenChange = React.useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
-
-  const onSwitchChange = React.useCallback(() => {
-    setDnD(!dnd);
-  }, [dnd, setDnD]);
-
-  const onMenuTriggerClicked = React.useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
-
-  return (
-    <Stack style={stackStyle}>
-      <Menu onOpenChange={onOpenChange} open={open}>
-        <MenuTrigger>
-          <Button onClick={onMenuTriggerClicked}>Blockbox Menu</Button>
-        </MenuTrigger>
-
-        <MenuPopover minWidth={200}>
-          <MenuList>
-            <Switch checked={dnd} onChange={onSwitchChange} style={menuAsABlackboxStyles.switch} label="Don't disturb" />
-            <MenuItem>{dnd ? 'DND is on' : 'DND is off'}</MenuItem>
-            <View style={menuAsABlackboxStyles.actionButton}>
-              <Button appearance="subtle" onClick={onOpenChange}>
-                Action
-              </Button>
-            </View>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};
-
-const menuSections: TestSection[] = [
-  {
-    name: 'Menu Default',
-    testID: MENU_TESTPAGE,
-    component: MenuDefault,
-  },
-  {
-    name: 'Menu Checkmarks',
-    component: MenuCheckmarks,
-  },
-  {
-    name: 'Menu Radioitem',
-    component: MenuRadioItem,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Menu Submenu with ScrollView',
-      component: MenuSubMenuWithScrollView,
-    },
-  }),
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Menu open on hover',
-      component: MenuOpenOnHover,
-    },
-  }),
-  {
-    name: 'Menu open controlled',
-    component: MenuControlledOpen,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Menu with tooltips on items',
-      component: MenuTooltips,
-    },
-  }),
-  {
-    name: 'Menu with icons',
-    component: MenuIcons,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Menu Submenu',
-      component: MenuSubMenu,
-    },
-  }),
-  {
-    name: 'Menu with ScrollView',
-    component: MenuScrollView,
-  },
-  Platform.select({
-    android: { name: 'Menu as a blackbox', component: MenuAsABlackbox },
-    default: null,
-  }),
-  {
-    name: 'Menu Trigger onClick Override',
-    component: MenuTriggerOnClickCallback,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Menu Trigger Hover Override',
-      component: MenuTriggerHoverCallback,
-    },
-  }),
-  {
-    name: 'Menu Customized',
-    component: MenuCustomized,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Menu Refs',
-      component: MenuTriggerChildRef,
-    },
-  }),
-  {
-    name: 'Menu N of M Override',
-    component: MenuNofM,
-  },
-  {
-    name: 'Menu with custom MenuTrigger',
-    component: MenuWithCustomMenuTrigger,
-  },
-  {
-    name: 'Menu with groups',
-    component: MenuWithGroups,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'MenuList component outside menu list test',
-      component: MenuComponentOutsideMenuList,
-    },
-  }),
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'Menu E2E',
-    component: E2EMenuTest,
-  },
-];
-
-export const MenuTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Backlog',
-    macosStatus: 'Production',
-    androidStatus: 'Experimental',
-  };
-
-  const description =
-    'A Menu is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Menu/SPEC.md';
-
-  return <Test name="Menu Test" description={description} spec={spec} sections={menuSections} status={status} e2eSections={e2eSections} />;
-};

package/src/TestComponents/Menu/MenuTooltips.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-export const MenuTooltips: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu hasTooltips>
-        <MenuTrigger>
-          <Button>Items with tooltips</Button>
-        </MenuTrigger>
-        <MenuPopover maxWidth={160}>
-          <MenuList>
-            <MenuItem>Option 1 has some really long text that goes on and on</MenuItem>
-            <MenuItem>Option2hastextwithnobreaksthatgoesonandon</MenuItem>
-            <MenuItem tooltip={'A custom tooltip'}>Option 3 has custom tooltip</MenuItem>
-            <MenuItemCheckbox name="Option4">Option 4 is a checkbox</MenuItemCheckbox>
-            <MenuItemRadio name="Option5">Option 5 is a radio</MenuItemRadio>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};