@material/react-ripple - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

dist/index.min.js

@@ -1,38 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("classnames"));else if("function"==typeof define&&define.amd)define(["react","prop-types","classnames"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("classnames")):t(e.react,e["prop-types"],e.classnames);for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}("undefined"!=typeof self?self:this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},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 i(e){return e&&e.__esModule?e:{default:e}}function a(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(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 u(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 s(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 i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),d=n(1),l=i(d),f=n(2),p=i(f),v=n(3),h=i(v),_=n(4),y=function(e){var t=function(t){function n(){var e,t,i,a;o(this,n);for(var u=arguments.length,s=Array(u),c=0;c<u;c++)s[c]=arguments[c];return t=i=r(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(s))),i.foundation_=null,i.isMounted_=!0,i.state={classList:new Set,style:{}},i.initializeFoundation_=function(e){var t=i.createAdapter_(e);i.foundation_=new _.MDCRippleFoundation(t),i.foundation_.init()},i.createAdapter_=function(e){var t=_.util.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return _.util.supportsCssVariables(window)},isUnbounded:function(){return i.props.unbounded},isSurfaceActive:function(){return e[t](":active")},isSurfaceDisabled:function(){return i.props.disabled},addClass:function(e){i.isMounted_&&i.setState({classList:i.state.classList.add(e)})},removeClass:function(e){if(i.isMounted_){var t=i.state.classList;t.delete(e),i.setState({classList:t})}},registerDocumentInteractionHandler:function(e,t){return document.documentElement.addEventListener(e,t,_.util.applyPassive())},deregisterDocumentInteractionHandler:function(e,t){return document.documentElement.removeEventListener(e,t,_.util.applyPassive())},registerResizeHandler:function(e){return window.addEventListener("resize",e)},deregisterResizeHandler:function(e){return window.removeEventListener("resize",e)},updateCssVariable:i.updateCssVariable,computeBoundingRect:function(){return i.isMounted_?i.props.computeBoundingRect?i.props.computeBoundingRect(e):e.getBoundingClientRect():{}},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}},i.handleFocus=function(e){i.props.onFocus(e),i.foundation_.handleFocus()},i.handleBlur=function(e){i.props.onBlur(e),i.foundation_.handleBlur()},i.handleMouseDown=function(e){i.props.onMouseDown(e),i.activateRipple(e)},i.handleMouseUp=function(e){i.props.onMouseUp(e),i.deactivateRipple(e)},i.handleTouchStart=function(e){i.props.onTouchStart(e),i.activateRipple(e)},i.handleTouchEnd=function(e){i.props.onTouchEnd(e),i.deactivateRipple(e)},i.handleKeyDown=function(e){i.props.onKeyDown(e),i.activateRipple(e)},i.handleKeyUp=function(e){i.props.onKeyUp(e),i.deactivateRipple(e)},i.activateRipple=function(e){e.persist(),requestAnimationFrame(function(){i.foundation_.activate(e)})},i.deactivateRipple=function(e){i.foundation_.deactivate(e)},i.updateCssVariable=function(e,t){if(i.isMounted_){var n=Object.assign({},i.state.style);n[e]=t,i.setState({style:n})}},i.getMergedStyles=function(){var e=i.props.style,t=i.state.style;return Object.assign({},t,e)},a=t,r(i,a)}return u(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,a(t,["unbounded","style","className","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onKeyDown","onKeyUp","onFocus","onBlur"])),i=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.getMergedStyles()});return l.default.createElement(e,i)}},{key:"classes",get:function(){var e=this.props.className,t=this.state.classList;return(0,h.default)(Array.from(t),e)}}]),n}(d.Component);return e.propTypes=Object.assign({unbounded:p.default.bool,disabled:p.default.bool,style:p.default.object,className:p.default.string,onMouseDown:p.default.func,onMouseUp:p.default.func,onTouchStart:p.default.func,onTouchEnd:p.default.func,onKeyDown:p.default.func,onKeyUp:p.default.func,onFocus:p.default.func,onBlur:p.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("+s(e)+")",t};t.default=y},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";(function(e){var n,i,a,o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};/*!
- Material Components for the Web
- Copyright (c) 2018 Google Inc.
- License: Apache-2.0
-*/
-!function(r,u){"object"===o(t)&&"object"===o(e)?e.exports=u():(i=[],n=u,void 0!==(a="function"==typeof n?n.apply(t,i):n)&&(e.exports=a))}(0,function(){return function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},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=4)}([function(e,t,n){function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.adapter_=t}return a(e,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(e,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),e}();t.a=o},function(e,t,n){function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(0),o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,e),this.root_=t;for(var a=arguments.length,o=Array(a>2?a-2:0),r=2;r<a;r++)o[r-2]=arguments[r];this.initialize.apply(this,o),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return o(e,null,[{key:"attachTo",value:function(t){return new e(t,new a.a)}}]),o(e,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(e,t){this.root_.addEventListener(e,t)}},{key:"unlisten",value:function(e,t){this.root_.removeEventListener(e,t)}},{key:"emit",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(e,{detail:t,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(e,n,!1,t)),this.root_.dispatchEvent(i)}}]),e}();t.a=r},function(e,t,n){function i(e){var t=e.document,n=t.createElement("div");n.className="mdc-ripple-surface--test-edge-var-bug",t.body.appendChild(n);var i=e.getComputedStyle(n),a=null!==i&&"solid"===i.borderTopStyle;return n.remove(),a}function a(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=s;if("boolean"==typeof s&&!t)return n;if(e.CSS&&"function"==typeof e.CSS.supports){var a=e.CSS.supports("--css-vars","yes"),o=e.CSS.supports("(--css-vars: yes)")&&e.CSS.supports("color","#00000000");return n=!(!a&&!o||i(e)),t||(s=n),n}}function o(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window,t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===c||t){var n=!1;try{e.document.addEventListener("test",null,{get passive(){n=!0}})}catch(e){}c=n}return!!c&&{passive:!0}}function r(e){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(t){return t in e}).pop()}function u(e,t,n){var i=t.x,a=t.y,o=i+n.left,r=a+n.top,u=void 0,s=void 0;return"touchstart"===e.type?(u=e.changedTouches[0].pageX-o,s=e.changedTouches[0].pageY-r):(u=e.pageX-o,s=e.pageY-r),{x:u,y:s}}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"supportsCssVariables",function(){return a}),n.d(t,"applyPassive",function(){return o}),n.d(t,"getMatchesProperty",function(){return r}),n.d(t,"getNormalizedEventCoords",function(){return u});/**
- * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var s=void 0,c=void 0},function(e,t,n){function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){function e(){i(this,e)}a(e,[{key:"browserSupportsCssVars",value:function(){}},{key:"isUnbounded",value:function(){}},{key:"isSurfaceActive",value:function(){}},{key:"isSurfaceDisabled",value:function(){}},{key:"addClass",value:function(e){}},{key:"removeClass",value:function(e){}},{key:"containsEventTarget",value:function(e){}},{key:"registerInteractionHandler",value:function(e,t){}},{key:"deregisterInteractionHandler",value:function(e,t){}},{key:"registerDocumentInteractionHandler",value:function(e,t){}},{key:"deregisterDocumentInteractionHandler",value:function(e,t){}},{key:"registerResizeHandler",value:function(e){}},{key:"deregisterResizeHandler",value:function(e){}},{key:"updateCssVariable",value:function(e,t){}},{key:"computeBoundingRect",value:function(){}},{key:"getWindowPageOffset",value:function(){}}])}()},function(e,t,n){function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==(void 0===t?"undefined":o(t))&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+(void 0===t?"undefined":o(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)}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"MDCRipple",function(){return l}),n.d(t,"RippleCapableSurface",function(){return f});var u=n(1),s=(n(3),n(5)),c=n(2);n.d(t,"MDCRippleFoundation",function(){return s.a}),n.d(t,"util",function(){return c});var d=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),l=function(e){function t(){var e;i(this,t);for(var n=arguments.length,o=Array(n),r=0;r<n;r++)o[r]=arguments[r];var u=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));return u.disabled=!1,u.unbounded_,u}return r(t,e),d(t,[{key:"setUnbounded_",value:function(){this.foundation_.setUnbounded(this.unbounded_)}},{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"layout",value:function(){this.foundation_.layout()}},{key:"getDefaultFoundation",value:function(){return new s.a(t.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(e){this.unbounded_=Boolean(e),this.setUnbounded_()}}],[{key:"attachTo",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,o=new t(e);return void 0!==a&&(o.unbounded=a),o}},{key:"createAdapter",value:function(e){var t=c.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return c.supportsCssVariables(window)},isUnbounded:function(){return e.unbounded},isSurfaceActive:function(){return e.root_[t](":active")},isSurfaceDisabled:function(){return e.disabled},addClass:function(t){return e.root_.classList.add(t)},removeClass:function(t){return e.root_.classList.remove(t)},containsEventTarget:function(t){return e.root_.contains(t)},registerInteractionHandler:function(t,n){return e.root_.addEventListener(t,n,c.applyPassive())},deregisterInteractionHandler:function(t,n){return e.root_.removeEventListener(t,n,c.applyPassive())},registerDocumentInteractionHandler:function(e,t){return document.documentElement.addEventListener(e,t,c.applyPassive())},deregisterDocumentInteractionHandler:function(e,t){return document.documentElement.removeEventListener(e,t,c.applyPassive())},registerResizeHandler:function(e){return window.addEventListener("resize",e)},deregisterResizeHandler:function(e){return window.removeEventListener("resize",e)},updateCssVariable:function(t,n){return e.root_.style.setProperty(t,n)},computeBoundingRect:function(){return e.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),t}(u.a),f=function e(){i(this,e)};f.prototype.root_,f.prototype.unbounded,f.prototype.disabled},function(e,t,n){function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==(void 0===t?"undefined":o(t))&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+(void 0===t?"undefined":o(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)}var u=n(0),s=(n(3),n(6)),c=n(2),d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),f=["touchstart","pointerdown","mousedown","keydown"],p=["touchend","pointerup","mouseup"],v=[],h=function(e){function t(e){i(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,d(t.defaultAdapter,e)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.initialSize_=0,n.maxRadius_=0,n.activateHandler_=function(e){return n.activate_(e)},n.deactivateHandler_=function(e){return n.deactivate_(e)},n.focusHandler_=function(){return n.handleFocus()},n.blurHandler_=function(){return n.handleBlur()},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.fgDeactivationRemovalTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n.previousActivationEvent_=null,n}return r(t,e),l(t,null,[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.c}},{key:"numbers",get:function(){return s.b}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},isSurfaceDisabled:function(){},addClass:function(){},removeClass:function(){},containsEventTarget:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerDocumentInteractionHandler:function(){},deregisterDocumentInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),l(t,[{key:"isSupported_",value:function(){return this.adapter_.browserSupportsCssVars()}},{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationEvent:null,isProgrammatic:!1}}},{key:"init",value:function(){var e=this;if(this.isSupported_()){this.registerRootHandlers_();var n=t.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){e.adapter_.addClass(i),e.adapter_.isUnbounded()&&(e.adapter_.addClass(a),e.layoutInternal_())})}}},{key:"destroy",value:function(){var e=this;if(this.isSupported_()){if(this.activationTimer_){clearTimeout(this.activationTimer_),this.activationTimer_=0;var n=t.cssClasses.FG_ACTIVATION;this.adapter_.removeClass(n)}this.deregisterRootHandlers_(),this.deregisterDeactivationHandlers_();var i=t.cssClasses,a=i.ROOT,o=i.UNBOUNDED;requestAnimationFrame(function(){e.adapter_.removeClass(a),e.adapter_.removeClass(o),e.removeCssVars_()})}}},{key:"registerRootHandlers_",value:function(){var e=this;f.forEach(function(t){e.adapter_.registerInteractionHandler(t,e.activateHandler_)}),this.adapter_.registerInteractionHandler("focus",this.focusHandler_),this.adapter_.registerInteractionHandler("blur",this.blurHandler_),this.adapter_.isUnbounded()&&this.adapter_.registerResizeHandler(this.resizeHandler_)}},{key:"registerDeactivationHandlers_",value:function(e){var t=this;"keydown"===e.type?this.adapter_.registerInteractionHandler("keyup",this.deactivateHandler_):p.forEach(function(e){t.adapter_.registerDocumentInteractionHandler(e,t.deactivateHandler_)})}},{key:"deregisterRootHandlers_",value:function(){var e=this;f.forEach(function(t){e.adapter_.deregisterInteractionHandler(t,e.activateHandler_)}),this.adapter_.deregisterInteractionHandler("focus",this.focusHandler_),this.adapter_.deregisterInteractionHandler("blur",this.blurHandler_),this.adapter_.isUnbounded()&&this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"deregisterDeactivationHandlers_",value:function(){var e=this;this.adapter_.deregisterInteractionHandler("keyup",this.deactivateHandler_),p.forEach(function(t){e.adapter_.deregisterDocumentInteractionHandler(t,e.deactivateHandler_)})}},{key:"removeCssVars_",value:function(){var e=this,n=t.strings;Object.keys(n).forEach(function(t){0===t.indexOf("VAR_")&&e.adapter_.updateCssVariable(n[t],null)})}},{key:"activate_",value:function(e){var t=this;if(!this.adapter_.isSurfaceDisabled()){var n=this.activationState_;if(!n.isActivated){var i=this.previousActivationEvent_;if(!(i&&e&&i.type!==e.type)){n.isActivated=!0,n.isProgrammatic=null===e,n.activationEvent=e,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===e.type||"touchstart"===e.type||"pointerdown"===e.type);if(e&&v.length>0&&v.some(function(e){return t.adapter_.containsEventTarget(e)}))return void this.resetActivationState_();e&&(v.push(e.target),this.registerDeactivationHandlers_(e)),n.wasElementMadeActive=this.checkElementMadeActive_(e),n.wasElementMadeActive&&this.animateActivation_(),requestAnimationFrame(function(){v=[],n.wasElementMadeActive||" "!==e.key&&32!==e.keyCode||(n.wasElementMadeActive=t.checkElementMadeActive_(e),n.wasElementMadeActive&&t.animateActivation_()),n.wasElementMadeActive||(t.activationState_=t.defaultActivationState_())})}}}}},{key:"checkElementMadeActive_",value:function(e){return!e||"keydown"!==e.type||this.adapter_.isSurfaceActive()}},{key:"activate",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.activate_(e)}},{key:"animateActivation_",value:function(){var e=this,n=t.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,o=t.cssClasses,r=o.FG_DEACTIVATION,u=o.FG_ACTIVATION,s=t.numbers.DEACTIVATION_TIMEOUT_MS;this.layoutInternal_();var c="",d="";if(!this.adapter_.isUnbounded()){var l=this.getFgTranslationCoordinates_(),f=l.startPoint,p=l.endPoint;c=f.x+"px, "+f.y+"px",d=p.x+"px, "+p.y+"px"}this.adapter_.updateCssVariable(i,c),this.adapter_.updateCssVariable(a,d),clearTimeout(this.activationTimer_),clearTimeout(this.fgDeactivationRemovalTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(r),this.adapter_.computeBoundingRect(),this.adapter_.addClass(u),this.activationTimer_=setTimeout(function(){return e.activationTimerCallback_()},s)}},{key:"getFgTranslationCoordinates_",value:function(){var e=this.activationState_,t=e.activationEvent,n=e.wasActivatedByPointer,i=void 0;return i=n?Object(c.getNormalizedEventCoords)(t,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},i={x:i.x-this.initialSize_/2,y:i.y-this.initialSize_/2},{startPoint:i,endPoint:{x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2}}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var e=this,n=t.cssClasses.FG_DEACTIVATION,i=this.activationState_,a=i.hasDeactivationUXRun,o=i.isActivated;(a||!o)&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(n),this.fgDeactivationRemovalTimer_=setTimeout(function(){e.adapter_.removeClass(n)},s.b.FG_DEACTIVATION_MS))}},{key:"rmBoundedActivationClasses_",value:function(){var e=t.cssClasses.FG_ACTIVATION;this.adapter_.removeClass(e),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"resetActivationState_",value:function(){var e=this;this.previousActivationEvent_=this.activationState_.activationEvent,this.activationState_=this.defaultActivationState_(),setTimeout(function(){return e.previousActivationEvent_=null},t.numbers.TAP_DELAY_MS)}},{key:"deactivate_",value:function(e){var t=this,n=this.activationState_;if(n.isActivated){var i=d({},n);if(n.isProgrammatic){requestAnimationFrame(function(){return t.animateDeactivation_(null,i)}),this.resetActivationState_()}else this.deregisterDeactivationHandlers_(),requestAnimationFrame(function(){t.activationState_.hasDeactivationUXRun=!0,t.animateDeactivation_(e,i),t.resetActivationState_()})}}},{key:"deactivate",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.deactivate_(e)}},{key:"animateDeactivation_",value:function(e,t){var n=t.wasActivatedByPointer,i=t.wasElementMadeActive;(n||i)&&this.runDeactivationUXLogicIfReady_()}},{key:"layout",value:function(){var e=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){e.layoutInternal_(),e.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){var e=this;this.frame_=this.adapter_.computeBoundingRect();var n=Math.max(this.frame_.height,this.frame_.width);this.maxRadius_=this.adapter_.isUnbounded()?n:function(){return Math.sqrt(Math.pow(e.frame_.width,2)+Math.pow(e.frame_.height,2))+t.numbers.PADDING}(),this.initialSize_=n*t.numbers.INITIAL_ORIGIN_SCALE,this.fgScale_=this.maxRadius_/this.initialSize_,this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var e=t.strings,n=e.VAR_FG_SIZE,i=e.VAR_LEFT,a=e.VAR_TOP,o=e.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.initialSize_+"px"),this.adapter_.updateCssVariable(o,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(i,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(a,this.unboundedCoords_.top+"px"))}},{key:"setUnbounded",value:function(e){var n=t.cssClasses.UNBOUNDED;e?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"handleFocus",value:function(){var e=this;requestAnimationFrame(function(){return e.adapter_.addClass(t.cssClasses.BG_FOCUSED)})}},{key:"handleBlur",value:function(){var e=this;requestAnimationFrame(function(){return e.adapter_.removeClass(t.cssClasses.BG_FOCUSED)})}}]),t}(u.a);t.a=h},function(e,t,n){n.d(t,"a",function(){return i}),n.d(t,"c",function(){return a}),n.d(t,"b",function(){return o});/**
- * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},o={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:225,FG_DEACTIVATION_MS:150,TAP_DELAY_MS:300}}])})}).call(t,n(5)(e))},function(e,t,n){"use strict";e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}}])});
+!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}])});

package.json

 {
   "name": "@material/react-ripple",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Material Components React Ripple",
-  "license": "Apache-2.0",
+  "license": "MIT",
   "main": "dist/index.js",
@@ -18,6 +18,6 @@ "keywords": [
   "dependencies": {
-    "@material/ripple": "^0.38.1",
+    "@material/ripple": "^0.39.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
-    "react": "^16.3.2"
+    "react": "^16.4.2"
   },
@@ -24,0 +24,0 @@ "publishConfig": {

README.md

@@ -36,3 +36,3 @@ # React Ripple
     className = '',
-    // call `initRipple` from the root element's ref. This attaches the ripple
+    // You must call `initRipple` from the root element's ref. This attaches the ripple
     // to the element.
@@ -66,2 +66,53 @@ initRipple,
 
+## Advanced Usage
+
+### Ripple surface and ripple activator
+
+You may want to apply the visual treatment (CSS classes and styles) for a ripple surface on one element, but have its activation rely on a different element. For example, putting a ripple on a `<div>` which will be activated by focusing on a child `<input>` element. We call the visual element the "ripple surface" and the activating element the "ripple activator".
+
+The `initRipple` callback prop can take in an extra `activator` argument for the case where the ripple activator differs from the ripple surface. If the `activator` argument is not provided, the ripple surface will also serve as the ripple activator.
+
+```js
+import withRipple from '@material/react-ripple';
+
+const MyInput = (props) => {
+  const {
+    rippleActivator,
+    ...otherProps
+  } = props;
+
+  return (
+    <input ref={rippleActivator} {...otherProps} />
+  );
+}
+
+class MyComponent extends React.Component {
+  rippleActivator = React.createRef();
+
+  init = (el) => {
+    this.props.initRipple(el /* surface */, this.rippleActivator.current /* activator */);
+  }
+
+  render() {
+    const {
+      className,
+      initRipple,
+      unbounded,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <div
+        className={`my-component ${className}`}
+        ref={this.init}
+        {...otherProps}>
+        <MyInput rippleActivator={this.rippleActivator} />
+      </div>
+    );
+  }
+};
+
+const MyRippledComponent = withRipple(MyComponent);
+```
+
 ## Props
@@ -68,0 +119,0 @@

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

Number of package files

16

increased by128.57%

Number of lines in readme file

132

increased by62.96%

Worsened metrics

Total package byte prevSize

109145

decreased by-73.96%

Lines of code

684

decreased by-51.83%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@material/animation@0.39.0(transitive)

• + Added@material/base@0.39.0(transitive)

• + Added@material/ripple@0.39.3(transitive)

• + Added@material/theme@0.39.1(transitive)

• - Removed@material/animation@0.34.0(transitive)

• - Removed@material/base@0.35.0(transitive)

• - Removed@material/ripple@0.38.1(transitive)

• - Removed@material/theme@0.38.0(transitive)

• Updated@material/ripple@^0.39.0

• Updatedreact@^16.4.2