@rmwc/ripple - npm Package Compare versions

Comparing version 5.0.2-alpha.0 to 5.0.3-alpha.0

dist/index.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -41,194 +42,197 @@ var extendStatics = function (d, b) {
 };
-define(["require", "exports", "react", "react-dom", "@material/ripple", "@rmwc/base", "@rmwc/provider"], function (require, exports, React, ReactDOM, ripple_1, base_1, provider_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    ReactDOM = __importStar(ReactDOM);
-    /** A component for adding Ripples to other components. */
-    var Ripple = /** @class */ (function (_super) {
-        __extends(Ripple, _super);
-        function Ripple(props) {
-            var _this = _super.call(this, props) || this;
-            _this.root = _this.createElement('root');
-            _this.surface = _this.createElement('surface');
-            _this.handleFocus = _this.handleFocus.bind(_this);
-            _this.handleBlur = _this.handleBlur.bind(_this);
-            _this.handleMouseDown = _this.handleMouseDown.bind(_this);
-            _this.handleMouseUp = _this.handleMouseUp.bind(_this);
-            _this.handleTouchStart = _this.handleTouchStart.bind(_this);
-            _this.handleTouchEnd = _this.handleTouchEnd.bind(_this);
-            _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-            _this.handleKeyUp = _this.handleKeyUp.bind(_this);
-            return _this;
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var ReactDOM = __importStar(require("react-dom"));
+// @ts-ignore
+var ripple_1 = require("@material/ripple");
+var base_1 = require("@rmwc/base");
+var provider_1 = require("@rmwc/provider");
+/** A component for adding Ripples to other components. */
+var Ripple = /** @class */ (function (_super) {
+    __extends(Ripple, _super);
+    function Ripple(props) {
+        var _this = _super.call(this, props) || this;
+        _this.root = _this.createElement('root');
+        _this.surface = _this.createElement('surface');
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.handleMouseDown = _this.handleMouseDown.bind(_this);
+        _this.handleMouseUp = _this.handleMouseUp.bind(_this);
+        _this.handleTouchStart = _this.handleTouchStart.bind(_this);
+        _this.handleTouchEnd = _this.handleTouchEnd.bind(_this);
+        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+        _this.handleKeyUp = _this.handleKeyUp.bind(_this);
+        return _this;
+    }
+    Ripple.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        return new ripple_1.MDCRippleFoundation({
+            browserSupportsCssVars: function () { return ripple_1.util.supportsCssVariables(window); },
+            isUnbounded: function () { return !!_this.props.unbounded; },
+            isSurfaceActive: function () {
+                if (_this.root.ref) {
+                    return base_1.matches(_this.root.ref, ':active');
+                }
+                return false;
+            },
+            isSurfaceDisabled: function () { return _this.props.disabled; },
+            addClass: function (className) { return _this.surface.addClass(className); },
+            removeClass: function (className) { return _this.surface.removeClass(className); },
+            containsEventTarget: function (target) {
+                return _this.root.ref && _this.root.ref.contains(target);
+            },
+            registerInteractionHandler: function (evtType, handler) { return _this.root.addEventListener(evtType, handler, ripple_1.util.applyPassive()); },
+            deregisterInteractionHandler: function (evtType, handler) { return _this.root.removeEventListener(evtType, handler, ripple_1.util.applyPassive()); },
+            registerDocumentInteractionHandler: function (evtType, handler) {
+                return document.documentElement.addEventListener(evtType, handler, ripple_1.util.applyPassive());
+            },
+            deregisterDocumentInteractionHandler: function (evtType, handler) {
+                return document.documentElement.removeEventListener(evtType, handler, ripple_1.util.applyPassive());
+            },
+            registerResizeHandler: function (handler) {
+                return window.addEventListener('resize', handler);
+            },
+            deregisterResizeHandler: function (handler) {
+                return window.removeEventListener('resize', handler);
+            },
+            updateCssVariable: function (varName, value) {
+                return _this.surface.setStyle(varName, value);
+            },
+            computeBoundingRect: function () {
+                return _this.root.ref && _this.root.ref.getBoundingClientRect();
+            },
+            getWindowPageOffset: function () { return ({
+                x: window.pageXOffset,
+                y: window.pageYOffset
+            }); }
+        });
+    };
+    Ripple.prototype.sync = function (props, prevProps) {
+        this.root.setRef(ReactDOM.findDOMNode(this));
+        if (props.unbounded !== prevProps.unbounded) {
+            this.foundation.setUnbounded(props.unbounded);
         }
-        Ripple.prototype.getDefaultFoundation = function () {
-            var _this = this;
-            return new ripple_1.MDCRippleFoundation({
-                browserSupportsCssVars: function () { return ripple_1.util.supportsCssVariables(window); },
-                isUnbounded: function () { return !!_this.props.unbounded; },
-                isSurfaceActive: function () {
-                    if (_this.root.ref) {
-                        return base_1.matches(_this.root.ref, ':active');
-                    }
-                    return false;
-                },
-                isSurfaceDisabled: function () { return _this.props.disabled; },
-                addClass: function (className) { return _this.surface.addClass(className); },
-                removeClass: function (className) { return _this.surface.removeClass(className); },
-                containsEventTarget: function (target) {
-                    return _this.root.ref && _this.root.ref.contains(target);
-                },
-                registerInteractionHandler: function (evtType, handler) { return _this.root.addEventListener(evtType, handler, ripple_1.util.applyPassive()); },
-                deregisterInteractionHandler: function (evtType, handler) { return _this.root.removeEventListener(evtType, handler, ripple_1.util.applyPassive()); },
-                registerDocumentInteractionHandler: function (evtType, handler) {
-                    return document.documentElement.addEventListener(evtType, handler, ripple_1.util.applyPassive());
-                },
-                deregisterDocumentInteractionHandler: function (evtType, handler) {
-                    return document.documentElement.removeEventListener(evtType, handler, ripple_1.util.applyPassive());
-                },
-                registerResizeHandler: function (handler) {
-                    return window.addEventListener('resize', handler);
-                },
-                deregisterResizeHandler: function (handler) {
-                    return window.removeEventListener('resize', handler);
-                },
-                updateCssVariable: function (varName, value) {
-                    return _this.surface.setStyle(varName, value);
-                },
-                computeBoundingRect: function () {
-                    return _this.root.ref && _this.root.ref.getBoundingClientRect();
-                },
-                getWindowPageOffset: function () { return ({
-                    x: window.pageXOffset,
-                    y: window.pageYOffset
-                }); }
+    };
+    Ripple.prototype.handleFocus = function (evt) {
+        this.props.onFocus && this.props.onFocus(evt);
+        this.foundation.handleFocus();
+    };
+    Ripple.prototype.handleBlur = function (evt) {
+        this.props.onBlur && this.props.onBlur(evt);
+        this.foundation.handleBlur();
+    };
+    Ripple.prototype.handleMouseDown = function (evt) {
+        this.props.onMouseDown && this.props.onMouseDown(evt);
+        this.activateRipple(evt);
+    };
+    Ripple.prototype.handleMouseUp = function (evt) {
+        this.props.onMouseUp && this.props.onMouseUp(evt);
+        this.deactivateRipple(evt);
+    };
+    Ripple.prototype.handleTouchStart = function (evt) {
+        this.props.onTouchStart && this.props.onTouchStart(evt);
+        this.activateRipple(evt);
+    };
+    Ripple.prototype.handleTouchEnd = function (evt) {
+        this.props.onTouchEnd && this.props.onTouchEnd(evt);
+        this.deactivateRipple(evt);
+    };
+    Ripple.prototype.handleKeyDown = function (evt) {
+        // https://reactjs.org/docs/events.html#event-pooling
+        evt.persist();
+        this.props.onKeyDown && this.props.onKeyDown(evt);
+        this.activateRipple(evt);
+    };
+    Ripple.prototype.handleKeyUp = function (evt) {
+        this.props.onKeyUp && this.props.onKeyUp(evt);
+        this.deactivateRipple(evt);
+    };
+    Ripple.prototype.activateRipple = function (evt) {
+        // https://reactjs.org/docs/events.html#event-pooling
+        evt.persist();
+        this.foundation.activate(evt);
+    };
+    Ripple.prototype.deactivateRipple = function (evt) {
+        this.foundation.deactivate(evt);
+    };
+    Ripple.prototype.render = function () {
+        var _a = this.props, children = _a.children, className = _a.className, primary = _a.primary, accent = _a.accent, unbounded = _a.unbounded, surface = _a.surface, rest = __rest(_a, ["children", "className", "primary", "accent", "unbounded", "surface"]);
+        var child = React.Children.only(children);
+        var unboundedProp = unbounded
+            ? { 'data-mdc-ripple-is-unbounded': true }
+            : {};
+        var rippleSurfaceProps = this.surface.props({});
+        var surfaceIsRoot = !(surface instanceof RippleSurface);
+        if (surface instanceof RippleSurface) {
+            surface.setSurfaceProps(rippleSurfaceProps);
+        }
+        var content = React.cloneElement(child, __assign({}, child.props, unboundedProp, this.root.props(__assign({}, rest, (surfaceIsRoot ? rippleSurfaceProps : undefined), { className: base_1.classNames(className, surfaceIsRoot && rippleSurfaceProps.className, {
+                'mdc-ripple-surface': typeof surface === 'boolean' ? surface : surface === undefined,
+                'mdc-ripple-surface--primary': primary,
+                'mdc-ripple-surface--accent': accent
+            }) })), { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }));
+        return React.createElement(React.Fragment, null, content);
+    };
+    Ripple.displayName = 'Ripple';
+    return Ripple;
+}(base_1.FoundationComponent));
+exports.Ripple = Ripple;
+var RippleSurface = /** @class */ (function (_super) {
+    __extends(RippleSurface, _super);
+    function RippleSurface() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            rippleSurfaceProps: { className: '', style: {} }
+        };
+        _this.raf = null;
+        return _this;
+    }
+    RippleSurface.prototype.setSurfaceProps = function (rippleSurfaceProps) {
+        var _this = this;
+        if (JSON.stringify(rippleSurfaceProps) !==
+            JSON.stringify(this.state.rippleSurfaceProps))
+            // this is a sucky hack
+            // the whole Ripple surface thing is annoying as it is
+            // but it throws errors trying to setState while rendering
+            // this avoids the issue, albeit causes another render
+            this.raf = window.requestAnimationFrame(function () {
+                _this.setState({ rippleSurfaceProps: rippleSurfaceProps });
             });
-        };
-        Ripple.prototype.sync = function (props, prevProps) {
-            this.root.setRef(ReactDOM.findDOMNode(this));
-            if (props.unbounded !== prevProps.unbounded) {
-                this.foundation.setUnbounded(props.unbounded);
+    };
+    RippleSurface.prototype.componentWillUnmount = function () {
+        this.raf && window.cancelAnimationFrame(this.raf);
+    };
+    RippleSurface.prototype.render = function () {
+        var _a = this.props, className = _a.className, rest = __rest(_a, ["className"]);
+        return (React.createElement("div", __assign({}, rest, this.state.rippleSurfaceProps, { className: className + " " + (this.state.rippleSurfaceProps.className ||
+                '') })));
+    };
+    return RippleSurface;
+}(React.PureComponent));
+exports.RippleSurface = RippleSurface;
+/**
+ * HOC that adds ripples to any component
+ */
+exports.withRipple = function (_a) {
+    var _b = _a === void 0 ? {} : _a, defaultUnbounded = _b.unbounded, defaultAccent = _b.accent, _c = _b.surface, defaultSurface = _c === void 0 ? true : _c;
+    return function (Component) {
+        var WithRippleComponent = provider_1.withProviderContext()(React.forwardRef(function (_a, ref) {
+            var providerContext = _a.providerContext, _b = _a.ripple, ripple = _b === void 0 ? providerContext.ripple : _b, rest = __rest(_a, ["providerContext", "ripple"]);
+            var rippleOptions = typeof ripple !== 'object' ? {} : ripple;
+            if (rest.accent || rest.unbounded || rest.surface) {
+                base_1.deprecationWarning("'accent', 'unbounded', and 'surface' have been deprecated as indiviudal props. Please pass an options object to the ripple prop directly. ripple={{accent: true, unbounded: true}} ");
+                rippleOptions.accent = rest.accent || rippleOptions.accent;
+                rippleOptions.unbounded = rest.unbounded || rippleOptions.unbounded;
+                rippleOptions.surface = rest.surface || rippleOptions.surface;
             }
-        };
-        Ripple.prototype.handleFocus = function (evt) {
-            this.props.onFocus && this.props.onFocus(evt);
-            this.foundation.handleFocus();
-        };
-        Ripple.prototype.handleBlur = function (evt) {
-            this.props.onBlur && this.props.onBlur(evt);
-            this.foundation.handleBlur();
-        };
-        Ripple.prototype.handleMouseDown = function (evt) {
-            this.props.onMouseDown && this.props.onMouseDown(evt);
-            this.activateRipple(evt);
-        };
-        Ripple.prototype.handleMouseUp = function (evt) {
-            this.props.onMouseUp && this.props.onMouseUp(evt);
-            this.deactivateRipple(evt);
-        };
-        Ripple.prototype.handleTouchStart = function (evt) {
-            this.props.onTouchStart && this.props.onTouchStart(evt);
-            this.activateRipple(evt);
-        };
-        Ripple.prototype.handleTouchEnd = function (evt) {
-            this.props.onTouchEnd && this.props.onTouchEnd(evt);
-            this.deactivateRipple(evt);
-        };
-        Ripple.prototype.handleKeyDown = function (evt) {
-            this.props.onKeyDown && this.props.onKeyDown(evt);
-            this.activateRipple(evt);
-        };
-        Ripple.prototype.handleKeyUp = function (evt) {
-            this.props.onKeyUp && this.props.onKeyUp(evt);
-            this.deactivateRipple(evt);
-        };
-        Ripple.prototype.activateRipple = function (evt) {
-            // https://reactjs.org/docs/events.html#event-pooling
-            evt.persist();
-            this.foundation.activate(evt);
-        };
-        Ripple.prototype.deactivateRipple = function (evt) {
-            this.foundation.deactivate(evt);
-        };
-        Ripple.prototype.render = function () {
-            var _a = this.props, children = _a.children, className = _a.className, primary = _a.primary, accent = _a.accent, unbounded = _a.unbounded, surface = _a.surface, rest = __rest(_a, ["children", "className", "primary", "accent", "unbounded", "surface"]);
-            var child = React.Children.only(children);
-            var unboundedProp = unbounded
-                ? { 'data-mdc-ripple-is-unbounded': true }
-                : {};
-            var rippleSurfaceProps = this.surface.props({});
-            var surfaceIsRoot = !(surface instanceof RippleSurface);
-            if (surface instanceof RippleSurface) {
-                surface.setSurfaceProps(rippleSurfaceProps);
+            if (ripple) {
+                return (React.createElement(Ripple, __assign({}, rest, { accent: rippleOptions.accent || defaultAccent, unbounded: rippleOptions.unbounded || defaultUnbounded, surface: rippleOptions.surface || defaultSurface }),
+                    React.createElement(Component, __assign({}, rest, { ref: ref }))));
             }
-            var content = React.cloneElement(child, __assign({}, child.props, unboundedProp, this.root.props(__assign({}, rest, (surfaceIsRoot ? rippleSurfaceProps : undefined), { className: base_1.classNames(className, surfaceIsRoot && rippleSurfaceProps.className, {
-                    'mdc-ripple-surface': typeof surface === 'boolean' ? surface : surface === undefined,
-                    'mdc-ripple-surface--primary': primary,
-                    'mdc-ripple-surface--accent': accent
-                }) })), { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }));
-            return React.createElement(React.Fragment, null, content);
-        };
-        Ripple.displayName = 'Ripple';
-        return Ripple;
-    }(base_1.FoundationComponent));
-    exports.Ripple = Ripple;
-    var RippleSurface = /** @class */ (function (_super) {
-        __extends(RippleSurface, _super);
-        function RippleSurface() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.state = {
-                rippleSurfaceProps: { className: '', style: {} }
-            };
-            _this.raf = null;
-            return _this;
-        }
-        RippleSurface.prototype.setSurfaceProps = function (rippleSurfaceProps) {
-            var _this = this;
-            if (JSON.stringify(rippleSurfaceProps) !==
-                JSON.stringify(this.state.rippleSurfaceProps))
-                // this is a sucky hack
-                // the whole Ripple surface thing is annoying as it is
-                // but it throws errors trying to setState while rendering
-                // this avoids the issue, albeit causes another render
-                this.raf = window.requestAnimationFrame(function () {
-                    _this.setState({ rippleSurfaceProps: rippleSurfaceProps });
-                });
-        };
-        RippleSurface.prototype.componentWillUnmount = function () {
-            this.raf && window.cancelAnimationFrame(this.raf);
-        };
-        RippleSurface.prototype.render = function () {
-            var _a = this.props, className = _a.className, rest = __rest(_a, ["className"]);
-            return (React.createElement("div", __assign({}, rest, this.state.rippleSurfaceProps, { className: className + " " + (this.state.rippleSurfaceProps.className ||
-                    '') })));
-        };
-        return RippleSurface;
-    }(React.PureComponent));
-    exports.RippleSurface = RippleSurface;
-    /**
-     * HOC that adds ripples to any component
-     */
-    exports.withRipple = function (_a) {
-        var _b = _a === void 0 ? {} : _a, defaultUnbounded = _b.unbounded, defaultAccent = _b.accent, _c = _b.surface, defaultSurface = _c === void 0 ? true : _c;
-        return function (Component) {
-            var WithRippleComponent = provider_1.withProviderContext()(React.forwardRef(function (_a, ref) {
-                var providerContext = _a.providerContext, _b = _a.ripple, ripple = _b === void 0 ? providerContext.ripple : _b, rest = __rest(_a, ["providerContext", "ripple"]);
-                var rippleOptions = typeof ripple !== 'object' ? {} : ripple;
-                if (rest.accent || rest.unbounded || rest.surface) {
-                    base_1.deprecationWarning("'accent', 'unbounded', and 'surface' have been deprecated as indiviudal props. Please pass an options object to the ripple prop directly. ripple={{accent: true, unbounded: true}} ");
-                    rippleOptions.accent = rest.accent || rippleOptions.accent;
-                    rippleOptions.unbounded = rest.unbounded || rippleOptions.unbounded;
-                    rippleOptions.surface = rest.surface || rippleOptions.surface;
-                }
-                if (ripple) {
-                    return (React.createElement(Ripple, __assign({}, rest, { accent: rippleOptions.accent || defaultAccent, unbounded: rippleOptions.unbounded || defaultUnbounded, surface: rippleOptions.surface || defaultSurface }),
-                        React.createElement(Component, __assign({}, rest, { ref: ref }))));
-                }
-                return React.createElement(Component, __assign({}, rest, { ref: ref }));
-            }));
-            WithRippleComponent.displayName = "withRipple(" + (Component.displayName ||
-                'Unknown') + ")";
-            return WithRippleComponent;
-        };
+            return React.createElement(Component, __assign({}, rest, { ref: ref }));
+        }));
+        WithRippleComponent.displayName = "withRipple(" + (Component.displayName ||
+            'Unknown') + ")";
+        return WithRippleComponent;
     };
-});
+};

next/index.js

@@ -131,2 +131,4 @@ var __extends = (this && this.__extends) || (function () {
     Ripple.prototype.handleKeyDown = function (evt) {
+        // https://reactjs.org/docs/events.html#event-pooling
+        evt.persist();
         this.props.onKeyDown && this.props.onKeyDown(evt);
@@ -133,0 +135,0 @@ this.activateRipple(evt);

package.json

 {
   "name": "@rmwc/ripple",
-  "version": "5.0.2-alpha.0",
+  "version": "5.0.3-alpha.0",
   "description": "RMWC Ripple component",
@@ -35,5 +35,5 @@ "main": "dist/index.js",
     "@material/ripple": "^0.43.0",
-    "@rmwc/base": "^5.0.2-alpha.0"
+    "@rmwc/base": "^5.0.3-alpha.0"
   },
-  "gitHead": "69fbf9ddbdad8cf2b014443c386e1c125a9cee79"
+  "gitHead": "32b316530fb6c1c78e2335bc56d9be85e3cb3752"
 }

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

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

144692

increased by0.49%

Number of package files

13

increased by8.33%

Lines of code

5102

increased by0.83%

Dependency changes

• Updated@rmwc/base@^5.0.3-alpha.0