feat(select): enhanced select

packages/list/index.tsx

@@ -185,11 +185,6 @@ export default class List extends React.Component<ListProps, ListState> {
     return [];
   }
 
-  // this is a proxy for ListItem
-  getListElements = () => {
-    return this.listElements;
-  }
-
   get classes() {
     const {
       className,

packages/menu-surface/index.tsx

@@ -44,6 +44,7 @@ export interface MenuSurfaceProps extends React.HTMLProps<HTMLDivElement> {
   };
   onClose?: () => void;
   onOpen?: () => void;
+  onMount?: (isMounted: boolean) => void;
   quickOpen?: boolean;
   open?: boolean;
   fixed?: boolean;
@@ -148,6 +149,9 @@ class MenuSurface extends React.Component<MenuSurfaceProps, MenuSurfaceState> {
     if (this.props.quickOpen !== prevProps.quickOpen) {
       this.foundation.setQuickOpen(this.props.quickOpen!);
     }
+    if (this.state.mounted !== prevState.mounted) {
+      this.props.onMount && this.props.onMount(this.state.mounted);
+    }
   }
 
   componentWillUnmount() {
@@ -344,6 +348,7 @@ class MenuSurface extends React.Component<MenuSurfaceProps, MenuSurfaceState> {
       onKeyDown,
       styles,
       quickOpen,
+      onMount,
       /* eslint-enable */
       children,
       ...otherProps

packages/menu/index.tsx

@@ -33,6 +33,7 @@ const {cssClasses} = MDCMenuFoundation;
 export interface MenuProps extends MenuSurfaceProps {
   children: React.ReactElement<MenuList>;
   onSelected?: (index: number, item: Element) => void;
+  ref?: React.Ref<any>;
 };
 
 export interface MenuState {
@@ -130,12 +131,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
 
   handleOpen: MenuSurfaceProps['onOpen'] = () => {
     const {onOpen} = this.props;
-    if (onOpen) {
-      onOpen();
-    }
-    if (this.listElements.length > 0) {
-      (this.listElements[0] as HTMLElement).focus();
-    }
+    onOpen && onOpen();
   }
 
   render() {
@@ -147,11 +143,9 @@ class Menu extends React.Component<MenuProps, MenuState> {
       onOpen,
       children,
       onSelected,
-      ref,
       /* eslint-enable no-unused-vars */
       ...otherProps
     } = this.props;
-
     return (
       <MenuSurface
         tabIndex={-1}
@@ -166,7 +160,6 @@ class Menu extends React.Component<MenuProps, MenuState> {
     );
   }
 
-
   renderChild() {
     const {children} = this.props;
     const {foundation} = this.state;
@@ -194,8 +187,8 @@ export {
   ListDivider as MenuListDivider,
   ListGroup as MenuListGroup,
   ListGroupSubheader as MenuListGroupSubheader,
-  ListItemGraphic as MenuListGraphic,
-  ListItemMeta as MenuListMeta,
+  ListItemGraphic as MenuListItemGraphic,
+  ListItemMeta as MenuListItemMeta,
   ListItemText as MenuListItemText,
 } from '@material/react-list';
 export {MenuListProps} from './MenuList';

packages/select/BaseSelect.tsx

@@ -0,0 +1,158 @@
+// 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 NativeSelect, {
+  NativeSelectProps, // eslint-disable-line no-unused-vars
+} from './NativeSelect';
+import EnhancedSelect, {
+  EnhancedSelectProps, // eslint-disable-line no-unused-vars
+} from './EnhancedSelect';
+import {MDCSelectFoundation} from '@material/select/foundation';
+
+export type BaseSelectProps<T extends HTMLElement>
+  = (T extends HTMLSelectElement ? NativeSelectProps : EnhancedSelectProps);
+
+export interface CommonSelectProps {
+  enhanced: boolean;
+  className?: string;
+  disabled?: boolean;
+  foundation?: MDCSelectFoundation;
+  value?: string;
+  selectClassName?: string;
+}
+
+export class BaseSelect<T extends HTMLElement = HTMLSelectElement>
+  extends React.Component<BaseSelectProps<T>> {
+  static defaultProps = {
+    enhanced: false,
+    selectClassName: '',
+  };
+
+  handleFocus = (evt: React.FocusEvent<T>) => {
+    const {foundation, onFocus} = this.props;
+    if (foundation) {
+      foundation.handleFocus();
+    }
+    onFocus && onFocus(evt);
+  };
+
+  handleBlur = (evt: React.FocusEvent<T>) => {
+    const {foundation, onBlur} = this.props;
+    if (foundation) {
+      foundation.handleBlur();
+    }
+    onBlur && onBlur(evt);
+  };
+
+  handleTouchStart = (evt: React.TouchEvent<T>) => {
+    const {foundation, onTouchStart} = this.props;
+    if (foundation) {
+      foundation.handleClick(this.getNormalizedXCoordinate(evt));
+    }
+    onTouchStart && onTouchStart(evt);
+  }
+
+  handleMouseDown = (evt: React.MouseEvent<T>) => {
+    const {foundation, onMouseDown} = this.props;
+    if (foundation) {
+      foundation.handleClick(this.getNormalizedXCoordinate(evt));
+    }
+    onMouseDown && onMouseDown(evt);
+  }
+
+  handleClick = (evt: React.MouseEvent<T>) => {
+    const {foundation, onClick} = this.props;
+    if (foundation) {
+      foundation.handleClick(this.getNormalizedXCoordinate(evt));
+    }
+    onClick && onClick(evt);
+  }
+
+  handleKeyDown = (evt: React.KeyboardEvent<T>) => {
+    const {foundation, onKeyDown} = this.props;
+    if (foundation) {
+      foundation.handleKeydown(evt.nativeEvent);
+    }
+    onKeyDown && onKeyDown(evt);
+  }
+
+  private isTouchEvent = (evt: MouseEvent | TouchEvent): evt is TouchEvent => {
+    return Boolean((evt as TouchEvent).touches);
+  }
+
+  private getNormalizedXCoordinate
+    = (evt: React.MouseEvent<T> | React.TouchEvent<T>) => {
+      const targetClientRect = (evt.currentTarget as Element).getBoundingClientRect();
+      const xCoordinate
+        = this.isTouchEvent(evt.nativeEvent) ? evt.nativeEvent.touches[0].clientX : evt.nativeEvent.clientX;
+      return xCoordinate - targetClientRect.left;
+    }
+
+
+  render() {
+    const {
+      /* eslint-disable no-unused-vars */
+      onFocus,
+      onBlur,
+      onClick,
+      onMouseDown,
+      onTouchStart,
+      ref,
+      /* eslint-enable no-unused-vars */
+      enhanced,
+      children,
+      onKeyDown,
+      selectClassName,
+      ...otherProps
+    } = this.props;
+
+    const props = {
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onMouseDown: this.handleMouseDown,
+      onClick: this.handleClick,
+      onTouchStart: this.handleTouchStart,
+      className: selectClassName,
+      ...otherProps,
+    };
+
+    if (enhanced) {
+      return (
+        <EnhancedSelect
+          onKeyDown={this.handleKeyDown}
+          {...props}
+        >
+          {children}
+        </EnhancedSelect>
+      );
+    }
+    return (
+      <NativeSelect
+        onKeyDown={onKeyDown}
+        {...props}
+      >
+        {children}
+      </NativeSelect>
+    );
+  }
+}