feat(menu-surface): upgrade to mdc web v1

package.json

@@ -19,7 +19,7 @@
     "test:unit": "npm run clean && cross-env NODE_ENV=test karma start karma.local.js --single-run",
     "test:unit-ci": "karma start karma.ci.js --single-run",
     "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --require ts-node/register --require babel-core/register --ui tdd --timeout 30000 test/screenshot/diff-suite.tsx",
-    "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout .; git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 35s; npm run test:image-diff'",
+    "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout .; git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 40s; npm run test:image-diff'",
     "upload:screenshots": "node ./test/screenshot/upload-screenshots.js"
   },
   "config": {
@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@google-cloud/storage": "^1.6.0",
+    "@material/base": "^1.0.0",
     "@material/button": "^0.43.0",
     "@material/card": "^0.41.0",
     "@material/checkbox": "^0.41.0",
@@ -71,20 +72,20 @@
     "@material/floating-label": "^0.41.0",
     "@material/icon-button": "^0.41.0",
     "@material/layout-grid": "^0.41.0",
-    "@material/line-ripple": "^0.41.0",
+    "@material/line-ripple": "^1.0.0",
     "@material/linear-progress": "^0.41.0",
     "@material/list": "^0.41.0",
-    "@material/menu-surface": "^0.41.0",
+    "@material/menu-surface": "^1.0.1",
     "@material/notched-outline": "^0.41.0",
     "@material/radio": "^0.41.0",
-    "@material/ripple": "^0.41.0",
+    "@material/ripple": "^1.0.0",
     "@material/select": "^0.40.1",
     "@material/snackbar": "^0.43.0",
     "@material/switch": "^0.41.0",
     "@material/tab": "^0.41.0",
     "@material/tab-bar": "^0.41.0",
-    "@material/tab-indicator": "^0.41.0",
-    "@material/tab-scroller": "^0.41.0",
+    "@material/tab-indicator": "^1.0.0",
+    "@material/tab-scroller": "^1.0.0",
     "@material/textfield": "^0.41.0",
     "@material/top-app-bar": "^0.41.0",
     "@material/typography": "^0.41.0",

packages/checkbox/NativeControl.tsx

@@ -24,7 +24,7 @@ import * as React from 'react';
 export interface NativeControlProps extends React.HTMLProps<HTMLInputElement>{
   checked: boolean;
   disabled: boolean;
-  id: string;
+  id?: string;
   rippleActivatorRef: React.RefObject<HTMLInputElement>;
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 };

packages/chips/ChipSet.tsx

@@ -29,13 +29,13 @@ import {ChipProps} from './Chip'; // eslint-disable-line no-unused-vars
 type ChipType = React.ReactElement<ChipProps>;
 
 export interface ChipSetProps {
-  className: string;
-  selectedChipIds: string[];
-  handleSelect: (selectedChipIds: string[]) => void;
-  updateChips: (chips: Partial<ChipProps>[]) => void;
-  choice: boolean;
-  filter: boolean;
-  input: boolean;
+  className?: string;
+  selectedChipIds?: string[];
+  handleSelect?: (selectedChipIds: string[]) => void;
+  updateChips?: (chips: Partial<ChipProps>[]) => void;
+  choice?: boolean;
+  filter?: boolean;
+  input?: boolean;
   children: ChipType | ChipType[];
 };
 
@@ -50,7 +50,7 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
   constructor(props: ChipSetProps) {
     super(props);
     this.state = {
-      selectedChipIds: props.selectedChipIds,
+      selectedChipIds: props.selectedChipIds!,
       foundation: null,
       hasInitialized: false,
     };
@@ -78,7 +78,7 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
       this.initChipSelection();
     }
     if (selectedChipIds !== prevProps.selectedChipIds) {
-      this.setState({selectedChipIds});
+      this.setState({selectedChipIds: selectedChipIds!});
     }
   }
 
@@ -101,7 +101,7 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
       setSelected: () => {
         const selectedChipIds = this.state.foundation.getSelectedChipIds().slice();
         this.setState({selectedChipIds}, () => {
-          this.props.handleSelect(selectedChipIds);
+          this.props.handleSelect!(selectedChipIds);
         });
       },
       removeChip: this.removeChip,
@@ -143,7 +143,7 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
       }
     }
     const chipsArray = chips.length ? chips.map((chip) => chip.props) : [];
-    updateChips(chipsArray);
+    updateChips!(chipsArray);
   };
 
   setCheckmarkWidth = (checkmark: ChipCheckmark | null) => {

packages/chips/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@material/chips": "^0.41.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {

packages/dialog/DialogContent.tsx

@@ -30,7 +30,7 @@ export interface DialogContentProps<T> extends React.HTMLProps<T> {
   id?: string,
 };
 
-const DialogContent: <T extends {} = HTMLDivElement>(props: DialogContentProps<T>) =>
+const DialogContent: <T extends HTMLElement = HTMLDivElement>(props: DialogContentProps<T>) =>
   React.ReactElement<T> = ({
     /* eslint-disable react/prop-types */
     className = '',

packages/dialog/DialogFooter.tsx

@@ -30,7 +30,7 @@ export interface DialogFooterProps<T> extends React.HTMLProps<T> {
 };
 
 
-const DialogFooter: <T extends {} = HTMLElement>(props: DialogFooterProps<T>) =>
+const DialogFooter: <T extends HTMLElement = HTMLElement>(props: DialogFooterProps<T>) =>
   React.ReactElement<T> = ({
     /* eslint-disable react/prop-types */
     className = '',

packages/dialog/DialogTitle.tsx

@@ -30,7 +30,7 @@ export interface DialogTitleProps<T> extends React.HTMLProps<T> {
   id?: string,
 };
 
-const DialogTitle: <T extends {} = HTMLHeadingElement>(props: DialogTitleProps<T>) =>
+const DialogTitle: <T extends HTMLElement = HTMLHeadingElement>(props: DialogTitleProps<T>) =>
     React.ReactElement<T> = ({
       /* eslint-disable react/prop-types */
       className = '',

packages/dialog/README.md

@@ -106,7 +106,7 @@ The Simple Dialog contains a list of potential actions. It does not contain butt
 ```js
 import React, {Component} from 'react';
 import Dialog, {DialogTitle, DialogContent} from '@material/react-dialog';
-import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-dialog';
+import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-list';
 import MaterialIcon from '@material/react-material-icon';
 
 class Simple extends Component {

packages/dialog/index.tsx

@@ -84,7 +84,7 @@ function isDialogContent(element: any): element is DialogContent<any> {
   return element.type === DialogContent;
 }
 
-class Dialog<T extends {} = HTMLElement> extends React.Component<
+class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
   DialogProps<T>,
   DialogState
   > {

packages/drawer/index.tsx

@@ -40,15 +40,13 @@ import {FocusTrap} from 'focus-trap';
 const {cssClasses: listCssClasses} = MDCListFoundation;
 
 export interface DrawerProps extends React.HTMLProps<HTMLElement>{
-  className: string;
-  open: boolean;
-  onOpen: () => void;
-  onClose: () => void;
-  onTransitionEnd: React.TransitionEventHandler<HTMLElement>;
-  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
-  tag: string;
-  dismissible: boolean;
-  modal: boolean;
+  className?: string;
+  open?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  tag?: string;
+  dismissible?: boolean;
+  modal?: boolean;
 };
 
 interface DrawerState {
@@ -184,13 +182,13 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
   }
 
   handleKeyDown = (evt: React.KeyboardEvent<HTMLElement>) => {
-    this.props.onKeyDown(evt);
+    this.props.onKeyDown!(evt);
     if (!this.foundation) return;
     this.foundation.handleKeydown(evt);
   };
 
   handleTransitionEnd = (evt: React.TransitionEvent<HTMLElement>) => {
-    this.props.onTransitionEnd(evt);
+    this.props.onTransitionEnd!(evt);
     if (!this.foundation) return;
     this.foundation.handleTransitionEnd(evt);
   };

packages/layout-grid/README.md

@@ -107,8 +107,8 @@ className | String | Classes to be applied to the root element
 columns | Number (1-12) | The width of the cell on all devices
 desktopColumns | Number (1-12) | The width of the cell on desktop
 order | Number (1-12) | The order that the cell is displayed in
-phoneColumns | Number (1-8) | The width of the cell on phones
-tabletColumns | Number (1-4) | The width of the cell on tablets
+phoneColumns | Number (1-4) | The width of the cell on phones
+tabletColumns | Number (1-8) | The width of the cell on tablets
 tag | String | The tag type to render (default `'div'`)
 
 ## Sass Mixins

packages/line-ripple/index.tsx

@@ -21,8 +21,8 @@
 // THE SOFTWARE.
 import * as React from 'react';
 import * as classnames from 'classnames';
-// @ts-ignore no mdc .d.ts
-import {MDCLineRippleFoundation} from '@material/line-ripple/dist/mdc.lineRipple';
+import {MDCLineRippleFoundation} from '@material/line-ripple/foundation';
+import {MDCLineRippleAdapter} from '@material/line-ripple/adapter';
 
 export interface LineRippleProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
@@ -46,7 +46,7 @@ export default class LineRipple extends React.Component<
     rippleCenter: 0,
   };
 
-  foundation_?: MDCLineRippleFoundation;
+  foundation_!: MDCLineRippleFoundation;
 
   state: LineRippleState = {
     classList: new Set(),
@@ -85,7 +85,7 @@ export default class LineRipple extends React.Component<
     this.foundation_.destroy();
   }
 
-  get adapter() {
+  get adapter(): MDCLineRippleAdapter {
     return {
       addClass: (className: string) =>
         this.setState({classList: this.state.classList.add(className)}),
@@ -96,6 +96,8 @@ export default class LineRipple extends React.Component<
       },
       hasClass: (className: string) => this.state.classList.has(className),
       setStyle: this.setStyle,
+      registerEventHandler: () => null,
+      deregisterEventHandler: () => null,
     };
   }
 
@@ -105,7 +107,7 @@ export default class LineRipple extends React.Component<
     return classnames('mdc-line-ripple', Array.from(classList), className);
   }
 
-  setStyle = (varName: string, value: React.CSSProperties) => {
+  setStyle = (varName: string, value: string) => {
     const styleName = varName.replace(/-(\w)/g, (_, v) => v.toUpperCase());
     const updatedStyle: any = Object.assign({}, this.state.style);
     updatedStyle[styleName] = value;
@@ -119,7 +121,7 @@ export default class LineRipple extends React.Component<
     return Object.assign({}, style, wrappedStyle);
   };
 
-  onTransitionEnd = (evt: React.TransitionEvent) => this.foundation_.handleTransitionEnd(evt);
+  onTransitionEnd = (evt: React.TransitionEvent<Element>) => this.foundation_.handleTransitionEnd(evt.nativeEvent);
 
   render() {
     const {

packages/line-ripple/package.json

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/line-ripple": "^0.41.0",
+    "@material/line-ripple": "^1.0.0",
     "classnames": "^2.2.5",
     "react": "^16.4.2"
   },

packages/linear-progress/index.tsx

@@ -26,14 +26,14 @@ import * as React from 'react';
 import {MDCLinearProgressFoundation} from '@material/linear-progress/dist/mdc.linearProgress';
 
 export interface LinearProgressProps<T> extends React.HTMLProps<T> {
-  buffer: number;
-  bufferingDots: boolean;
-  className: string;
-  closed: boolean;
-  indeterminate: boolean;
-  progress: number;
-  reversed: boolean;
-  tag: string;
+  buffer?: number;
+  bufferingDots?: boolean;
+  className?: string;
+  closed?: boolean;
+  indeterminate?: boolean;
+  progress?: number;
+  reversed?: boolean;
+  tag?: string;
 };
 
 interface LinearProgressState {

packages/list/ListItem.tsx

@@ -32,10 +32,6 @@ export interface ListItemProps<T> extends React.HTMLProps<T> {
   shouldFocus: boolean;
   shouldFollowHref: boolean;
   shouldToggleCheckbox: boolean;
-  onKeyDown: React.KeyboardEventHandler<T>;
-  onClick: React.MouseEventHandler<T>;
-  onFocus: React.FocusEventHandler<T>;
-  onBlur: React.FocusEventHandler<T>;
   tag: string;
   children: React.ReactNode;
 };

packages/list/index.tsx

@@ -36,16 +36,16 @@ const VERTICAL = 'vertical';
 const CHECKBOX_TYPE = 'checkbox';
 
 export interface ListProps<T> extends React.HTMLProps<HTMLElement> {
-  className: string;
-  nonInteractive: boolean;
-  dense: boolean;
-  avatarList: boolean;
-  twoLine: boolean;
-  singleSelection: boolean;
-  selectedIndex: number;
-  handleSelect: (selectedIndex: number) => void;
-  wrapFocus: boolean;
-  tag: string;
+  className?: string;
+  nonInteractive?: boolean;
+  dense?: boolean;
+  avatarList?: boolean;
+  twoLine?: boolean;
+  singleSelection?: boolean;
+  selectedIndex?: number;
+  handleSelect?: (selectedIndex: number) => void;
+  wrapFocus?: boolean;
+  tag?: string;
   children: ListItem<T> | ListItem<T>[] | React.ReactNode;
 };
 
@@ -240,7 +240,7 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com
         e.key === 'Space' ||
         e.keyCode === 32)
     ) {
-      this.props.handleSelect(index);
+      this.props.handleSelect!(index);
     }
   };
 
@@ -251,7 +251,7 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com
     // Work around until MDC Web issue is resolved:
     // https://github.com/material-components/material-components-web/issues/4053
     if (index >= 0) {
-      this.props.handleSelect(index);
+      this.props.handleSelect!(index);
     }
   };
 
@@ -320,19 +320,19 @@ export default class List<T extends HTMLElement = HTMLElement> extends React.Com
     const props = {
       ...otherProps,
       onKeyDown: (e: React.KeyboardEvent<T>) => {
-        onKeyDown(e);
+        onKeyDown!(e);
         this.handleKeyDown(e, index);
       },
       onClick: (e: React.MouseEvent<T>) => {
-        onClick(e);
+        onClick!(e);
         this.handleClick(e, index);
       },
       onFocus: (e: React.FocusEvent<T>) => {
-        onFocus(e);
+        onFocus!(e);
         this.handleFocus(e, index);
       },
       onBlur: (e: React.FocusEvent<T>) => {
-        onBlur(e);
+        onBlur!(e);
         this.handleBlur(e, index);
       },
       shouldFocus: focusListItemAtIndex === index,