diff --git a/package-lock.json b/package-lock.json index 1a2981ec9..e06a7eb1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1513,6 +1513,25 @@ "babel-types": "^6.24.1" } }, + "babel-polyfill": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz", + "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=", + "dev": true, + "requires": { + "babel-runtime": "^6.26.0", + "core-js": "^2.5.0", + "regenerator-runtime": "^0.10.5" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", + "dev": true + } + } + }, "babel-preset-airbnb": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/babel-preset-airbnb/-/babel-preset-airbnb-2.4.0.tgz", diff --git a/package.json b/package.json index d0cba44af..22fd53152 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "babel-plugin-istanbul": "^4.1.5", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-polyfill": "^6.26.0", "babel-preset-airbnb": "^2.4.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", diff --git a/packages/button/package.json b/packages/button/package.json index 3c8c10938..174b2218d 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -15,7 +15,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/button": "^0.34.1", + "@material/button": "^0.35.0", "@material/react-ripple": "^0.1.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", diff --git a/packages/card/package.json b/packages/card/package.json index 819b51faa..42214e8dc 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -15,7 +15,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/card": "^0.34.1", + "@material/card": "^0.35.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", "react": "^16.3.2" diff --git a/packages/fab/package.json b/packages/fab/package.json index fd6c015ce..c30d94e96 100644 --- a/packages/fab/package.json +++ b/packages/fab/package.json @@ -15,7 +15,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/fab": "^0.34.1", + "@material/fab": "^0.35.0", "@material/react-ripple": "^0.1.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", diff --git a/packages/floating-label/package.json b/packages/floating-label/package.json index 134121b33..11984cf5f 100644 --- a/packages/floating-label/package.json +++ b/packages/floating-label/package.json @@ -16,7 +16,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/floating-label": "^0.34.0", + "@material/floating-label": "^0.35.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", "react": "^16.3.0" diff --git a/packages/line-ripple/package.json b/packages/line-ripple/package.json index 0fc171eed..13491d66c 100644 --- a/packages/line-ripple/package.json +++ b/packages/line-ripple/package.json @@ -15,7 +15,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/line-ripple": "^0.34.0", + "@material/line-ripple": "^0.35.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", "react": "^16.3.2" diff --git a/packages/ripple/index.js b/packages/ripple/index.js index 321821770..e3bb4142e 100644 --- a/packages/ripple/index.js +++ b/packages/ripple/index.js @@ -88,7 +88,9 @@ const withRipple = (WrappedComponent) => { activateRipple = (e) => { // https://reactjs.org/docs/events.html#event-pooling e.persist(); - this.foundation_.activate(e); + requestAnimationFrame(() => { + this.foundation_.activate(e); + }); } updateCssVariable = (varName, value) => { diff --git a/packages/ripple/package.json b/packages/ripple/package.json index 44f3e7e86..ca47dc348 100644 --- a/packages/ripple/package.json +++ b/packages/ripple/package.json @@ -14,7 +14,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/ripple": "^0.34.1", + "@material/ripple": "^0.35.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", "react": "^16.3.2" diff --git a/packages/text-field/package.json b/packages/text-field/package.json index 50d85d8af..91bdea7f7 100644 --- a/packages/text-field/package.json +++ b/packages/text-field/package.json @@ -18,7 +18,7 @@ "@material/react-floating-label": "^0.1.0", "@material/react-line-ripple": "^0.1.0", "@material/react-notched-outline": "^0.1.0", - "@material/textfield": "^0.34.1", + "@material/textfield": "^0.35.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", "react": "^16.3.2" diff --git a/packages/top-app-bar/package.json b/packages/top-app-bar/package.json index 3639f9623..6e82e8cef 100644 --- a/packages/top-app-bar/package.json +++ b/packages/top-app-bar/package.json @@ -11,7 +11,7 @@ "topappbar" ], "dependencies": { - "@material/top-app-bar": "^0.34.1", + "@material/top-app-bar": "^0.35.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", "react": "^16.3.2" diff --git a/test/screenshot/webpack-bundles.js b/test/screenshot/webpack-bundles.js index 1061877bd..bd95c691c 100644 --- a/test/screenshot/webpack-bundles.js +++ b/test/screenshot/webpack-bundles.js @@ -3,7 +3,7 @@ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports.bundle = function(testPath, outputPath) { return { - entry: './test/screenshot/' + testPath, + entry: ['babel-polyfill', `./test/screenshot/${testPath}`], output: { filename: outputPath + '.js', }, diff --git a/test/unit/ripple/index.test.js b/test/unit/ripple/index.test.js index cfe37ae52..b39f57e06 100644 --- a/test/unit/ripple/index.test.js +++ b/test/unit/ripple/index.test.js @@ -39,13 +39,16 @@ test('classNames adds classes', () => { }); test('mouseDown event triggers activateRipple', () => { + const mockRaf = createMockRaf(); const mouseDownHandler = td.func(); const wrapper = mount(); const foundation = wrapper.instance().foundation_; foundation.activate = td.func(); wrapper.simulate('mouseDown'); + mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); td.verify(mouseDownHandler(td.matchers.isA(Object)), {times: 1}); + mockRaf.restore(); }); test('mouseUp event does not trigger activateRipple', () => { @@ -59,39 +62,51 @@ test('mouseUp event does not trigger activateRipple', () => { }); test('touchStart event triggers activateRipple', () => { + const mockRaf = createMockRaf(); const touchStartHandler = td.func(); const wrapper = mount(); const foundation = wrapper.instance().foundation_; foundation.activate = td.func(); wrapper.simulate('touchStart'); + mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); td.verify(touchStartHandler(td.matchers.isA(Object)), {times: 1}); + mockRaf.restore(); }); test('touchStart event triggers activateRipple with no onTouchStart handler', () => { + const mockRaf = createMockRaf(); const wrapper = mount(); const foundation = wrapper.instance().foundation_; foundation.activate = td.func(); wrapper.simulate('touchStart'); + mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); + mockRaf.restore(); }); test('keyDown event triggers activateRipple', () => { + const mockRaf = createMockRaf(); const keyDownHandler = td.func(); const wrapper = mount(); const foundation = wrapper.instance().foundation_; foundation.activate = td.func(); wrapper.simulate('keyDown'); + mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); td.verify(keyDownHandler(td.matchers.isA(Object)), {times: 1}); + mockRaf.restore(); }); test('keyDown event triggers activateRipple with no onKeyDown handler', () => { + const mockRaf = createMockRaf(); const wrapper = mount(); const foundation = wrapper.instance().foundation_; foundation.activate = td.func(); wrapper.simulate('keyDown'); + mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); + mockRaf.restore(); }); test('#adapter.isUnbounded returns true is prop is set', () => {