feat: upgrade dependencies to MDC Web v1.x.x

docs/best-practices.md

@@ -27,9 +27,4 @@ Since `[email protected]` is exporting `default`, we should be importing as such:
 ```ts
 // referenced in https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md#default-exportsimports
 import classnames from 'classnames';
-```
-
-In other cases where we import modules that do not use `default`, we should import like:
-```ts
-import * as classnames from 'classnames';
 ```

package.json

@@ -14,7 +14,7 @@
     "pretest": "npm stop",
     "test": "npm run lint && npm run test:unit && npm run test:screenshots",
     "posttest": "npm stop && istanbul report --root coverage text-summary && istanbul check-coverage --lines 95 --statements 95 --branches 95 --functions 95",
-    "postinstall": "lerna bootstrap",
+    "postinstall": "lerna bootstrap && rm node_modules/**/.babelrc -f && rm packages/**/node_modules/.babelrc -f",
     "test:watch": "karma start karma.local.js --auto-watch",
     "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",
@@ -41,9 +41,11 @@
           "linear-progress",
           "list",
           "menu-surface",
+          "notched-outline",
           "radio",
           "ripple",
           "select",
+          "snackbar",
           "top-app-bar",
           "switch",
           "tab",
@@ -60,34 +62,27 @@
   },
   "devDependencies": {
     "@google-cloud/storage": "^1.6.0",
-    "@material/button": "^0.43.0",
-    "@material/card": "^0.41.0",
-    "@material/checkbox": "^0.41.0",
-    "@material/chips": "^0.41.0",
-    "@material/dialog": "^0.43.0",
-    "@material/dom": "^0.41.0",
-    "@material/drawer": "^0.41.0",
-    "@material/fab": "^0.41.0",
-    "@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/linear-progress": "^0.41.0",
-    "@material/list": "^0.41.0",
-    "@material/menu-surface": "^0.41.0",
-    "@material/notched-outline": "^0.41.0",
-    "@material/radio": "^0.41.0",
-    "@material/ripple": "^0.41.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/base": "^1.0.0",
+    "@material/button": "^1.1.0",
+    "@material/card": "^1.1.0",
+    "@material/checkbox": "^1.0.0",
+    "@material/chips": "^1.1.1",
+    "@material/dialog": "^1.1.0",
+    "@material/drawer": "^1.0.1",
+    "@material/floating-label": "^1.1.0",
+    "@material/icon-button": "^1.1.0",
+    "@material/line-ripple": "^1.0.0",
+    "@material/list": "1.0.0",
+    "@material/menu-surface": "^1.0.1",
+    "@material/notched-outline": "^1.1.1",
+    "@material/radio": "^1.1.0",
+    "@material/ripple": "^1.0.0",
+    "@material/select": "^1.1.1",
+    "@material/snackbar": "^1.0.0",
+    "@material/tab": "^1.0.0",
+    "@material/tab-bar": "^1.0.0",
     "@material/textfield": "^0.41.0",
-    "@material/top-app-bar": "^0.41.0",
-    "@material/typography": "^0.41.0",
+    "@material/typography": "^1.0.0",
     "@types/chai": "^4.1.7",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.15",
@@ -119,8 +114,9 @@
     "cp-file": "^6.0.0",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.10",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
+    "enzyme-adapter-utils": "^1.10.1",
     "eslint": "^5.9.0",
     "eslint-config-google": "^0.9.1",
     "eslint-plugin-react": "^7.7.0",
@@ -146,13 +142,13 @@
     "react-dom": "^16.4.2",
     "react-router-dom": "^4.3.1",
     "remap-istanbul": "^0.12.0",
-    "rimraf": "^2.6.3",
     "resemblejs": "^3.0.1",
+    "rimraf": "^2.6.3",
     "sass-loader": "^6.0.7",
     "testdouble": "^3.6.0",
     "ts-loader": "^3.5.0",
     "ts-node": "^7.0.1",
-    "typescript": "^3.2.2",
+    "typescript": "^3.3.3",
     "typescript-eslint-parser": "^21.0.1",
     "utility-types": "^2.1.0",
     "uuid": "^3.3.2",

packages/button/index.tsx

@@ -20,16 +20,16 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import * as Ripple from '@material/react-ripple';
+import {withRipple, InjectedProps} from '@material/react-ripple';
 
 const BUTTON_CLASS_NAME = 'mdc-button__icon';
 
 type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;
 
 export interface ButtonProps<T extends ButtonTypes>
-  extends Ripple.InjectedProps<T>, React.AnchorHTMLAttributes<T>, React.ButtonHTMLAttributes<T> {
+  extends InjectedProps<T>, React.AnchorHTMLAttributes<T>, React.ButtonHTMLAttributes<T> {
     raised?: boolean;
     unelevated?: boolean;
     outlined?: boolean;
@@ -109,5 +109,5 @@ Button.defaultProps = {
   initRipple: () => {},
 };
 
-export default Ripple.withRipple<ButtonProps<ButtonTypes>, ButtonTypes>(Button);
+export default withRipple<ButtonProps<ButtonTypes>, ButtonTypes>(Button);
 

packages/button/package.json

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/button": "^0.43.0",
+    "@material/button": "^1.1.0",
     "@material/react-ripple": "^0.11.0",
     "classnames": "^2.2.6",
     "react": "^16.4.2"

packages/card/ActionButtons.tsx

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 type ChildType = React.ReactElement<React.HTMLProps<HTMLButtonElement|HTMLAnchorElement>>;

packages/card/ActionIcons.tsx

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 type ChildType = React.ReactElement<React.HTMLProps<HTMLImageElement|HTMLOrSVGElement>>;

packages/card/Actions.tsx

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 export interface ActionsProps extends React.HTMLProps<HTMLDivElement> {

packages/card/Media.tsx

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 export interface MediaProps extends React.HTMLProps<HTMLDivElement> {

packages/card/PrimaryContent.tsx

@@ -20,11 +20,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import * as Ripple from '@material/react-ripple';
+import {withRipple, InjectedProps} from '@material/react-ripple';
 
-export interface PrimaryContentBaseProps extends React.HTMLProps<HTMLDivElement>, Ripple.InjectedProps<HTMLDivElement>{
+export interface PrimaryContentBaseProps extends React.HTMLProps<HTMLDivElement>, InjectedProps<HTMLDivElement>{
   className: string;
   unbounded?: boolean;
 };
@@ -47,4 +47,4 @@ export const PrimaryContentBase: React.FunctionComponent<PrimaryContentBaseProps
   );
 };
 
-export default Ripple.withRipple<PrimaryContentBaseProps, HTMLDivElement>(PrimaryContentBase);
+export default withRipple<PrimaryContentBaseProps, HTMLDivElement>(PrimaryContentBase);

packages/card/index.tsx

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import ActionButtons from './ActionButtons';
 import ActionIcons from './ActionIcons';

packages/card/package.json

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/card": "^0.41.0",
+    "@material/card": "^1.1.0",
     "@material/react-ripple": "^0.11.0",
     "classnames": "^2.2.6",
     "react": "^16.4.2"

packages/checkbox/NativeControl.tsx

@@ -19,7 +19,7 @@
 // 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 React from 'react';
 
 export interface NativeControlProps extends React.HTMLProps<HTMLInputElement>{
   checked: boolean;

packages/checkbox/index.tsx

@@ -20,15 +20,16 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
-// @ts-ignore no mdc .d.ts file
-import {MDCCheckboxFoundation, MDCCheckboxAdapter} from '@material/checkbox/dist/mdc.checkbox';
-import * as Ripple from '@material/react-ripple';
+import {MDCCheckboxFoundation} from '@material/checkbox/foundation';
+import {MDCCheckboxAdapter} from '@material/checkbox/adapter';
+import {cssClasses} from '@material/checkbox/constants';
+import {withRipple, InjectedProps} from '@material/react-ripple';
 
 import NativeControl from './NativeControl';
 
-export interface CheckboxProps extends Ripple.InjectedProps<HTMLDivElement, HTMLInputElement> {
+export interface CheckboxProps extends InjectedProps<HTMLDivElement, HTMLInputElement> {
   checked?: boolean;
   className?: string;
   disabled?: boolean;
@@ -45,20 +46,22 @@ interface CheckboxState {
   checked?: boolean;
   indeterminate?: boolean;
   classList: Set<string>;
-  'aria-checked': boolean;
+  'aria-checked': string;
+  disabled: boolean;
 };
 
 export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   inputElement: React.RefObject<HTMLInputElement> = React.createRef();
-  foundation = MDCCheckboxFoundation;
+  foundation!: MDCCheckboxFoundation;
 
   constructor(props: CheckboxProps) {
     super(props);
     this.state = {
       'checked': props.checked,
       'indeterminate': props.indeterminate,
       'classList': new Set(),
-      'aria-checked': false,
+      'aria-checked': 'false',
+      'disabled': props.disabled!,
     };
   }
 
@@ -74,7 +77,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   componentDidMount() {
     this.foundation = new MDCCheckboxFoundation(this.adapter);
     this.foundation.init();
-    this.foundation.setDisabled(this.props.disabled);
+    this.foundation.setDisabled(this.props.disabled!);
     // indeterminate property on checkboxes is not supported:
     // https://github.com/facebook/react/issues/1798#issuecomment-333414857
     if (this.inputElement.current) {
@@ -91,7 +94,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       this.handleChange(checked!, indeterminate!);
     }
     if (disabled !== prevProps.disabled) {
-      this.foundation.setDisabled(disabled);
+      this.foundation.setDisabled(disabled!);
     }
   }
 
@@ -118,7 +121,9 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   get classes(): string {
     const {classList} = this.state;
     const {className} = this.props;
-    return classnames('mdc-checkbox', Array.from(classList), className);
+    return classnames(
+      'mdc-checkbox', Array.from(classList),
+      this.state.disabled ? cssClasses.DISABLED : null, className);
   }
 
   updateState = (key: keyof CheckboxState, value: string | boolean) => {
@@ -146,10 +151,14 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       // isAttachedToDOM will likely be removed
       // https://github.com/material-components/material-components-web/issues/3691
       isAttachedToDOM: () => true,
-      isChecked: () => this.state.checked,
-      isIndeterminate: () => this.state.indeterminate,
+      isChecked: () => this.state.checked!,
+      isIndeterminate: () => this.state.indeterminate!,
       setNativeControlAttr: this.updateState,
+      setNativeControlDisabled: (disabled) => {
+        this.updateState('disabled', disabled);
+      },
       removeNativeControlAttr: this.removeState,
+      forceLayout: () => null,
     };
   }
 
@@ -169,8 +178,8 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       initRipple,
       onChange,
       unbounded,
-      /* eslint-enable no-unused-vars */
       disabled,
+      /* eslint-enable no-unused-vars */
       nativeControlId,
       name,
       ...otherProps
@@ -186,8 +195,8 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         <NativeControl
           id={nativeControlId}
           checked={this.state.checked}
-          disabled={disabled}
-          aria-checked={this.state['aria-checked']}
+          disabled={this.state.disabled}
+          aria-checked={(this.state['aria-checked'] || this.state.checked!.toString()) as ('true' | 'false')}
           name={name}
           onChange={this.onChange}
           rippleActivatorRef={this.inputElement}
@@ -211,4 +220,4 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   }
 }
 
-export default Ripple.withRipple<CheckboxProps, HTMLDivElement, HTMLInputElement>(Checkbox);
+export default withRipple<CheckboxProps, HTMLDivElement, HTMLInputElement>(Checkbox);

packages/checkbox/package.json

@@ -16,7 +16,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/checkbox": "^0.41.0",
+    "@material/checkbox": "^1.1.0",
     "@material/react-ripple": "^0.11.0",
     "classnames": "^2.2.6",
     "react": "^16.3.2"