Add checkbox implem to Menu

package.json

@@ -100,6 +100,8 @@
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
     "eslint": "^7.1.0",
+    "//": "pretty-format contains typing only supported by TS 3.8+ remove when support in this repo is available",
+    "pretty-format": "^24.9.0",
     "copy-to-clipboard": "3.2.0"
   },
   "syncpack": {

packages/react-examples/.storybook/preview.js

@@ -6,7 +6,7 @@ import { withInfo } from '@storybook/addon-info';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withPerformance } from 'storybook-addon-performance';
-import { withKeytipLayer, withStrictMode, withCompatThemeProvider } from '@fluentui/storybook';
+import { withKeytipLayer, withStrictMode, withCompatThemeProvider, withFluentProvider } from '@fluentui/storybook';
 
 addDecorator(withPerformance);
 addDecorator(withInfo());
@@ -29,6 +29,10 @@ if (
   addDecorator(withCompatThemeProvider);
   addDecorator(withStrictMode);
 }
+if (['react-menu'].includes('PACKAGE_NAME')) {
+  addDecorator(withFluentProvider);
+  addDecorator(withStrictMode);
+}
 
 addParameters({
   a11y: {

packages/react-examples/src/react-menu/MenuList/MenuList.stories.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 
-import { MenuList, MenuItem } from '@fluentui/react-menu';
-import { teamsLightTheme } from '@fluentui/react-theme';
-import { FluentProvider } from '@fluentui/react-provider';
-import { CutIcon, PasteIcon, EditIcon } from '@fluentui/react-icons-mdl2';
+import { MenuList, MenuItem, MenuItemCheckbox } from '@fluentui/react-menu';
+import { CutIcon, PasteIcon, EditIcon, AcceptIcon } from '@fluentui/react-icons-mdl2';
 import { makeStyles } from '@fluentui/react-make-styles';
 
 const useContainerStyles = makeStyles([
@@ -27,25 +25,45 @@ const Container: React.FC = props => {
 };
 
 export const MenuListExample = () => (
-  <FluentProvider theme={teamsLightTheme}>
-    <Container>
-      <MenuList>
-        <MenuItem>Item</MenuItem>
-        <MenuItem>Item</MenuItem>
-        <MenuItem>Item</MenuItem>
-      </MenuList>
-    </Container>
-  </FluentProvider>
+  <Container>
+    <MenuList>
+      <MenuItem>Item</MenuItem>
+      <MenuItem>Item</MenuItem>
+      <MenuItem>Item</MenuItem>
+    </MenuList>
+  </Container>
 );
 
 export const MenuListWithIconsExample = () => (
-  <FluentProvider theme={teamsLightTheme}>
+  <Container>
+    <MenuList>
+      <MenuItem icon={<CutIcon />}>Item</MenuItem>
+      <MenuItem icon={<PasteIcon />}>Item</MenuItem>
+      <MenuItem icon={<EditIcon />}>Item</MenuItem>
+    </MenuList>
+  </Container>
+);
+
+export const MenuListWithCheckboxes = () => {
+  const checkmark = <AcceptIcon />;
+  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({});
+  const onChange = (name: string, items: string[]) => {
+    setCheckedValues(s => ({ ...s, [name]: items }));
+  };
+
+  return (
     <Container>
-      <MenuList>
-        <MenuItem icon={<CutIcon />}>Item</MenuItem>
-        <MenuItem icon={<PasteIcon />}>Item</MenuItem>
-        <MenuItem icon={<EditIcon />}>Item</MenuItem>
+      <MenuList checkedValues={checkedValues} onCheckedValuesChange={onChange}>
+        <MenuItemCheckbox name="checkbox" value="1" checkmark={checkmark}>
+          Item
+        </MenuItemCheckbox>
+        <MenuItemCheckbox name="checkbox" value="2" checkmark={checkmark}>
+          Item
+        </MenuItemCheckbox>
+        <MenuItemCheckbox name="checkbox" value="3" checkmark={checkmark}>
+          Item
+        </MenuItemCheckbox>
       </MenuList>
     </Container>
-  </FluentProvider>
-);
+  );
+};

packages/react-menu/etc/react-menu.api.md

@@ -12,6 +12,30 @@ import { ShorthandProps } from '@fluentui/react-utils';
 // @public
 export const MenuItem: React.ForwardRefExoticComponent<Pick<MenuItemProps, React.ReactText> & React.RefAttributes<HTMLElement>>;
 
+// @public
+export const MenuItemCheckbox: React.ForwardRefExoticComponent<Pick<MenuItemCheckboxProps, React.ReactText> & React.RefAttributes<HTMLElement>>;
+
+// Warning: (ae-forgotten-export) The symbol "MenuItemSelectableProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface MenuItemCheckboxProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemProps, MenuItemSelectableProps {
+    checkmark?: ShorthandProps;
+    icon?: ShorthandProps;
+}
+
+// @public
+export const menuItemCheckboxShorthandProps: string[];
+
+// Warning: (ae-forgotten-export) The symbol "MenuItemSelectableState" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface MenuItemCheckboxState extends MenuItemCheckboxProps, MenuItemState, MenuItemSelectableState {
+    checkmark?: ObjectShorthandProps<HTMLSpanElement>;
+    icon?: ObjectShorthandProps<HTMLElement>;
+    // (undocumented)
+    ref: React.MutableRefObject<HTMLElement>;
+}
+
 // @public (undocumented)
 export interface MenuItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
     icon?: ShorthandProps;
@@ -31,6 +55,8 @@ export const MenuList: React.ForwardRefExoticComponent<Pick<MenuListProps, React
 
 // @public (undocumented)
 export interface MenuListProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+    checkedValues?: Record<string, string[]>;
+    onCheckedValuesChange?: (name: string, value: string[]) => void;
 }
 
 // @public (undocumented)
@@ -41,6 +67,9 @@ export interface MenuListState extends MenuListProps {
 // @public
 export const renderMenuItem: (state: MenuItemState) => JSX.Element;
 
+// @public
+export const renderMenuItemCheckbox: (state: MenuItemCheckboxState) => JSX.Element;
+
 // @public
 export const renderMenuList: (state: MenuListState) => JSX.Element;
 
@@ -50,6 +79,9 @@ export const useIconStyles: (selectors: MenuItemState) => string;
 // @public
 export const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemProps | undefined) => MenuItemState;
 
+// @public
+export const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemCheckboxProps | undefined) => MenuItemCheckboxState;
+
 // @public
 export const useMenuItemStyles: (state: MenuItemState) => void;
 

packages/react-menu/package.json

@@ -26,9 +26,10 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/react-conformance": "^1.0.0",
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
+    "@fluentui/react-conformance": "^1.0.0",
     "@fluentui/scripts": "^1.0.0",
+    "@testing-library/react": "^11.2.5",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/jest": "~24.9.0",
@@ -44,6 +45,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
+    "@fluentui/keyboard-key": "^0.2.13",
     "@fluentui/react-hooks": "^8.0.0-beta.10",
     "@fluentui/react-make-styles": "^0.2.4",
     "@fluentui/react-theme": "^0.3.1",

packages/react-menu/src/MenuItemCheckbox.ts

@@ -0,0 +1 @@
+export * from './components/MenuItemCheckbox/index';

packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { render, fireEvent } from '@testing-library/react';
+import { ReactWrapper } from 'enzyme';
+import { isConformant } from '../../common/isConformant';
+import { MenuItemCheckbox } from './MenuItemCheckbox';
+import { MenuListContext, MenuListProvider } from '../../menuListContext';
+
+describe('MenuItemCheckbox conformance', () => {
+  isConformant({
+    Component: MenuItemCheckbox,
+    displayName: 'MenuItemCheckbox',
+  });
+
+  let wrapper: ReactWrapper | undefined;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = undefined;
+    }
+  });
+
+  /**
+   * Note: see more visual regression tests for MenuItemCheckbox in /apps/vr-tests.
+   */
+  it('renders a default state', () => {
+    const component = renderer.create(<MenuItemCheckbox>Default MenuItemCheckbox</MenuItemCheckbox>);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('MenuItemCheckbox', () => {
+  const TestMenuListContext = (props: { children: React.ReactNode; context?: Partial<MenuListContext> }) => {
+    const contextValue: MenuListContext = {
+      checkedValues: {},
+      onCheckedValuesChange: jest.fn(),
+      ...(props.context && props.context),
+    };
+
+    return <MenuListProvider value={contextValue}>{props.children}</MenuListProvider>;
+  };
+
+  it('should render checkmark slot if checked', () => {
+    // Arrange
+    const checkedValues = { test: ['1'] };
+    const checkmark = 'xxx';
+    const { getByText } = render(
+      <TestMenuListContext context={{ checkedValues }}>
+        <MenuItemCheckbox name="test" value="1" checkmark={checkmark}>
+          Checkbox
+        </MenuItemCheckbox>
+      </TestMenuListContext>,
+    );
+
+    // Assert
+    expect(getByText(checkmark)).not.toBeNull();
+  });
+
+  it('should render icon slot', () => {
+    // Arrange
+    const icon = 'xxx';
+    const { getByText } = render(
+      <TestMenuListContext>
+        <MenuItemCheckbox name="test" value="1" icon={icon}>
+          Checkbox
+        </MenuItemCheckbox>
+      </TestMenuListContext>,
+    );
+
+    // Assert
+    expect(getByText(icon)).not.toBeNull();
+  });
+
+  it('should set aria-checked value to true if value is checked', () => {
+    // Arrange
+    const checkedValues = { test: ['1'] };
+    const checkmark = 'xxx';
+    const { container } = render(
+      <TestMenuListContext context={{ checkedValues }}>
+        <MenuItemCheckbox name="test" value="1" checkmark={checkmark}>
+          Checkbox
+        </MenuItemCheckbox>
+      </TestMenuListContext>,
+    );
+
+    // Assert
+    expect(container.querySelector('[role="menuitemcheckbox"')?.getAttribute('aria-checked')).toEqual('true');
+  });
+
+  it.each([
+    ['uncheck', ['1'], []],
+    ['check', [], ['1']],
+  ])('should %s checkbox on click', (_, checkedItems, expectedResult) => {
+    // Arrange
+    const checkboxName = 'name';
+    const checkedValues = { [checkboxName]: checkedItems };
+    const spy = jest.fn();
+    const { container } = render(
+      <TestMenuListContext context={{ checkedValues, onCheckedValuesChange: spy }}>
+        <MenuItemCheckbox name={checkboxName} value={'1'}>
+          Checkbox
+        </MenuItemCheckbox>
+      </TestMenuListContext>,
+    );
+
+    // Act
+    const menuitem = container.querySelector('[role="menuitemcheckbox"');
+    menuitem && fireEvent.click(menuitem);
+
+    // Assert
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(checkboxName, [...expectedResult]);
+  });
+});

packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useMenuItemCheckbox } from './useMenuItemCheckbox';
+import { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
+import { renderMenuItemCheckbox } from './renderMenuItemCheckbox';
+import { useCheckmarkStyles } from '../../selectable';
+import { useMenuItemStyles } from '../MenuItem/useMenuItemStyles';
+
+/**
+ * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
+ * {@docCategory MenuItemCheckbox}
+ */
+export const MenuItemCheckbox = React.forwardRef<HTMLElement, MenuItemCheckboxProps>((props, ref) => {
+  const state = useMenuItemCheckbox(props, ref);
+  useMenuItemStyles(state);
+  useCheckmarkStyles(state);
+
+  return renderMenuItemCheckbox(state);
+});
+
+MenuItemCheckbox.displayName = 'MenuItemCheckbox';

packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ComponentProps, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utils';
+import { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable';
+import { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';
+
+export interface MenuItemCheckboxProps
+  extends ComponentProps,
+    React.HTMLAttributes<HTMLElement>,
+    MenuItemProps,
+    MenuItemSelectableProps {
+  /**
+   * Icon slot rendered before children content
+   */
+  icon?: ShorthandProps;
+
+  /**
+   * Slot for the checkmark indicator
+   */
+  checkmark?: ShorthandProps;
+}
+
+export interface MenuItemCheckboxState extends MenuItemCheckboxProps, MenuItemState, MenuItemSelectableState {
+  ref: React.MutableRefObject<HTMLElement>;
+
+  /**
+   * Icon slot rendered before children content
+   */
+  icon?: ObjectShorthandProps<HTMLElement>;
+
+  /**
+   * Slot for the checkmark indicator
+   */
+  checkmark: ObjectShorthandProps<HTMLElement>;
+}

packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemCheckbox conformance renders a default state 1`] = `
+<div
+  aria-checked={false}
+  className=""
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="menuitemcheckbox"
+  tabIndex={0}
+>
+  Default MenuItemCheckbox
+</div>
+`;

packages/react-menu/src/components/MenuItemCheckbox/index.ts

@@ -0,0 +1,4 @@
+export * from './MenuItemCheckbox.types';
+export * from './MenuItemCheckbox';
+export * from './renderMenuItemCheckbox';
+export * from './useMenuItemCheckbox';

packages/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utils';
+import { MenuItemCheckboxState } from './MenuItemCheckbox.types';
+import { menuItemCheckboxShorthandProps } from './useMenuItemCheckbox';
+
+/** Function that renders the final JSX of the component  */
+export const renderMenuItemCheckbox = (state: MenuItemCheckboxState) => {
+  const { slots, slotProps } = getSlots(state, menuItemCheckboxShorthandProps);
+
+  return (
+    <slots.root {...slotProps.root}>
+      {state.checked && <slots.checkmark {...slotProps.checkmark} />}
+      <slots.icon {...slotProps.icon} />
+      {state.children}
+    </slots.root>
+  );
+};