feat: update mdcweb v1.x.x (#830)

* Squashed commit of the following: commit 14b22bc Author: Matt Goo <mattgoo@google.com> Date: Tue Apr 30 12:06:32 2019 -0700 feat(select): enhanced select (#823) commit b400013 Author: Matt Goo <mattgoo@google.com> Date: Mon Apr 29 14:49:32 2019 -0700 chore: reduce unused deps in package.json (#819) commit beedb23 Author: Matt Goo <mattgoo@google.com> Date: Mon Apr 29 13:43:20 2019 -0700 feat(select): add icon (#825) commit e22ac2a Author: Matt Goo <mattgoo@google.com> Date: Mon Apr 29 13:35:45 2019 -0700 feat(select): add helper text (#824) commit abaa146 Author: Matt Goo <mattgoo@google.com> Date: Mon Apr 29 13:35:16 2019 -0700 feat(select): add option component (#826) commit 7adc12a Author: Matt Goo <mattgoo@google.com> Date: Mon Apr 29 13:11:16 2019 -0700 fix(drawer): add missing foundation import in drawer (#821) commit 7e0f877 Author: Matt Goo <mattgoo@google.com> Date: Fri Apr 26 14:33:40 2019 -0700 feat(menu): add component (#786) commit 509e93e Author: Matt Goo <mattgoo@google.com> Date: Fri Apr 26 09:46:26 2019 -0700 chore(infrastructure): add esmoduleinterop to tsconfig (#818) commit 4dbc8b8 Author: Matt Goo <mattgoo@google.com> Date: Tue Apr 16 15:56:25 2019 -0700 feat(notched-outline): update to v1.1.1 (#806) commit ea15a2a Author: 태재영 <tjy970721@gmail.com> Date: Sat Apr 13 06:50:37 2019 +0900 fix(chips): Fix incorrect ripple effect (#804) commit 7b413df Author: Matt Goo <mattgoo@google.com> Date: Mon Apr 8 13:27:36 2019 -0700 feat(button): update mdc web deps to v1.1.0 (#791) commit 034158c Author: Matt Goo <mattgoo@google.com> Date: Tue Apr 2 17:36:46 2019 -0700 fix: remove .only (#794) commit 74379af Author: Matt Goo <mattgoo@google.com> Date: Tue Apr 2 16:24:45 2019 -0700 fix(list): maintain classes with state.listItemClassNames (#776) BREAKING CHANGE: Removes props.tabbableOnListItemFocus from all the auxiliary components, as it seemed confusing to have this and tabIndex dictate what tabIndex would ultimately be. commit e5b953f Author: Ben McKernan <ben-mckernan@users.noreply.github.com> Date: Tue Apr 2 20:18:03 2019 +0200 fix(icon-button): upgrade to mdc-web v1.1 (#792) commit 9c7bfa7 Author: Andrii Kostenko <andrey@kostenko.name> Date: Mon Apr 1 23:08:27 2019 +0300 fix(card): upgrade to mdc-web v1.1 (#788) commit bb9e7e4 Author: Andrii Kostenko <andrey@kostenko.name> Date: Mon Apr 1 20:44:28 2019 +0300 fix(top-app-bar): mdc-web v1 upgrade (#780) commit 37c7269 Author: Andrii Kostenko <andrey@kostenko.name> Date: Mon Apr 1 20:00:39 2019 +0300 fix(linear-progress): upgrade mdc-web to v1 (#787) commit b6403e6 Author: Andrii Kostenko <andrey@kostenko.name> Date: Mon Apr 1 19:38:31 2019 +0300 fix(fab): upgrade to mdc-web v1.1 (#790) commit bcda111 Author: Andrii Kostenko <andrey@kostenko.name> Date: Fri Mar 29 21:11:19 2019 +0300 fix(dialog): mdc-web v1 upgrade (#779) commit 8ff8695 Author: Andrii Kostenko <andrey@kostenko.name> Date: Thu Mar 28 22:32:55 2019 +0300 fix(typography): upgrade to mdc-web v1 (#778) commit 4d6bbc0 Author: Andrii Kostenko <andrey@kostenko.name> Date: Thu Mar 28 22:15:22 2019 +0300 feat(radio): upgrade to typescript v1 (#777) commit 4f523e3 Author: Andrii Kostenko <andrey@kostenko.name> Date: Thu Mar 28 22:13:29 2019 +0300 fix(checkbox): upgrade mdc-web to v1 (#769) commit 1a04f3d Author: Matt Goo <mattgoo@google.com> Date: Wed Mar 27 12:39:00 2019 -0700 feat(menu-surface): upgrade to mdc web v1 (#774) commit 44cca84 Author: Andrii Kostenko <andrey@kostenko.name> Date: Wed Mar 27 01:14:18 2019 +0200 feat(switch): upgrade to mdc-web v1 (#757) commit 580c850 Author: Andrii Kostenko <andrey@kostenko.name> Date: Wed Mar 27 01:13:37 2019 +0200 fix(tab-bar): upgrade mdc-web to v1 (#770) commit 45fef89 Author: Matt Goo <mattgoo@google.com> Date: Mon Mar 25 15:27:29 2019 -0700 fix(card): add react-ripple to package json (#773) commit 4e99b4c Author: Matt Goo <mattgoo@google.com> Date: Tue Mar 19 14:10:37 2019 -0700 feat(list): update to MDC Web 1.0.0 (#740) commit 38e9886 Author: Matt Goo <mattgoo@google.com> Date: Tue Mar 19 12:36:06 2019 -0700 feat(floating-label): update mdc web to v1.0.0 (#741) commit dd95b60 Author: Andrii Kostenko <andrey@kostenko.name> Date: Mon Mar 18 23:38:34 2019 +0200 feat(snackbar): MDC Web v1.0.0 (#755) commit 9b86474 Author: Andrii Kostenko <andrey@kostenko.name> Date: Mon Mar 18 23:27:39 2019 +0200 fix(tab): mdc-web v1.0.0 upgrade (#748) commit a8c64b5 Author: Lucas Cordeiro <ecdb.lucas@gmail.com> Date: Mon Mar 18 17:46:29 2019 -0300 feat(drawer): add innerRef prop (#749) commit 5f55983 Author: Andrii Kostenko <andrey@kostenko.name> Date: Fri Mar 15 19:05:44 2019 +0200 fix(chips): upgrade mdc-web to v1.0.0 (#750) commit 09cb8a5 Author: Matt Goo <mattgoo@google.com> Date: Fri Mar 15 10:05:03 2019 -0700 fix: classnames@2.2.5 --> classnames@2.2.6 & update imports (#709) commit ae9b421 Author: Andrii Kostenko <andrey@kostenko.name> Date: Thu Mar 14 20:53:28 2019 +0300 fix(tab-scroller): upgrade mdc-web to 1.0.0 (#743) commit 1b29dd9 Author: Andrii Kostenko <andrey@kostenko.name> Date: Thu Mar 14 20:32:18 2019 +0300 fix(tab-indicator): upgrade mdc-web to 1.0.0 (#742) commit f966714 Author: Andrii Kostenko <andrey@kostenko.name> Date: Thu Mar 14 19:45:11 2019 +0300 feat(ripple) mdc-web typescript conversion (#711) commit 0b674f5 Author: Andrii Kostenko <andrey@kostenko.name> Date: Fri Mar 8 23:54:24 2019 +0300 feat(line-ripple): mdc-web typescript support (#716) * feat(text-field): update to v1.1.1 (#812)
material-components · May 1, 2019 · faf3b09 · faf3b09
1 parent 8bf577d
commit faf3b09
Show file tree

Hide file tree

Showing 275 changed files with 8,642 additions and 3,396 deletions.
diff --git a/docs/best-practices.md b/docs/best-practices.md
@@ -27,9 +27,4 @@ Since `classnames@2.2.6` 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';
 ```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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/textfield": "^0.41.0",
-    "@material/top-app-bar": "^0.41.0",
-    "@material/typography": "^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": "^1.1.1",
+    "@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",

diff --git a/packages/button/index.tsx b/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);
 
diff --git a/packages/button/package.json b/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"

diff --git a/packages/card/ActionButtons.tsx b/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>>;

diff --git a/packages/card/ActionIcons.tsx b/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>>;

diff --git a/packages/card/Actions.tsx b/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> {

diff --git a/packages/card/Media.tsx b/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> {

diff --git a/packages/card/PrimaryContent.tsx b/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);
diff --git a/packages/card/index.tsx b/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';

diff --git a/packages/card/package.json b/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"

diff --git a/packages/checkbox/NativeControl.tsx b/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;

diff --git a/packages/checkbox/index.tsx b/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);
diff --git a/packages/checkbox/package.json b/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"