react-scroll-into-view-if-needed - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

coverage/coverage-final.json

@@ -1,2 +0,2 @@
-{"/Users/justinschrader/Desktop/KOAN/opensource/react-scroll-into-view-if-needed/src/index.js": {"path":"/Users/justinschrader/Desktop/KOAN/opensource/react-scroll-into-view-if-needed/src/index.js","statementMap":{"0":{"start":{"line":55,"column":4},"end":{"line":55,"column":12}},"1":{"start":{"line":56,"column":4},"end":{"line":56,"column":28}},"2":{"start":{"line":60,"column":23},"end":{"line":60,"column":33}},"3":{"start":{"line":61,"column":4},"end":{"line":63,"column":5}},"4":{"start":{"line":62,"column":6},"end":{"line":62,"column":42}},"5":{"start":{"line":67,"column":36},"end":{"line":67,"column":46}},"6":{"start":{"line":68,"column":4},"end":{"line":70,"column":5}},"7":{"start":{"line":69,"column":6},"end":{"line":69,"column":42}},"8":{"start":{"line":74,"column":24},"end":{"line":74,"column":34}},"9":{"start":{"line":75,"column":30},"end":{"line":75,"column":39}},"10":{"start":{"line":76,"column":4},"end":{"line":76,"column":42}},"11":{"start":{"line":86,"column":8},"end":{"line":86,"column":18}},"12":{"start":{"line":87,"column":4},"end":{"line":87,"column":85}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":54,"column":2},"end":{"line":54,"column":3}},"loc":{"start":{"line":54,"column":16},"end":{"line":57,"column":3}},"line":54},"1":{"name":"(anonymous_1)","decl":{"start":{"line":59,"column":2},"end":{"line":59,"column":3}},"loc":{"start":{"line":59,"column":22},"end":{"line":64,"column":3}},"line":59},"2":{"name":"(anonymous_2)","decl":{"start":{"line":66,"column":2},"end":{"line":66,"column":3}},"loc":{"start":{"line":66,"column":33},"end":{"line":71,"column":3}},"line":66},"3":{"name":"(anonymous_3)","decl":{"start":{"line":73,"column":33},"end":{"line":73,"column":34}},"loc":{"start":{"line":73,"column":39},"end":{"line":77,"column":3}},"line":73},"4":{"name":"(anonymous_4)","decl":{"start":{"line":79,"column":2},"end":{"line":79,"column":3}},"loc":{"start":{"line":79,"column":11},"end":{"line":88,"column":3}},"line":79}},"branchMap":{"0":{"loc":{"start":{"line":61,"column":4},"end":{"line":63,"column":5}},"type":"if","locations":[{"start":{"line":61,"column":4},"end":{"line":63,"column":5}},{"start":{"line":61,"column":4},"end":{"line":63,"column":5}}],"line":61},"1":{"loc":{"start":{"line":68,"column":4},"end":{"line":70,"column":5}},"type":"if","locations":[{"start":{"line":68,"column":4},"end":{"line":70,"column":5}},{"start":{"line":68,"column":4},"end":{"line":70,"column":5}}],"line":68},"2":{"loc":{"start":{"line":68,"column":8},"end":{"line":68,"column":30}},"type":"binary-expr","locations":[{"start":{"line":68,"column":8},"end":{"line":68,"column":15}},{"start":{"line":68,"column":19},"end":{"line":68,"column":30}}],"line":68}},"s":{"0":6,"1":6,"2":6,"3":6,"4":4,"5":2,"6":2,"7":1,"8":5,"9":5,"10":5,"11":8,"12":8},"f":{"0":6,"1":6,"2":2,"3":5,"4":8},"b":{"0":[4,2],"1":[1,1],"2":[2,2]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"8ecaaaf0d08a532b4b5006f94f10533f6d5682e8"}
+{"/Users/justin/Documents/opensource/react-scroll-into-view-if-needed/src/index.js": {"path":"/Users/justin/Documents/opensource/react-scroll-into-view-if-needed/src/index.js","statementMap":{"0":{"start":{"line":55,"column":4},"end":{"line":55,"column":12}},"1":{"start":{"line":56,"column":4},"end":{"line":56,"column":28}},"2":{"start":{"line":60,"column":23},"end":{"line":60,"column":33}},"3":{"start":{"line":61,"column":4},"end":{"line":63,"column":5}},"4":{"start":{"line":62,"column":6},"end":{"line":62,"column":42}},"5":{"start":{"line":67,"column":36},"end":{"line":67,"column":46}},"6":{"start":{"line":68,"column":4},"end":{"line":70,"column":5}},"7":{"start":{"line":69,"column":6},"end":{"line":69,"column":42}},"8":{"start":{"line":74,"column":24},"end":{"line":74,"column":34}},"9":{"start":{"line":75,"column":30},"end":{"line":75,"column":39}},"10":{"start":{"line":76,"column":4},"end":{"line":76,"column":42}},"11":{"start":{"line":86,"column":8},"end":{"line":86,"column":18}},"12":{"start":{"line":87,"column":4},"end":{"line":87,"column":85}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":54,"column":2},"end":{"line":54,"column":3}},"loc":{"start":{"line":54,"column":16},"end":{"line":57,"column":3}},"line":54},"1":{"name":"(anonymous_1)","decl":{"start":{"line":59,"column":2},"end":{"line":59,"column":3}},"loc":{"start":{"line":59,"column":22},"end":{"line":64,"column":3}},"line":59},"2":{"name":"(anonymous_2)","decl":{"start":{"line":66,"column":2},"end":{"line":66,"column":3}},"loc":{"start":{"line":66,"column":33},"end":{"line":71,"column":3}},"line":66},"3":{"name":"(anonymous_3)","decl":{"start":{"line":73,"column":33},"end":{"line":73,"column":34}},"loc":{"start":{"line":73,"column":39},"end":{"line":77,"column":3}},"line":73},"4":{"name":"(anonymous_4)","decl":{"start":{"line":79,"column":2},"end":{"line":79,"column":3}},"loc":{"start":{"line":79,"column":11},"end":{"line":88,"column":3}},"line":79}},"branchMap":{"0":{"loc":{"start":{"line":61,"column":4},"end":{"line":63,"column":5}},"type":"if","locations":[{"start":{"line":61,"column":4},"end":{"line":63,"column":5}},{"start":{"line":61,"column":4},"end":{"line":63,"column":5}}],"line":61},"1":{"loc":{"start":{"line":68,"column":4},"end":{"line":70,"column":5}},"type":"if","locations":[{"start":{"line":68,"column":4},"end":{"line":70,"column":5}},{"start":{"line":68,"column":4},"end":{"line":70,"column":5}}],"line":68},"2":{"loc":{"start":{"line":68,"column":8},"end":{"line":68,"column":30}},"type":"binary-expr","locations":[{"start":{"line":68,"column":8},"end":{"line":68,"column":15}},{"start":{"line":68,"column":19},"end":{"line":68,"column":30}}],"line":68}},"s":{"0":6,"1":6,"2":6,"3":6,"4":4,"5":2,"6":2,"7":1,"8":5,"9":5,"10":5,"11":8,"12":8},"f":{"0":6,"1":6,"2":2,"3":5,"4":8},"b":{"0":[4,2],"1":[1,1],"2":[2,2]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"8fb7f45e5d341cbe456fd202339132c85e523836"}
 }

dist/es/index.js

@@ -5,15 +5,7 @@ import { createElement, createRef, PureComponent } from 'react';
 var isElement = function isElement(el) {
-  return el != null && typeof el == 'object' && el.nodeType === 1;
+  return el != null && typeof el == 'object' && (el.nodeType === 1 || el.nodeType === 11);
 };
 
 var hasScrollableSpace = function hasScrollableSpace(el, axis) {
-  if (axis === 'Y') {
-    return el.clientHeight < el.scrollHeight;
-  }
-
-  if (axis === 'X') {
-    return el.clientWidth < el.scrollWidth;
-  }
-
-  return false;
+  return axis === 'X' ? el.clientWidth < el.scrollWidth : el.clientHeight < el.scrollHeight;
 };
@@ -35,3 +27,3 @@
 
-var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, elementEdgeStart, elementEdgeEnd, elementSize) {
+var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
   if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
@@ -42,7 +34,7 @@ return 0;
   if (elementEdgeStart < scrollingEdgeStart && elementSize < scrollingSize || elementEdgeEnd > scrollingEdgeEnd && elementSize > scrollingSize) {
-    return elementEdgeStart - scrollingEdgeStart;
+    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
   }
 
   if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {
-    return elementEdgeEnd - scrollingEdgeEnd;
+    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd;
   }
@@ -77,7 +69,7 @@
   var targetRect = target.getBoundingClientRect();
-  var viewport = document.documentElement;
+  var viewport = document.scrollingElement || document.documentElement;
   var frames = [];
   var parent;
 
-  while (isElement(parent = target.parentNode) && checkBoundary(target)) {
+  while (isElement(parent = target.parentNode || target.host) && checkBoundary(target)) {
     if (isScrollable(parent, skipOverflowHiddenElements) || parent === viewport) {
@@ -129,2 +121,7 @@ frames.push(parent);
     var frameRect = frame.getBoundingClientRect();
+    var frameStyle = getComputedStyle(frame);
+    var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
+    var borderTop = parseInt(frameStyle.borderTopWidth, 10);
+    var borderRight = parseInt(frameStyle.borderRightWidth, 10);
+    var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
     var blockScroll = 0;
@@ -142,4 +139,3 @@ var inlineScroll = 0;
         var offset = Math.min(targetBlock - frameRect.top, frame.scrollHeight - frame.clientHeight - frame.scrollTop);
-        blockScroll = frame.scrollTop + offset;
-        targetBlock -= blockScroll - frame.scrollTop;
+        blockScroll = frame.scrollTop + offset - borderTop;
       }
@@ -159,3 +155,2 @@ }
         blockScroll = frame.scrollTop + _offset;
-        targetBlock += frame.scrollTop - blockScroll;
       }
@@ -174,4 +169,3 @@ }
 
-        blockScroll = frame.scrollTop + _offset2;
-        targetBlock += frame.scrollTop - blockScroll;
+        blockScroll = frame.scrollTop + _offset2 + borderBottom;
       }
@@ -186,10 +180,9 @@ }
       if (viewport === frame) {
-        var _offset3 = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height);
+        var _offset3 = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height);
 
         blockScroll = viewportY + _offset3;
       } else {
-        var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, targetBlock, targetBlock + targetRect.height, targetRect.height);
+        var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom, targetBlock, targetBlock + targetRect.height, targetRect.height);
 
         blockScroll = frame.scrollTop + _offset4;
-        targetBlock -= _offset4;
       }
@@ -208,4 +201,3 @@ }
 
-        inlineScroll = frame.scrollLeft + _offset5;
-        targetInline -= inlineScroll - frame.scrollLeft;
+        inlineScroll = frame.scrollLeft + _offset5 - borderLeft;
       }
@@ -225,3 +217,2 @@ }
         inlineScroll = frame.scrollLeft + _offset6;
-        targetInline += frame.scrollLeft - inlineScroll;
       }
@@ -240,4 +231,3 @@ }
 
-        inlineScroll = frame.scrollLeft + _offset7;
-        targetInline += frame.scrollLeft - inlineScroll;
+        inlineScroll = frame.scrollLeft + _offset7 + borderRight;
       }
@@ -252,13 +242,14 @@ }
       if (viewport === frame) {
-        var _offset8 = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width);
+        var _offset8 = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width);
 
         inlineScroll = viewportX + _offset8;
       } else {
-        var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, targetInline, targetInline + targetRect.width, targetRect.width);
+        var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight, targetInline, targetInline + targetRect.width, targetRect.width);
 
         inlineScroll = frame.scrollLeft + _offset9;
-        targetInline -= _offset9;
       }
     }
 
+    targetBlock += frame.scrollTop - blockScroll;
+    targetInline += frame.scrollLeft - inlineScroll;
     return {
@@ -274,2 +265,3 @@ el: frame,
 var supportsScrollBehavior;
+var scrollingElement;
 
@@ -289,4 +281,8 @@ var isFunction = function isFunction(arg) {
 
+  if (!scrollingElement) {
+    scrollingElement = document.scrollingElement || document.documentElement;
+  }
+
   if (supportsScrollBehavior === undefined) {
-    supportsScrollBehavior = 'scrollBehavior' in document.documentElement.style;
+    supportsScrollBehavior = 'scrollBehavior' in scrollingElement.style;
   }
@@ -306,3 +302,3 @@
     } else {
-      if (el === document.documentElement) {
+      if (el === scrollingElement) {
         window.scrollTo(left, top);
@@ -309,0 +305,0 @@ } else {

dist/umd/index.js

@@ -10,15 +10,7 @@ (function (global, factory) {
   var isElement = function isElement(el) {
-    return el != null && typeof el == 'object' && el.nodeType === 1;
+    return el != null && typeof el == 'object' && (el.nodeType === 1 || el.nodeType === 11);
   };
 
   var hasScrollableSpace = function hasScrollableSpace(el, axis) {
-    if (axis === 'Y') {
-      return el.clientHeight < el.scrollHeight;
-    }
-
-    if (axis === 'X') {
-      return el.clientWidth < el.scrollWidth;
-    }
-
-    return false;
+    return axis === 'X' ? el.clientWidth < el.scrollWidth : el.clientHeight < el.scrollHeight;
   };
@@ -40,3 +32,3 @@
 
-  var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, elementEdgeStart, elementEdgeEnd, elementSize) {
+  var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
     if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
@@ -47,7 +39,7 @@ return 0;
     if (elementEdgeStart < scrollingEdgeStart && elementSize < scrollingSize || elementEdgeEnd > scrollingEdgeEnd && elementSize > scrollingSize) {
-      return elementEdgeStart - scrollingEdgeStart;
+      return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
     }
 
     if (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize || elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize) {
-      return elementEdgeEnd - scrollingEdgeEnd;
+      return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd;
     }
@@ -82,7 +74,7 @@
     var targetRect = target.getBoundingClientRect();
-    var viewport = document.documentElement;
+    var viewport = document.scrollingElement || document.documentElement;
     var frames = [];
     var parent;
 
-    while (isElement(parent = target.parentNode) && checkBoundary(target)) {
+    while (isElement(parent = target.parentNode || target.host) && checkBoundary(target)) {
       if (isScrollable(parent, skipOverflowHiddenElements) || parent === viewport) {
@@ -134,2 +126,7 @@ frames.push(parent);
       var frameRect = frame.getBoundingClientRect();
+      var frameStyle = getComputedStyle(frame);
+      var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
+      var borderTop = parseInt(frameStyle.borderTopWidth, 10);
+      var borderRight = parseInt(frameStyle.borderRightWidth, 10);
+      var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
       var blockScroll = 0;
@@ -147,4 +144,3 @@ var inlineScroll = 0;
           var offset = Math.min(targetBlock - frameRect.top, frame.scrollHeight - frame.clientHeight - frame.scrollTop);
-          blockScroll = frame.scrollTop + offset;
-          targetBlock -= blockScroll - frame.scrollTop;
+          blockScroll = frame.scrollTop + offset - borderTop;
         }
@@ -164,3 +160,2 @@ }
           blockScroll = frame.scrollTop + _offset;
-          targetBlock += frame.scrollTop - blockScroll;
         }
@@ -179,4 +174,3 @@ }
 
-          blockScroll = frame.scrollTop + _offset2;
-          targetBlock += frame.scrollTop - blockScroll;
+          blockScroll = frame.scrollTop + _offset2 + borderBottom;
         }
@@ -191,10 +185,9 @@ }
         if (viewport === frame) {
-          var _offset3 = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height);
+          var _offset3 = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height);
 
           blockScroll = viewportY + _offset3;
         } else {
-          var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, targetBlock, targetBlock + targetRect.height, targetRect.height);
+          var _offset4 = alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom, targetBlock, targetBlock + targetRect.height, targetRect.height);
 
           blockScroll = frame.scrollTop + _offset4;
-          targetBlock -= _offset4;
         }
@@ -213,4 +206,3 @@ }
 
-          inlineScroll = frame.scrollLeft + _offset5;
-          targetInline -= inlineScroll - frame.scrollLeft;
+          inlineScroll = frame.scrollLeft + _offset5 - borderLeft;
         }
@@ -230,3 +222,2 @@ }
           inlineScroll = frame.scrollLeft + _offset6;
-          targetInline += frame.scrollLeft - inlineScroll;
         }
@@ -245,4 +236,3 @@ }
 
-          inlineScroll = frame.scrollLeft + _offset7;
-          targetInline += frame.scrollLeft - inlineScroll;
+          inlineScroll = frame.scrollLeft + _offset7 + borderRight;
         }
@@ -257,13 +247,14 @@ }
         if (viewport === frame) {
-          var _offset8 = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width);
+          var _offset8 = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width);
 
           inlineScroll = viewportX + _offset8;
         } else {
-          var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, targetInline, targetInline + targetRect.width, targetRect.width);
+          var _offset9 = alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight, targetInline, targetInline + targetRect.width, targetRect.width);
 
           inlineScroll = frame.scrollLeft + _offset9;
-          targetInline -= _offset9;
         }
       }
 
+      targetBlock += frame.scrollTop - blockScroll;
+      targetInline += frame.scrollLeft - inlineScroll;
       return {
@@ -279,2 +270,3 @@ el: frame,
   var supportsScrollBehavior;
+  var scrollingElement;
 
@@ -294,4 +286,8 @@ var isFunction = function isFunction(arg) {
 
+    if (!scrollingElement) {
+      scrollingElement = document.scrollingElement || document.documentElement;
+    }
+
     if (supportsScrollBehavior === undefined) {
-      supportsScrollBehavior = 'scrollBehavior' in document.documentElement.style;
+      supportsScrollBehavior = 'scrollBehavior' in scrollingElement.style;
     }
@@ -311,3 +307,3 @@
       } else {
-        if (el === document.documentElement) {
+        if (el === scrollingElement) {
           window.scrollTo(left, top);
@@ -314,0 +310,0 @@ } else {

package.json

 {
   "name": "react-scroll-into-view-if-needed",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A thin component wrapper around scroll-into-view-if-needed",
@@ -38,3 +38,3 @@ "main": "dist/umd/index.js",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react": "^7.8.2",
     "jest": "^22.4.3",
@@ -48,3 +48,3 @@ "prop-types": "^15.6.1",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "scroll-into-view-if-needed": "^2.2.0"
+    "scroll-into-view-if-needed": "^2.2.2"
   },
@@ -51,0 +51,0 @@ "scripts": {

README.md

@@ -36,3 +36,3 @@ [![Build Status](https://travis-ci.org/icd2k3/react-scroll-into-view-if-needed.svg?branch=master)](https://travis-ci.org/icd2k3/react-scroll-into-view-if-needed)
 
-Full list of options are described [here](https://www.npmjs.com/package/scroll-into-view-if-needed#api)
+Full list of options are described [here](https://www.npmjs.com/package/scroll-into-view-if-needed#options)
 
@@ -39,0 +39,0 @@ ```js

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

Worsened metrics

Total package byte prevSize

536792

decreased by-24.73%

Number of package files

34

decreased by-20.93%

Lines of code

1771

decreased by-0.34%

No dependency changes