@material/react-ripple - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/index.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("prop-types"), require("classnames"), require("@material/ripple/dist/mdc.ripple"));
+		module.exports = factory(require("react"), require("classnames"), require("@material/ripple/dist/mdc.ripple.js"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react", "prop-types", "classnames", "@material/ripple/dist/mdc.ripple"], factory);
+		define(["react", "classnames", "@material/ripple/dist/mdc.ripple.js"], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("react"), require("prop-types"), require("classnames"), require("@material/ripple/dist/mdc.ripple")) : factory(root["react"], root["prop-types"], root["classnames"], root["@material/ripple/dist/mdc.ripple"]);
+		var a = typeof exports === 'object' ? factory(require("react"), require("classnames"), require("@material/ripple/dist/mdc.ripple.js")) : factory(root["react"], root["classnames"], root["@material/ripple/dist/mdc.ripple.js"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_62__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -73,11 +73,61 @@ /******/ 	// The module cache
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 61);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
+
+/***/ }),
+
+/***/ 61:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=__webpack_require__(1);var _react2=_interopRequireDefault(_react);var _propTypes=__webpack_require__(2);var _propTypes2=_interopRequireDefault(_propTypes);var _classnames=__webpack_require__(3);var _classnames2=_interopRequireDefault(_classnames);var _mdc=__webpack_require__(4);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}// The MIT License
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// The MIT License
 //
@@ -103,37 +153,211 @@ // Copyright (c) 2018 Google, Inc.
 // THE SOFTWARE.
-var withRipple=function withRipple(WrappedComponent){var RippledComponent=function(_Component){_inherits(RippledComponent,_Component);function RippledComponent(){var _ref;var _temp,_this,_ret;_classCallCheck(this,RippledComponent);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return _ret=(_temp=(_this=_possibleConstructorReturn(this,(_ref=RippledComponent.__proto__||Object.getPrototypeOf(RippledComponent)).call.apply(_ref,[this].concat(args))),_this),_this.foundation_=null,_this.isMounted_=true,_this.state={classList:new Set(),style:{}},_this.initializeFoundation_=function(surface,activator){var adapter=_this.createAdapter_(surface,activator);_this.foundation_=new _mdc.MDCRippleFoundation(adapter);_this.foundation_.init();},_this.createAdapter_=function(surface,activator){var MATCHES=_mdc.util.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function browserSupportsCssVars(){return _mdc.util.supportsCssVariables(window);},isUnbounded:function isUnbounded(){return _this.props.unbounded;},isSurfaceActive:function isSurfaceActive(){return activator?activator[MATCHES](':active'):surface[MATCHES](':active');},isSurfaceDisabled:function isSurfaceDisabled(){return _this.props.disabled;},addClass:function addClass(className){if(!_this.isMounted_){return;}_this.setState({classList:_this.state.classList.add(className)});},removeClass:function removeClass(className){if(!_this.isMounted_){return;}var classList=_this.state.classList;classList.delete(className);_this.setState({classList:classList});},registerDocumentInteractionHandler:function registerDocumentInteractionHandler(evtType,handler){return document.documentElement.addEventListener(evtType,handler,_mdc.util.applyPassive());},deregisterDocumentInteractionHandler:function deregisterDocumentInteractionHandler(evtType,handler){return document.documentElement.removeEventListener(evtType,handler,_mdc.util.applyPassive());},registerResizeHandler:function registerResizeHandler(handler){return window.addEventListener('resize',handler);},deregisterResizeHandler:function deregisterResizeHandler(handler){return window.removeEventListener('resize',handler);},updateCssVariable:_this.updateCssVariable,computeBoundingRect:function computeBoundingRect(){if(!_this.isMounted_){// need to return object since foundation expects it
-return{};}if(_this.props.computeBoundingRect){return _this.props.computeBoundingRect(surface);}return surface.getBoundingClientRect();},getWindowPageOffset:function getWindowPageOffset(){return{x:window.pageXOffset,y:window.pageYOffset};}};},_this.handleFocus=function(e){_this.props.onFocus(e);_this.foundation_.handleFocus();},_this.handleBlur=function(e){_this.props.onBlur(e);_this.foundation_.handleBlur();},_this.handleMouseDown=function(e){_this.props.onMouseDown(e);_this.activateRipple(e);},_this.handleMouseUp=function(e){_this.props.onMouseUp(e);_this.deactivateRipple(e);},_this.handleTouchStart=function(e){_this.props.onTouchStart(e);_this.activateRipple(e);},_this.handleTouchEnd=function(e){_this.props.onTouchEnd(e);_this.deactivateRipple(e);},_this.handleKeyDown=function(e){_this.props.onKeyDown(e);_this.activateRipple(e);},_this.handleKeyUp=function(e){_this.props.onKeyUp(e);_this.deactivateRipple(e);},_this.activateRipple=function(e){// https://reactjs.org/docs/events.html#event-pooling
-e.persist();requestAnimationFrame(function(){_this.foundation_.activate(e);});},_this.deactivateRipple=function(e){_this.foundation_.deactivate(e);},_this.updateCssVariable=function(varName,value){if(!_this.isMounted_){return;}var updatedStyle=Object.assign({},_this.state.style);updatedStyle[varName]=value;_this.setState({style:updatedStyle});},_temp),_possibleConstructorReturn(_this,_ret);}_createClass(RippledComponent,[{key:'componentDidMount',value:function componentDidMount(){if(!this.foundation_){throw new Error('You must call initRipple from the element\'s '+'ref prop to initialize the adapter for withRipple');}}},{key:'componentWillUnmount',value:function componentWillUnmount(){if(this.foundation_){this.isMounted_=false;this.foundation_.destroy();}}// surface: This element receives the visual treatment (classes and style) of the ripple.
-// activator: This element is used to detect whether to activate the ripple. If this is not
-// provided, the ripple surface will be used to detect activation.
-},{key:'render',value:function render(){var _props=this.props,unbounded=_props.unbounded,style=_props.style,className=_props.className,onMouseDown=_props.onMouseDown,onMouseUp=_props.onMouseUp,onTouchStart=_props.onTouchStart,onTouchEnd=_props.onTouchEnd,onKeyDown=_props.onKeyDown,onKeyUp=_props.onKeyUp,onFocus=_props.onFocus,onBlur=_props.onBlur,otherProps=_objectWithoutProperties(_props,['unbounded','style','className','onMouseDown','onMouseUp','onTouchStart','onTouchEnd','onKeyDown','onKeyUp','onFocus','onBlur']);var updatedProps=Object.assign(otherProps,{onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,onFocus:this.handleFocus,onBlur:this.handleBlur,// call initRipple on ref on root element that needs ripple
-initRipple:this.initializeFoundation_,className:this.classes,style:this.style});return _react2.default.createElement(WrappedComponent,updatedProps);}},{key:'classes',get:function get(){var wrappedComponentClasses=this.props.className;var classList=this.state.classList;return(0,_classnames2.default)(Array.from(classList),wrappedComponentClasses);}},{key:'style',get:function get(){var wrappedStyle=this.props.style;var style=this.state.style;return Object.assign({},style,wrappedStyle);}}]);return RippledComponent;}(_react.Component);WrappedComponent.propTypes=Object.assign({unbounded:_propTypes2.default.bool,disabled:_propTypes2.default.bool,style:_propTypes2.default.object,className:_propTypes2.default.string,onMouseDown:_propTypes2.default.func,onMouseUp:_propTypes2.default.func,onTouchStart:_propTypes2.default.func,onTouchEnd:_propTypes2.default.func,onKeyDown:_propTypes2.default.func,onKeyUp:_propTypes2.default.func,onFocus:_propTypes2.default.func,onBlur:_propTypes2.default.func},WrappedComponent.propTypes);WrappedComponent.defaultProps=Object.assign({unbounded:false,disabled:false,style:{},className:'',onMouseDown:function onMouseDown(){},onMouseUp:function onMouseUp(){},onTouchStart:function onTouchStart(){},onTouchEnd:function onTouchEnd(){},onKeyDown:function onKeyDown(){},onKeyUp:function onKeyUp(){},onFocus:function onFocus(){},onBlur:function onBlur(){}},WrappedComponent.defaultProps);RippledComponent.propTypes=WrappedComponent.propTypes;RippledComponent.defaultProps=WrappedComponent.defaultProps;RippledComponent.displayName='WithRipple('+getDisplayName(WrappedComponent)+')';return RippledComponent;};function getDisplayName(WrappedComponent){return WrappedComponent.displayName||WrappedComponent.name||'Component';}exports.default=withRipple;
+var React = __webpack_require__(0);
+var classnames = __webpack_require__(1);
+// @ts-ignore no mdc .d.ts file
+var mdc_ripple_1 = __webpack_require__(62);
+var MATCHES = mdc_ripple_1.util.getMatchesProperty(HTMLElement.prototype);
+function isElement(element) {
+    return element[MATCHES] !== undefined;
+}
+// This is an HOC that adds Ripple to the component passed as an argument
+function withRipple(WrappedComponent) {
+    var _a;
+    return _a = /** @class */ (function (_super) {
+            __extends(RippledComponent, _super);
+            function RippledComponent() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isComponentMounted = true;
+                _this.displayName = "WithRipple(" + getDisplayName(WrappedComponent) + ")";
+                _this.state = {
+                    classList: new Set(),
+                    style: {},
+                };
+                // surface: This element receives the visual treatment (classes and style) of the ripple.
+                // activator: This element is used to detect whether to activate the ripple. If this is not
+                // provided, the ripple surface will be used to detect activation.
+                _this.initializeFoundation = function (surface, activator) {
+                    var adapter = _this.createAdapter(surface, activator);
+                    _this.foundation = new mdc_ripple_1.MDCRippleFoundation(adapter);
+                    _this.foundation.init();
+                };
+                _this.createAdapter = function (surface, activator) {
+                    return {
+                        browserSupportsCssVars: function () { return mdc_ripple_1.util.supportsCssVariables(window); },
+                        isUnbounded: function () { return _this.props.unbounded; },
+                        isSurfaceActive: function () {
+                            if (activator) {
+                                if (isElement(activator)) {
+                                    return activator[MATCHES](':active');
+                                }
+                                return false;
+                            }
+                            if (isElement(surface)) {
+                                return surface[MATCHES](':active');
+                            }
+                            return false;
+                        },
+                        isSurfaceDisabled: function () { return _this.props.disabled; },
+                        addClass: function (className) {
+                            if (!_this.isComponentMounted) {
+                                return;
+                            }
+                            _this.setState({ classList: _this.state.classList.add(className) });
+                        },
+                        removeClass: function (className) {
+                            if (!_this.isComponentMounted) {
+                                return;
+                            }
+                            var classList = _this.state.classList;
+                            classList.delete(className);
+                            _this.setState({ classList: classList });
+                        },
+                        registerDocumentInteractionHandler: function (evtType, handler) {
+                            return document.documentElement.addEventListener(evtType, handler, mdc_ripple_1.util.applyPassive());
+                        },
+                        deregisterDocumentInteractionHandler: function (evtType, handler) {
+                            return document.documentElement.removeEventListener(evtType, handler, mdc_ripple_1.util.applyPassive());
+                        },
+                        registerResizeHandler: function (handler) {
+                            return window.addEventListener('resize', handler);
+                        },
+                        deregisterResizeHandler: function (handler) {
+                            return window.removeEventListener('resize', handler);
+                        },
+                        updateCssVariable: _this.updateCssVariable,
+                        computeBoundingRect: function () {
+                            if (!_this.isComponentMounted) {
+                                // need to return object since foundation expects it
+                                return {};
+                            }
+                            if (_this.props.computeBoundingRect) {
+                                return _this.props.computeBoundingRect(surface);
+                            }
+                            return surface.getBoundingClientRect();
+                        },
+                        getWindowPageOffset: function () { return ({
+                            x: window.pageXOffset,
+                            y: window.pageYOffset,
+                        }); },
+                    };
+                };
+                _this.handleFocus = function (e) {
+                    _this.props.onFocus && _this.props.onFocus(e);
+                    _this.foundation.handleFocus();
+                };
+                _this.handleBlur = function (e) {
+                    _this.props.onBlur && _this.props.onBlur(e);
+                    _this.foundation.handleBlur();
+                };
+                _this.handleMouseDown = function (e) {
+                    _this.props.onMouseDown && _this.props.onMouseDown(e);
+                    _this.activateRipple(e);
+                };
+                _this.handleMouseUp = function (e) {
+                    _this.props.onMouseUp && _this.props.onMouseUp(e);
+                    _this.deactivateRipple(e);
+                };
+                _this.handleTouchStart = function (e) {
+                    _this.props.onTouchStart && _this.props.onTouchStart(e);
+                    _this.activateRipple(e);
+                };
+                _this.handleTouchEnd = function (e) {
+                    _this.props.onTouchEnd && _this.props.onTouchEnd(e);
+                    _this.deactivateRipple(e);
+                };
+                _this.handleKeyDown = function (e) {
+                    _this.props.onKeyDown && _this.props.onKeyDown(e);
+                    _this.activateRipple(e);
+                };
+                _this.handleKeyUp = function (e) {
+                    _this.props.onKeyUp && _this.props.onKeyUp(e);
+                    _this.deactivateRipple(e);
+                };
+                _this.activateRipple = function (e) {
+                    // https://reactjs.org/docs/events.html#event-pooling
+                    e.persist();
+                    requestAnimationFrame(function () {
+                        _this.foundation.activate(e);
+                    });
+                };
+                _this.deactivateRipple = function (e) {
+                    _this.foundation.deactivate(e);
+                };
+                _this.updateCssVariable = function (varName, value) {
+                    if (!_this.isComponentMounted) {
+                        return;
+                    }
+                    _this.setState(function (prevState) {
+                        var updatedStyle = Object.assign({}, _this.state.style);
+                        updatedStyle[varName] = value;
+                        return Object.assign(prevState, {
+                            style: updatedStyle,
+                        });
+                    });
+                };
+                return _this;
+            }
+            RippledComponent.prototype.componentDidMount = function () {
+                if (!this.foundation) {
+                    throw new Error('You must call initRipple from the element\'s ' +
+                        'ref prop to initialize the adapter for withRipple');
+                }
+            };
+            RippledComponent.prototype.componentWillUnmount = function () {
+                if (this.foundation) {
+                    this.isComponentMounted = false;
+                    this.foundation.destroy();
+                }
+            };
+            Object.defineProperty(RippledComponent.prototype, "classes", {
+                get: function () {
+                    var wrappedComponentClasses = this.props.className;
+                    var classList = this.state.classList;
+                    return classnames(Array.from(classList), wrappedComponentClasses);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(RippledComponent.prototype, "style", {
+                get: function () {
+                    var wrappedStyle = this.props.style;
+                    var style = this.state.style;
+                    return Object.assign({}, style, wrappedStyle);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            RippledComponent.prototype.render = function () {
+                var _a = this.props, 
+                /* eslint-disable */
+                unbounded = _a.unbounded, style = _a.style, className = _a.className, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onFocus = _a.onFocus, onBlur = _a.onBlur, 
+                /* eslint-enable */
+                otherProps = __rest(_a, ["unbounded", "style", "className", "onMouseDown", "onMouseUp", "onTouchStart", "onTouchEnd", "onKeyDown", "onKeyUp", "onFocus", "onBlur"]);
+                var updatedProps = __assign({}, otherProps, { onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onFocus: this.handleFocus, onBlur: this.handleBlur, initRipple: this.initializeFoundation, className: this.classes, style: this.style });
+                return (
+                // this issue is only appearing in TS v3.2.x. I am not seeing this issue appear in v2.9.1
+                // @ts-ignore
+                React.createElement(WrappedComponent, __assign({}, updatedProps)));
+            };
+            return RippledComponent;
+        }(React.Component)),
+        _a.defaultProps = __assign({ unbounded: false, disabled: false, style: {}, className: '', onMouseDown: function () { }, onMouseUp: function () { }, onTouchStart: function () { }, onTouchEnd: function () { }, onKeyDown: function () { }, onKeyUp: function () { }, onFocus: function () { }, onBlur: function () { } }, WrappedComponent.defaultProps),
+        _a;
+}
+exports.withRipple = withRipple;
+function getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
 
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
 /***/ }),
-/* 2 */
-/***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
-
-/***/ }),
-/* 3 */
+/***/ 62:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_62__;
 
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
+/***/ })
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
-
-/***/ })
-/******/ ]);
+/******/ });
 });
 //# sourceMappingURL=ripple.js.map

dist/index.min.js

@@ -1,1 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("classnames"),require("@material/ripple/dist/mdc.ripple"));else if("function"==typeof define&&define.amd)define(["react","prop-types","classnames","@material/ripple/dist/mdc.ripple"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("classnames"),require("@material/ripple/dist/mdc.ripple")):t(e.react,e["prop-types"],e.classnames,e["@material/ripple/dist/mdc.ripple"]);for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}("undefined"!=typeof self?self:this,function(e,t,n,o){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e){return e.displayName||e.name||"Component"}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),p=n(1),l=o(p),f=n(2),d=o(f),y=n(3),h=o(y),m=n(4),b=function(e){var t=function(t){function n(){var e,t,o,r;i(this,n);for(var s=arguments.length,a=Array(s),c=0;c<s;c++)a[c]=arguments[c];return t=o=u(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),o.foundation_=null,o.isMounted_=!0,o.state={classList:new Set,style:{}},o.initializeFoundation_=function(e,t){var n=o.createAdapter_(e,t);o.foundation_=new m.MDCRippleFoundation(n),o.foundation_.init()},o.createAdapter_=function(e,t){var n=m.util.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return m.util.supportsCssVariables(window)},isUnbounded:function(){return o.props.unbounded},isSurfaceActive:function(){return t?t[n](":active"):e[n](":active")},isSurfaceDisabled:function(){return o.props.disabled},addClass:function(e){o.isMounted_&&o.setState({classList:o.state.classList.add(e)})},removeClass:function(e){if(o.isMounted_){var t=o.state.classList;t.delete(e),o.setState({classList:t})}},registerDocumentInteractionHandler:function(e,t){return document.documentElement.addEventListener(e,t,m.util.applyPassive())},deregisterDocumentInteractionHandler:function(e,t){return document.documentElement.removeEventListener(e,t,m.util.applyPassive())},registerResizeHandler:function(e){return window.addEventListener("resize",e)},deregisterResizeHandler:function(e){return window.removeEventListener("resize",e)},updateCssVariable:o.updateCssVariable,computeBoundingRect:function(){return o.isMounted_?o.props.computeBoundingRect?o.props.computeBoundingRect(e):e.getBoundingClientRect():{}},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}},o.handleFocus=function(e){o.props.onFocus(e),o.foundation_.handleFocus()},o.handleBlur=function(e){o.props.onBlur(e),o.foundation_.handleBlur()},o.handleMouseDown=function(e){o.props.onMouseDown(e),o.activateRipple(e)},o.handleMouseUp=function(e){o.props.onMouseUp(e),o.deactivateRipple(e)},o.handleTouchStart=function(e){o.props.onTouchStart(e),o.activateRipple(e)},o.handleTouchEnd=function(e){o.props.onTouchEnd(e),o.deactivateRipple(e)},o.handleKeyDown=function(e){o.props.onKeyDown(e),o.activateRipple(e)},o.handleKeyUp=function(e){o.props.onKeyUp(e),o.deactivateRipple(e)},o.activateRipple=function(e){e.persist(),requestAnimationFrame(function(){o.foundation_.activate(e)})},o.deactivateRipple=function(e){o.foundation_.deactivate(e)},o.updateCssVariable=function(e,t){if(o.isMounted_){var n=Object.assign({},o.state.style);n[e]=t,o.setState({style:n})}},r=t,u(o,r)}return s(n,t),c(n,[{key:"componentDidMount",value:function(){if(!this.foundation_)throw new Error("You must call initRipple from the element's ref prop to initialize the adapter for withRipple")}},{key:"componentWillUnmount",value:function(){this.foundation_&&(this.isMounted_=!1,this.foundation_.destroy())}},{key:"render",value:function(){var t=this.props,n=(t.unbounded,t.style,t.className,t.onMouseDown,t.onMouseUp,t.onTouchStart,t.onTouchEnd,t.onKeyDown,t.onKeyUp,t.onFocus,t.onBlur,r(t,["unbounded","style","className","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onKeyDown","onKeyUp","onFocus","onBlur"])),o=Object.assign(n,{onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,onFocus:this.handleFocus,onBlur:this.handleBlur,initRipple:this.initializeFoundation_,className:this.classes,style:this.style});return l.default.createElement(e,o)}},{key:"classes",get:function(){var e=this.props.className,t=this.state.classList;return(0,h.default)(Array.from(t),e)}},{key:"style",get:function(){var e=this.props.style,t=this.state.style;return Object.assign({},t,e)}}]),n}(p.Component);return e.propTypes=Object.assign({unbounded:d.default.bool,disabled:d.default.bool,style:d.default.object,className:d.default.string,onMouseDown:d.default.func,onMouseUp:d.default.func,onTouchStart:d.default.func,onTouchEnd:d.default.func,onKeyDown:d.default.func,onKeyUp:d.default.func,onFocus:d.default.func,onBlur:d.default.func},e.propTypes),e.defaultProps=Object.assign({unbounded:!1,disabled:!1,style:{},className:"",onMouseDown:function(){},onMouseUp:function(){},onTouchStart:function(){},onTouchEnd:function(){},onKeyDown:function(){},onKeyUp:function(){},onFocus:function(){},onBlur:function(){}},e.defaultProps),t.propTypes=e.propTypes,t.defaultProps=e.defaultProps,t.displayName="WithRipple("+a(e)+")",t};t.default=b},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=o}])});
+!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("react"),require("classnames"),require("@material/ripple/dist/mdc.ripple.js"));else if("function"==typeof define&&define.amd)define(["react","classnames","@material/ripple/dist/mdc.ripple.js"],n);else{var t="object"==typeof exports?n(require("react"),require("classnames"),require("@material/ripple/dist/mdc.ripple.js")):n(e.react,e.classnames,e["@material/ripple/dist/mdc.ripple.js"]);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}("undefined"!=typeof self?self:this,function(e,n,t){return function(e){function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var t={};return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=61)}({0:function(n,t){n.exports=e},1:function(e,t){e.exports=n},61:function(e,n,t){"use strict";function o(e){return void 0!==e[d]}function r(e){var n;return n=function(n){function t(){var t=null!==n&&n.apply(this,arguments)||this;return t.isComponentMounted=!0,t.displayName="WithRipple("+i(e)+")",t.state={classList:new Set,style:{}},t.initializeFoundation=function(e,n){var o=t.createAdapter(e,n);t.foundation=new l.MDCRippleFoundation(o),t.foundation.init()},t.createAdapter=function(e,n){return{browserSupportsCssVars:function(){return l.util.supportsCssVariables(window)},isUnbounded:function(){return t.props.unbounded},isSurfaceActive:function(){return n?!!o(n)&&n[d](":active"):!!o(e)&&e[d](":active")},isSurfaceDisabled:function(){return t.props.disabled},addClass:function(e){t.isComponentMounted&&t.setState({classList:t.state.classList.add(e)})},removeClass:function(e){if(t.isComponentMounted){var n=t.state.classList;n.delete(e),t.setState({classList:n})}},registerDocumentInteractionHandler:function(e,n){return document.documentElement.addEventListener(e,n,l.util.applyPassive())},deregisterDocumentInteractionHandler:function(e,n){return document.documentElement.removeEventListener(e,n,l.util.applyPassive())},registerResizeHandler:function(e){return window.addEventListener("resize",e)},deregisterResizeHandler:function(e){return window.removeEventListener("resize",e)},updateCssVariable:t.updateCssVariable,computeBoundingRect:function(){return t.isComponentMounted?t.props.computeBoundingRect?t.props.computeBoundingRect(e):e.getBoundingClientRect():{}},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}},t.handleFocus=function(e){t.props.onFocus&&t.props.onFocus(e),t.foundation.handleFocus()},t.handleBlur=function(e){t.props.onBlur&&t.props.onBlur(e),t.foundation.handleBlur()},t.handleMouseDown=function(e){t.props.onMouseDown&&t.props.onMouseDown(e),t.activateRipple(e)},t.handleMouseUp=function(e){t.props.onMouseUp&&t.props.onMouseUp(e),t.deactivateRipple(e)},t.handleTouchStart=function(e){t.props.onTouchStart&&t.props.onTouchStart(e),t.activateRipple(e)},t.handleTouchEnd=function(e){t.props.onTouchEnd&&t.props.onTouchEnd(e),t.deactivateRipple(e)},t.handleKeyDown=function(e){t.props.onKeyDown&&t.props.onKeyDown(e),t.activateRipple(e)},t.handleKeyUp=function(e){t.props.onKeyUp&&t.props.onKeyUp(e),t.deactivateRipple(e)},t.activateRipple=function(e){e.persist(),requestAnimationFrame(function(){t.foundation.activate(e)})},t.deactivateRipple=function(e){t.foundation.deactivate(e)},t.updateCssVariable=function(e,n){t.isComponentMounted&&t.setState(function(o){var r=Object.assign({},t.state.style);return r[e]=n,Object.assign(o,{style:r})})},t}return s(t,n),t.prototype.componentDidMount=function(){if(!this.foundation)throw new Error("You must call initRipple from the element's ref prop to initialize the adapter for withRipple")},t.prototype.componentWillUnmount=function(){this.foundation&&(this.isComponentMounted=!1,this.foundation.destroy())},Object.defineProperty(t.prototype,"classes",{get:function(){var e=this.props.className,n=this.state.classList;return c(Array.from(n),e)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"style",{get:function(){var e=this.props.style,n=this.state.style;return Object.assign({},n,e)},enumerable:!0,configurable:!0}),t.prototype.render=function(){var n=this.props,t=(n.unbounded,n.style,n.className,n.onMouseDown,n.onMouseUp,n.onTouchStart,n.onTouchEnd,n.onKeyDown,n.onKeyUp,n.onFocus,n.onBlur,a(n,["unbounded","style","className","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onKeyDown","onKeyUp","onFocus","onBlur"])),o=u({},t,{onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,onFocus:this.handleFocus,onBlur:this.handleBlur,initRipple:this.initializeFoundation,className:this.classes,style:this.style});return p.createElement(e,u({},o))},t}(p.Component),n.defaultProps=u({unbounded:!1,disabled:!1,style:{},className:"",onMouseDown:function(){},onMouseUp:function(){},onTouchStart:function(){},onTouchEnd:function(){},onKeyDown:function(){},onKeyUp:function(){},onFocus:function(){},onBlur:function(){}},e.defaultProps),n}function i(e){return e.displayName||e.name||"Component"}var s=this&&this.__extends||function(){var e=function(n,t){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)n.hasOwnProperty(t)&&(e[t]=n[t])})(n,t)};return function(n,t){function o(){this.constructor=n}e(n,t),n.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}}(),u=this&&this.__assign||function(){return u=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++){n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)},a=this&&this.__rest||function(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&(t[o[r]]=e[o[r]]);return t};Object.defineProperty(n,"__esModule",{value:!0});var p=t(0),c=t(1),l=t(62),d=l.util.getMatchesProperty(HTMLElement.prototype);n.withRipple=r},62:function(e,n){e.exports=t}})});

dist/ripple.css.js

@@ -73,7 +73,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 16);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 16:
 /***/ (function(module, exports) {
@@ -84,4 +85,5 @@
 /***/ })
-/******/ ]);
+
+/******/ });
 });
 //# sourceMappingURL=ripple.css.js.map

dist/ripple.min.css.js

@@ -73,7 +73,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 16);
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 16:
 /***/ (function(module, exports) {
@@ -84,4 +85,5 @@
 /***/ })
-/******/ ]);
+
+/******/ });
 });
 //# sourceMappingURL=ripple.min.css.js.map

package.json

 {
   "name": "@material/react-ripple",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Material Components React Ripple",
   "license": "MIT",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "keywords": [
@@ -20,3 +21,2 @@ "mdc web react",
     "classnames": "^2.2.5",
-    "prop-types": "^15.6.1",
     "react": "^16.4.2"
@@ -23,0 +23,0 @@ },

README.md

@@ -43,3 +43,3 @@ # React Ripple
 ```js
-import withRipple from '@material/react-ripple';
+import {withRipple} from '@material/react-ripple';
 
@@ -79,2 +79,47 @@ const Icon = (props) => {
 
+### Typescript
+
+If you're using TS, you will need to extend from the provided InjectedProps.
+
+```js
+
+import {withRipple, InjectedProps} from '@material/react-ripple';
+
+interface IconProps extends InjectedProps<HTMLDivElement> {
+  children?: React.ReactNode;
+  className: string;
+  initRipple: React.Ref<HTMLDivElement>;
+  unbounded: boolean;
+}
+
+const Icon = (props) => {
+  const {
+    children,
+    className = '',
+    // You must call `initRipple` from the root element's ref. This attaches the ripple
+    // to the element.
+    initRipple,
+    // include `unbounded` to remove warnings when passing `otherProps` to the
+    // root element.
+    unbounded,
+    ...otherProps
+  } = props;
+
+  // any classes needed on your component needs to be merged with
+  // `className` passed from `props`.
+  const classes = `ripple-icon-component ${className}`;
+
+  return (
+    <div
+      className={classes}
+      ref={initRipple}
+      {...otherProps}>
+      {children}
+    </div>
+  );
+};
+
+const RippleIcon = withRipple<IconProps, HTMLDivElement>(Icon);
+```
+
 ## Advanced Usage
@@ -89,3 +134,3 @@
 ```js
-import withRipple from '@material/react-ripple';
+import {withRipple} from '@material/react-ripple';
 
@@ -92,0 +137,0 @@ const MyInput = (props) => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128234

increased by16.93%

Dependency count

3

decreased by-25%

Lines of code

1244

increased by81.87%

Number of lines in readme file

190

increased by31.03%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedprop-types@^15.6.1