feat(menu): add component

package.json

@@ -76,6 +76,7 @@
     "@material/line-ripple": "^1.0.0",
     "@material/linear-progress": "^0.41.0",
     "@material/list": "^1.0.0",
+    "@material/menu": "^1.1.0",
     "@material/menu-surface": "^1.0.1",
     "@material/notched-outline": "^0.41.0",
     "@material/radio": "^0.41.0",

packages/list/ListItem.tsx

@@ -34,6 +34,8 @@ export interface ListItemProps<T> extends React.HTMLProps<T> {
   tag?: string;
   activated?: boolean;
   selected?: boolean;
+  ref?: React.Ref<any>;
+  renderWithListItemProps?: boolean;
 };
 
 // TODO: convert to functional component
@@ -47,6 +49,7 @@ export default class ListItem<T extends HTMLElement = HTMLElement> extends React
   static defaultProps: Partial<ListItemProps<HTMLElement>> = {
     checkboxList: false,
     radioList: false,
+    renderWithListItemProps: false,
     className: '',
     tabIndex: -1,
     onKeyDown: () => {},
@@ -84,9 +87,9 @@ export default class ListItem<T extends HTMLElement = HTMLElement> extends React
       role,
       checkboxList,
       radioList,
+      renderWithListItemProps,
       /* eslint-enable no-unused-vars */
       tag: Tag,
-
       ...otherProps
     } = this.props;
     return (

packages/list/index.tsx

@@ -49,10 +49,11 @@ export interface ListProps<T extends HTMLElement> extends React.HTMLProps<HTMLEl
   wrapFocus?: boolean;
   tag?: string;
   children: ListItem<T> | ListItem<T>[] | React.ReactNode;
+  ref?: React.Ref<any>;
 };
 
 function isReactText(element: any): element is React.ReactText {
-  return typeof element === 'string' || typeof element === 'number';
+  return typeof element === 'string' || typeof element === 'number' || !element;
 }
 
 function isListItem(element: any): element is ListItem {
@@ -316,8 +317,11 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com
   }
 
   renderChild = (child: React.ReactElement<ListItemProps<T>> | React.ReactChild) => {
-    if (!isReactText(child) && isListItem(child)) {
-      return this.renderListItem(child, this.listItemCount++);
+    if (!isReactText(child)) {
+      const {renderWithListItemProps} = child.props;
+      if (renderWithListItemProps || isListItem(child)) {
+        return this.renderListItem(child, this.listItemCount++);
+      }
     }
     return child;
   };

packages/menu-surface/index.tsx

@@ -29,7 +29,6 @@ import {Corner} from '@material/menu-surface/index';
 import {MDCMenuDistance} from '@material/menu-surface/types';
 
 export interface MenuSurfaceProps extends React.HTMLProps<HTMLDivElement> {
-  className?: string;
   anchorElement?: HTMLElement;
   anchorCorner?: number;
   anchorMargin?: {
@@ -45,7 +44,6 @@ export interface MenuSurfaceProps extends React.HTMLProps<HTMLDivElement> {
   };
   onClose?: () => void;
   onOpen?: () => void;
-  onKeyDown?: (event: React.KeyboardEvent) => void;
   quickOpen?: boolean;
   open?: boolean;
   fixed?: boolean;

packages/menu/MenuList.tsx

@@ -0,0 +1,104 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import * as React from 'react';
+import List, {ListProps} from '@material/react-list';
+// eslint-disable-next-line no-unused-vars
+import {MDCMenuFoundation} from '@material/menu/foundation';
+
+type RefCallback<T> = (node: T | null) => void;
+
+export interface MenuListProps<T extends HTMLElement> extends Exclude<ListProps<T>, 'ref'> {
+  innerRef?: RefCallback<List> | React.RefObject<List>;
+  handleItemAction?: MDCMenuFoundation['handleItemAction'];
+};
+
+class MenuList<T extends HTMLElement = HTMLElement> extends React.Component<MenuListProps<T>, {}> {
+  private listInstance = React.createRef<List>();
+
+  static defaultProps: Partial<MenuListProps<HTMLElement>> = {
+    className: '',
+    handleSelect: () => {},
+    handleItemAction: () => {},
+  };
+
+  get listElements(): Element[] {
+    if (!this.listInstance.current) {
+      return [];
+    }
+    return this.listInstance.current.listElements;
+  }
+
+  handleSelect: ListProps<HTMLElement>['handleSelect'] = (activatedItemIndex, selected) => {
+    this.props.handleSelect!(activatedItemIndex, selected);
+    this.props.handleItemAction!(this.listElements[activatedItemIndex]);
+  }
+
+
+  attachRef = (node: List | null) => {
+    const {innerRef} = this.props;
+
+    // https://github.com/facebook/react/issues/13029#issuecomment-410002316
+    // @ts-ignore this is acceptable according to the comment above
+    this.listInstance.current = node;
+
+    if (!innerRef) {
+      return;
+    }
+
+    if (typeof innerRef !== 'function') {
+      // @ts-ignore same as above
+      innerRef.current = node;
+    } else {
+      innerRef(node);
+    }
+  }
+
+  render() {
+    const {
+      'aria-hidden': ariaHidden,
+      /* eslint-disable no-unused-vars */
+      handleSelect,
+      handleItemAction,
+      role,
+      innerRef,
+      children,
+      ref,
+      /* eslint-enable no-unused-vars */
+      ...otherProps
+    } = this.props;
+
+    return (
+      <List
+        aria-hidden={ariaHidden !== undefined ? ariaHidden : 'true'}
+        role={role || 'menu'}
+        handleSelect={this.handleSelect}
+        ref={this.attachRef}
+        {...otherProps}
+      >
+        {children}
+      </List>
+    );
+  }
+}
+
+export default MenuList;

packages/menu/MenuListItem.tsx

@@ -0,0 +1,54 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import * as React from 'react';
+import {ListItem, ListItemProps} from '@material/react-list';
+
+export interface MenuListItemProps<T> extends ListItemProps<T> {
+  children?: React.ReactNode;
+}
+
+class MenuListItem<T extends HTMLElement = HTMLElement> extends React.Component<MenuListItemProps<T>, {}> {
+  static defaultProps: Partial<MenuListItemProps<HTMLElement>> = {
+    ...ListItem.defaultProps,
+    renderWithListItemProps: true,
+  };
+
+  render() {
+    const {
+      role = 'menuitem',
+      children,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <ListItem
+        role={role}
+        {...otherProps}
+      >
+        {children}
+      </ListItem>
+    );
+  }
+}
+
+export default MenuListItem;