@leafygreen-ui/ripple - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

CHANGELOG.md

 # @leafygreen-ui/ripple
 
+## 1.1.6
+
+### Patch Changes
+
+- ae5421cf6: Updates components to use internal transition tokens
+- Updated dependencies [ae5421cf6]
+  - @leafygreen-ui/tokens@1.4.0
+
 ## 1.1.5
@@ -4,0 +12,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-var e=function(){var e,n;if("undefined"!=typeof window){var t={setRippleListener:!1,registeredRippleElements:new WeakMap};return null!==(n=(e=window).__LEAFYGREEN_UTILS__)&&void 0!==n||(e.__LEAFYGREEN_UTILS__={modules:{}}),window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]=t,window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]}}();function n(n){null!=e&&e.registeredRippleElements.has(n.target)&&function(n){var t=n.target,i=null==e?void 0:e.registeredRippleElements.get(t);if(!t||!i)return;var o=i.backgroundColor,r=t.getBoundingClientRect(),a=document.createElement("span");a.className="lg-ui-ripple",a.style.height=a.style.width=Math.max(r.width,r.height)+"px",t.appendChild(a);var s=n.pageY-r.top-a.offsetHeight/2-document.body.scrollTop,l=n.pageX-r.left-a.offsetWidth/2-document.body.scrollLeft;a.style.top=s+"px",a.style.left=l+"px",a.style.background=o,setTimeout((function(){a.remove()}),750)}(n)}function t(t,o){if(e){if(e.registeredRippleElements.set(t,o),!e.setRippleListener){document.addEventListener("click",n,{passive:!0});var r=document.createElement("style");r.innerHTML=i,document.head.append(r),e.setRippleListener=!0}return function(){e.registeredRippleElements.delete(t)}}}var i="\n  @-webkit-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ".concat(300,"ms;\n      opacity: 0;\n    }\n  }\n\n  @-moz-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(300,"ms;\n      opacity: 0;\n    }\n  }\n\n  @keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(300,"ms;\n      opacity: 0;\n    }\n  }\n\n  .lg-ui-ripple {\n    position: absolute;\n    border-radius: 100%;\n    transform: scale(0.2);\n    opacity: 0;\n    pointer-events: none;\n    // Ensures that text is shown above ripple effect\n    z-index: -1;\n    -webkit-animation: lg-ui-ripple .75s ease-out;\n    -moz-animation: lg-ui-ripple .75s ease-out;\n    animation: lg-ui-ripple .75s ease-out;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .lg-ui-ripple {\n      animation: none;\n      transform: none;\n    }\n  }\n");export{t as registerRipple};
+import{transitionDuration as e}from"@leafygreen-ui/tokens";var n=e.slower,t=function(){var e,n;if("undefined"!=typeof window){var t={setRippleListener:!1,registeredRippleElements:new WeakMap};return null!==(n=(e=window).__LEAFYGREEN_UTILS__)&&void 0!==n||(e.__LEAFYGREEN_UTILS__={modules:{}}),window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]=t,window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]}}();function i(e){null!=t&&t.registeredRippleElements.has(e.target)&&function(e){var n=e.target,i=null==t?void 0:t.registeredRippleElements.get(n);if(!n||!i)return;var o=i.backgroundColor,r=n.getBoundingClientRect(),a=document.createElement("span");a.className="lg-ui-ripple",a.style.height=a.style.width=Math.max(r.width,r.height)+"px",n.appendChild(a);var s=e.pageY-r.top-a.offsetHeight/2-document.body.scrollTop,l=e.pageX-r.left-a.offsetWidth/2-document.body.scrollLeft;a.style.top=s+"px",a.style.left=l+"px",a.style.background=o,setTimeout((function(){a.remove()}),750)}(e)}function o(e,n){if(t){if(t.registeredRippleElements.set(e,n),!t.setRippleListener){document.addEventListener("click",i,{passive:!0});var o=document.createElement("style");o.innerHTML=r,document.head.append(o),t.setRippleListener=!0}return function(){t.registeredRippleElements.delete(e)}}}var r="\n  @-webkit-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ".concat(n,"ms;\n      opacity: 0;\n    }\n  }\n\n  @-moz-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(n,"ms;\n      opacity: 0;\n    }\n  }\n\n  @keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(n,"ms;\n      opacity: 0;\n    }\n  }\n\n  .lg-ui-ripple {\n    position: absolute;\n    border-radius: 100%;\n    transform: scale(0.2);\n    opacity: 0;\n    pointer-events: none;\n    // Ensures that text is shown above ripple effect\n    z-index: -1;\n    -webkit-animation: lg-ui-ripple .75s ease-out;\n    -moz-animation: lg-ui-ripple .75s ease-out;\n    animation: lg-ui-ripple .75s ease-out;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .lg-ui-ripple {\n      animation: none;\n      transform: none;\n    }\n  }\n");export{o as registerRipple};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/ripple"]={})}(this,(function(e){"use strict";var n=function(){var e,n;if("undefined"!=typeof window){var t={setRippleListener:!1,registeredRippleElements:new WeakMap};return null!==(n=(e=window).__LEAFYGREEN_UTILS__)&&void 0!==n||(e.__LEAFYGREEN_UTILS__={modules:{}}),window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]=t,window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]}}();function t(e){null!=n&&n.registeredRippleElements.has(e.target)&&function(e){var t=e.target,i=null==n?void 0:n.registeredRippleElements.get(t);if(!t||!i)return;var o=i.backgroundColor,r=t.getBoundingClientRect(),s=document.createElement("span");s.className="lg-ui-ripple",s.style.height=s.style.width=Math.max(r.width,r.height)+"px",t.appendChild(s);var l=e.pageY-r.top-s.offsetHeight/2-document.body.scrollTop,p=e.pageX-r.left-s.offsetWidth/2-document.body.scrollLeft;s.style.top=l+"px",s.style.left=p+"px",s.style.background=o,setTimeout((function(){s.remove()}),750)}(e)}var i="\n  @-webkit-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ".concat(300,"ms;\n      opacity: 0;\n    }\n  }\n\n  @-moz-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(300,"ms;\n      opacity: 0;\n    }\n  }\n\n  @keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(300,"ms;\n      opacity: 0;\n    }\n  }\n\n  .lg-ui-ripple {\n    position: absolute;\n    border-radius: 100%;\n    transform: scale(0.2);\n    opacity: 0;\n    pointer-events: none;\n    // Ensures that text is shown above ripple effect\n    z-index: -1;\n    -webkit-animation: lg-ui-ripple .75s ease-out;\n    -moz-animation: lg-ui-ripple .75s ease-out;\n    animation: lg-ui-ripple .75s ease-out;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .lg-ui-ripple {\n      animation: none;\n      transform: none;\n    }\n  }\n");e.registerRipple=function(e,o){if(n){if(n.registeredRippleElements.set(e,o),!n.setRippleListener){document.addEventListener("click",t,{passive:!0});var r=document.createElement("style");r.innerHTML=i,document.head.append(r),n.setRippleListener=!0}return function(){n.registeredRippleElements.delete(e)}}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@leafygreen-ui/tokens")):"function"==typeof define&&define.amd?define(["exports","@leafygreen-ui/tokens"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/ripple"]={},e["@leafygreen-ui/tokens"])}(this,(function(e,n){"use strict";var t=n.transitionDuration.slower,i=function(){var e,n;if("undefined"!=typeof window){var t={setRippleListener:!1,registeredRippleElements:new WeakMap};return null!==(n=(e=window).__LEAFYGREEN_UTILS__)&&void 0!==n||(e.__LEAFYGREEN_UTILS__={modules:{}}),window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]=t,window.__LEAFYGREEN_UTILS__.modules["@leafygreen-ui/ripple"]}}();function o(e){null!=i&&i.registeredRippleElements.has(e.target)&&function(e){var n=e.target,t=null==i?void 0:i.registeredRippleElements.get(n);if(!n||!t)return;var o=t.backgroundColor,r=n.getBoundingClientRect(),s=document.createElement("span");s.className="lg-ui-ripple",s.style.height=s.style.width=Math.max(r.width,r.height)+"px",n.appendChild(s);var a=e.pageY-r.top-s.offsetHeight/2-document.body.scrollTop,l=e.pageX-r.left-s.offsetWidth/2-document.body.scrollLeft;s.style.top=a+"px",s.style.left=l+"px",s.style.background=o,setTimeout((function(){s.remove()}),750)}(e)}var r="\n  @-webkit-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ".concat(t,"ms;\n      opacity: 0;\n    }\n  }\n\n  @-moz-keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(t,"ms;\n      opacity: 0;\n    }\n  }\n\n  @keyframes lg-ui-ripple {\n    from {\n      opacity:1;\n    }\n    to {\n      transform: scale(2);\n      transition: opacity ").concat(t,"ms;\n      opacity: 0;\n    }\n  }\n\n  .lg-ui-ripple {\n    position: absolute;\n    border-radius: 100%;\n    transform: scale(0.2);\n    opacity: 0;\n    pointer-events: none;\n    // Ensures that text is shown above ripple effect\n    z-index: -1;\n    -webkit-animation: lg-ui-ripple .75s ease-out;\n    -moz-animation: lg-ui-ripple .75s ease-out;\n    animation: lg-ui-ripple .75s ease-out;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .lg-ui-ripple {\n      animation: none;\n      transform: none;\n    }\n  }\n");e.registerRipple=function(e,n){if(i){if(i.registeredRippleElements.set(e,n),!i.setRippleListener){document.addEventListener("click",o,{passive:!0});var t=document.createElement("style");t.innerHTML=r,document.head.append(t),i.setRippleListener=!0}return function(){i.registeredRippleElements.delete(e)}}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/ripple",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "leafyGreen UI Kit Ripple",
@@ -22,5 +22,7 @@ "main": "./dist/index.js",
   },
-  "dependencies": {},
+  "dependencies": {
+    "@leafygreen-ui/tokens": "^1.4.0"
+  },
   "devDependencies": {
-    "@leafygreen-ui/lib": "^9.5.1"
+    "@leafygreen-ui/lib": "^10.0.0"
   },
@@ -35,2 +37,2 @@ "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/ripple",
   }
-}
+}

src/registerRipple.ts

 import { getRippleGlobalNamespace } from './getRippleGlobalNamespace';
 import { Options } from './utils';
+import { transitionDuration } from '@leafygreen-ui/tokens';
 
-const TRANSITION_TIME = 300;
+const TRANSITION_TIME = transitionDuration.slower;
 const RIPPLE_NAMESPACE = getRippleGlobalNamespace();
@@ -6,0 +7,0 @@

tsconfig.json

@@ -14,4 +14,7 @@ {
       "path": "../lib"
+    },
+    {
+      "path": "../tokens"
     }
   ]
-}
+}

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69311

increased by2.88%

Lines of code

335

increased by1.21%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@leafygreen-ui/tokens@^1.4.0

• + Added@leafygreen-ui/palette@3.4.7(transitive)

• + Added@leafygreen-ui/tokens@1.4.1(transitive)