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

Comparing version 2.2.7 to 2.2.8

compute.js

@@ -10,13 +10,9 @@ "use strict";
 
-var isElement = function isElement(el) {
+function isElement(el) {
   return el != null && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 11);
-};
+}
 
-var hasScrollableSpace = function hasScrollableSpace(el, axis) {
-  return axis === 'X' ? el.clientWidth < el.scrollWidth : el.clientHeight < el.scrollHeight;
-};
+function canOverflow(el, axis, skipOverflowHiddenElements) {
+  var overflowValue = getComputedStyle(el, null)[axis];
 
-var canOverflow = function canOverflow(el, axis, skipOverflowHiddenElements) {
-  var overflowValue = getComputedStyle(el, null)['overflow' + axis];
-
   if (skipOverflowHiddenElements && overflowValue === 'hidden') {
@@ -27,9 +23,9 @@ return false;
   return overflowValue !== 'visible' && overflowValue !== 'clip';
-};
+}
 
-var isScrollable = function isScrollable(el, skipOverflowHiddenElements) {
-  return el === (0, _viewport.default)() || hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y', skipOverflowHiddenElements) || hasScrollableSpace(el, 'X') && canOverflow(el, 'X', skipOverflowHiddenElements);
-};
+function isScrollable(el, skipOverflowHiddenElements) {
+  return el === (0, _viewport.default)() || el.clientHeight < el.scrollHeight && canOverflow(el, 'overflowY', skipOverflowHiddenElements) || el.clientWidth < el.scrollWidth && canOverflow(el, 'overflowX', skipOverflowHiddenElements);
+}
 
-var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
+function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
   if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
@@ -48,19 +44,10 @@ return 0;
   return 0;
-};
+}
 
 var _default = function _default(target, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options = options,
-      _options$scrollMode = _options.scrollMode,
-      scrollMode = _options$scrollMode === void 0 ? 'always' : _options$scrollMode,
-      _options$block = _options.block,
-      block = _options$block === void 0 ? 'center' : _options$block,
-      _options$inline = _options.inline,
-      inline = _options$inline === void 0 ? 'nearest' : _options$inline,
-      boundary = _options.boundary,
-      _options$skipOverflow = _options.skipOverflowHiddenElements,
-      skipOverflowHiddenElements = _options$skipOverflow === void 0 ? false : _options$skipOverflow;
+  var scrollMode = options.scrollMode,
+      block = options.block,
+      inline = options.inline,
+      boundary = options.boundary,
+      skipOverflowHiddenElements = options.skipOverflowHiddenElements;
   var checkBoundary = typeof boundary === 'function' ? boundary : function (node) {
@@ -122,4 +109,4 @@ return node !== boundary;
 
-  var targetBlock;
-  var targetInline;
+  var targetBlock = block === 'start' ? targetRect.top : block === 'end' ? targetRect.bottom : block === 'nearest' ? targetRect.top : targetRect.top + targetRect.height / 2;
+  var targetInline = inline === 'start' ? targetRect.left : inline === 'center' ? targetRect.left + targetRect.width / 2 : inline === 'end' ? targetRect.right : targetRect.left;
   var computations = frames.map(function (frame) {
@@ -138,116 +125,21 @@ var frameRect = frame.getBoundingClientRect();
     if (block === 'start') {
-      if (!targetBlock) {
-        targetBlock = targetRect.top;
-      }
-
-      if (viewport === frame) {
-        blockScroll = viewportY + targetBlock;
-      } else {
-        var offset = Math.min(targetBlock - frameRect.top, frame.scrollHeight - frame.clientHeight - frame.scrollTop);
-        blockScroll = frame.scrollTop + offset - borderTop;
-      }
+      blockScroll = viewport === frame ? viewportY + targetBlock : targetBlock - frameRect.top - borderTop;
+    } else if (block === 'end') {
+      blockScroll = viewport === frame ? viewportY + (targetBlock - viewportHeight) : frame.scrollTop - (frameRect.bottom - targetBlock) + borderBottom + scrollbarHeight;
+    } else if (block === 'nearest') {
+      blockScroll = viewport === frame ? viewportY + alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height) : frame.scrollTop + alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
+    } else {
+      blockScroll = viewport === frame ? viewportY + targetBlock - viewportHeight / 2 : frame.scrollTop - (frameRect.top + frameRect.height / 2 - targetBlock);
     }
 
-    if (block === 'center') {
-      if (!targetBlock) {
-        targetBlock = targetRect.top + targetRect.height / 2;
-      }
-
-      if (viewport === frame) {
-        blockScroll = viewportY + targetBlock - viewportHeight / 2;
-      } else {
-        var _offset = 0 - Math.min(frameRect.top + frameRect.height / 2 - targetBlock, frame.scrollTop);
-
-        blockScroll = frame.scrollTop + _offset;
-      }
-    }
-
-    if (block === 'end') {
-      if (!targetBlock) {
-        targetBlock = targetRect.bottom;
-      }
-
-      if (viewport === frame) {
-        blockScroll = viewportY + targetBlock - viewportHeight;
-      } else {
-        var _offset2 = 0 - Math.min(frameRect.bottom - targetBlock, frame.scrollTop);
-
-        blockScroll = frame.scrollTop + _offset2 + borderBottom + scrollbarHeight;
-      }
-    }
-
-    if (block === 'nearest') {
-      if (!targetBlock) {
-        targetBlock = targetRect.top;
-      }
-
-      if (viewport === frame) {
-        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, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
-
-        blockScroll = frame.scrollTop + _offset4;
-      }
-    }
-
     if (inline === 'start') {
-      if (!targetInline) {
-        targetInline = targetRect.left;
-      }
-
-      if (viewport === frame) {
-        inlineScroll = viewportX + targetInline;
-      } else {
-        var _offset5 = Math.min(targetInline - frameRect.left, frame.scrollHeight - frame.clientLeft - frame.scrollLeft);
-
-        inlineScroll = frame.scrollLeft + _offset5 - borderLeft;
-      }
+      inlineScroll = viewport === frame ? viewportX + targetInline : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft;
+    } else if (inline === 'center') {
+      inlineScroll = viewport === frame ? viewportX + targetInline - viewportWidth / 2 : frame.scrollLeft - (frameRect.left + frameRect.width / 2 - targetInline);
+    } else if (inline === 'end') {
+      inlineScroll = viewport === frame ? viewportX + (targetInline - viewportWidth) : frame.scrollLeft - (frameRect.right - targetInline) + borderRight + scrollbarWidth;
+    } else {
+      inlineScroll = viewport === frame ? viewportX + alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width) : frame.scrollLeft + alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
     }
 
-    if (inline === 'center') {
-      if (!targetInline) {
-        targetInline = targetRect.left + targetRect.width / 2;
-      }
-
-      if (viewport === frame) {
-        inlineScroll = viewportX + targetInline - viewportWidth / 2;
-      } else {
-        var _offset6 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
-
-        inlineScroll = frame.scrollLeft + _offset6;
-      }
-    }
-
-    if (inline === 'end') {
-      if (!targetInline) {
-        targetInline = targetRect.right;
-      }
-
-      if (viewport === frame) {
-        inlineScroll = viewportX + targetInline - viewportWidth;
-      } else {
-        var _offset7 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
-
-        inlineScroll = frame.scrollLeft + _offset7 + borderRight + scrollbarWidth;
-      }
-    }
-
-    if (inline === 'nearest') {
-      if (!targetInline) {
-        targetInline = targetRect.left;
-      }
-
-      if (viewport === frame) {
-        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, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
-
-        inlineScroll = frame.scrollLeft + _offset9;
-      }
-    }
-
     targetBlock += frame.scrollTop - blockScroll;
@@ -254,0 +146,0 @@ targetInline += frame.scrollLeft - inlineScroll;

es/compute.js

 import getViewport from './viewport';
 
-var isElement = function isElement(el) {
+function isElement(el) {
   return el != null && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 11);
-};
+}
 
-var hasScrollableSpace = function hasScrollableSpace(el, axis) {
-  return axis === 'X' ? el.clientWidth < el.scrollWidth : el.clientHeight < el.scrollHeight;
-};
+function canOverflow(el, axis, skipOverflowHiddenElements) {
+  var overflowValue = getComputedStyle(el, null)[axis];
 
-var canOverflow = function canOverflow(el, axis, skipOverflowHiddenElements) {
-  var overflowValue = getComputedStyle(el, null)['overflow' + axis];
-
   if (skipOverflowHiddenElements && overflowValue === 'hidden') {
@@ -19,9 +15,9 @@ return false;
   return overflowValue !== 'visible' && overflowValue !== 'clip';
-};
+}
 
-var isScrollable = function isScrollable(el, skipOverflowHiddenElements) {
-  return el === getViewport() || hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y', skipOverflowHiddenElements) || hasScrollableSpace(el, 'X') && canOverflow(el, 'X', skipOverflowHiddenElements);
-};
+function isScrollable(el, skipOverflowHiddenElements) {
+  return el === getViewport() || el.clientHeight < el.scrollHeight && canOverflow(el, 'overflowY', skipOverflowHiddenElements) || el.clientWidth < el.scrollWidth && canOverflow(el, 'overflowX', skipOverflowHiddenElements);
+}
 
-var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
+function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
   if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
@@ -40,19 +36,10 @@ return 0;
   return 0;
-};
+}
 
 export default (function (target, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options = options,
-      _options$scrollMode = _options.scrollMode,
-      scrollMode = _options$scrollMode === void 0 ? 'always' : _options$scrollMode,
-      _options$block = _options.block,
-      block = _options$block === void 0 ? 'center' : _options$block,
-      _options$inline = _options.inline,
-      inline = _options$inline === void 0 ? 'nearest' : _options$inline,
-      boundary = _options.boundary,
-      _options$skipOverflow = _options.skipOverflowHiddenElements,
-      skipOverflowHiddenElements = _options$skipOverflow === void 0 ? false : _options$skipOverflow;
+  var scrollMode = options.scrollMode,
+      block = options.block,
+      inline = options.inline,
+      boundary = options.boundary,
+      skipOverflowHiddenElements = options.skipOverflowHiddenElements;
   var checkBoundary = typeof boundary === 'function' ? boundary : function (node) {
@@ -114,4 +101,4 @@ return node !== boundary;
 
-  var targetBlock;
-  var targetInline;
+  var targetBlock = block === 'start' ? targetRect.top : block === 'end' ? targetRect.bottom : block === 'nearest' ? targetRect.top : targetRect.top + targetRect.height / 2;
+  var targetInline = inline === 'start' ? targetRect.left : inline === 'center' ? targetRect.left + targetRect.width / 2 : inline === 'end' ? targetRect.right : targetRect.left;
   var computations = frames.map(function (frame) {
@@ -130,116 +117,21 @@ var frameRect = frame.getBoundingClientRect();
     if (block === 'start') {
-      if (!targetBlock) {
-        targetBlock = targetRect.top;
-      }
-
-      if (viewport === frame) {
-        blockScroll = viewportY + targetBlock;
-      } else {
-        var offset = Math.min(targetBlock - frameRect.top, frame.scrollHeight - frame.clientHeight - frame.scrollTop);
-        blockScroll = frame.scrollTop + offset - borderTop;
-      }
+      blockScroll = viewport === frame ? viewportY + targetBlock : targetBlock - frameRect.top - borderTop;
+    } else if (block === 'end') {
+      blockScroll = viewport === frame ? viewportY + (targetBlock - viewportHeight) : frame.scrollTop - (frameRect.bottom - targetBlock) + borderBottom + scrollbarHeight;
+    } else if (block === 'nearest') {
+      blockScroll = viewport === frame ? viewportY + alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height) : frame.scrollTop + alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
+    } else {
+      blockScroll = viewport === frame ? viewportY + targetBlock - viewportHeight / 2 : frame.scrollTop - (frameRect.top + frameRect.height / 2 - targetBlock);
     }
 
-    if (block === 'center') {
-      if (!targetBlock) {
-        targetBlock = targetRect.top + targetRect.height / 2;
-      }
-
-      if (viewport === frame) {
-        blockScroll = viewportY + targetBlock - viewportHeight / 2;
-      } else {
-        var _offset = 0 - Math.min(frameRect.top + frameRect.height / 2 - targetBlock, frame.scrollTop);
-
-        blockScroll = frame.scrollTop + _offset;
-      }
-    }
-
-    if (block === 'end') {
-      if (!targetBlock) {
-        targetBlock = targetRect.bottom;
-      }
-
-      if (viewport === frame) {
-        blockScroll = viewportY + targetBlock - viewportHeight;
-      } else {
-        var _offset2 = 0 - Math.min(frameRect.bottom - targetBlock, frame.scrollTop);
-
-        blockScroll = frame.scrollTop + _offset2 + borderBottom + scrollbarHeight;
-      }
-    }
-
-    if (block === 'nearest') {
-      if (!targetBlock) {
-        targetBlock = targetRect.top;
-      }
-
-      if (viewport === frame) {
-        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, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
-
-        blockScroll = frame.scrollTop + _offset4;
-      }
-    }
-
     if (inline === 'start') {
-      if (!targetInline) {
-        targetInline = targetRect.left;
-      }
-
-      if (viewport === frame) {
-        inlineScroll = viewportX + targetInline;
-      } else {
-        var _offset5 = Math.min(targetInline - frameRect.left, frame.scrollHeight - frame.clientLeft - frame.scrollLeft);
-
-        inlineScroll = frame.scrollLeft + _offset5 - borderLeft;
-      }
+      inlineScroll = viewport === frame ? viewportX + targetInline : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft;
+    } else if (inline === 'center') {
+      inlineScroll = viewport === frame ? viewportX + targetInline - viewportWidth / 2 : frame.scrollLeft - (frameRect.left + frameRect.width / 2 - targetInline);
+    } else if (inline === 'end') {
+      inlineScroll = viewport === frame ? viewportX + (targetInline - viewportWidth) : frame.scrollLeft - (frameRect.right - targetInline) + borderRight + scrollbarWidth;
+    } else {
+      inlineScroll = viewport === frame ? viewportX + alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width) : frame.scrollLeft + alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
     }
 
-    if (inline === 'center') {
-      if (!targetInline) {
-        targetInline = targetRect.left + targetRect.width / 2;
-      }
-
-      if (viewport === frame) {
-        inlineScroll = viewportX + targetInline - viewportWidth / 2;
-      } else {
-        var _offset6 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
-
-        inlineScroll = frame.scrollLeft + _offset6;
-      }
-    }
-
-    if (inline === 'end') {
-      if (!targetInline) {
-        targetInline = targetRect.right;
-      }
-
-      if (viewport === frame) {
-        inlineScroll = viewportX + targetInline - viewportWidth;
-      } else {
-        var _offset7 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
-
-        inlineScroll = frame.scrollLeft + _offset7 + borderRight + scrollbarWidth;
-      }
-    }
-
-    if (inline === 'nearest') {
-      if (!targetInline) {
-        targetInline = targetRect.left;
-      }
-
-      if (viewport === frame) {
-        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, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
-
-        inlineScroll = frame.scrollLeft + _offset9;
-      }
-    }
-
     targetBlock += frame.scrollTop - blockScroll;
@@ -246,0 +138,0 @@ targetInline += frame.scrollLeft - inlineScroll;

es/index.js

 import compute from './compute';
 import getViewport from './viewport';
 
-var isFunction = function isFunction(arg) {
-  return typeof arg === 'function';
-};
-
-var isOptionsObject = function isOptionsObject(options) {
+function isOptionsObject(options) {
   return options === Object(options) && Object.keys(options).length !== 0;
-};
+}
 
-var defaultBehavior = function defaultBehavior(actions, behavior) {
+function defaultBehavior(actions, behavior) {
   if (behavior === void 0) {
@@ -18,3 +14,2 @@ behavior = 'auto';
   var viewport = getViewport();
-  var supportsScrollBehavior = 'scrollBehavior' in viewport.style;
   actions.forEach(function (_ref) {
@@ -25,3 +20,3 @@ var el = _ref.el,
 
-    if (el.scroll && supportsScrollBehavior) {
+    if (el.scroll && 'scrollBehavior' in viewport.style) {
       el.scroll({
@@ -34,3 +29,3 @@ top: top,
       if (el === viewport) {
-        window.scrollTo(left, top);
+        scrollTo(left, top);
       } else {
@@ -42,20 +37,13 @@ el.scrollTop = top;
   });
-};
+}
 
-var getOptions = function getOptions(options) {
-  if (options === void 0) {
-    options = true;
-  }
-
-  if (options === true || options === null) {
+function getOptions(options) {
+  if (options === false) {
     return {
-      block: 'start',
-      inline: 'nearest'
-    };
-  } else if (options === false) {
-    return {
       block: 'end',
       inline: 'nearest'
     };
-  } else if (isOptionsObject(options)) {
+  }
+
+  if (isOptionsObject(options)) {
     return options;
@@ -68,10 +56,6 @@ }
   };
-};
+}
 
 function scrollIntoView(target, options) {
-  if (options === void 0) {
-    options = true;
-  }
-
-  if (isOptionsObject(options) && isFunction(options.behavior)) {
+  if (isOptionsObject(options) && typeof options.behavior === 'function') {
     return options.behavior(compute(target, options));
@@ -78,0 +62,0 @@ }

es/viewport.js

 var viewport;
 export default (function () {
+  var doc = document;
+
   if (!viewport) {
-    viewport = document.compatMode === 'CSS1Compat' ? document.documentElement : document.scrollingElement || document.documentElement;
+    viewport = doc.compatMode !== 'CSS1Compat' && doc.scrollingElement || doc.documentElement;
   }
@@ -6,0 +8,0 @@

index.js

@@ -12,11 +12,7 @@ "use strict";
 
-var isFunction = function isFunction(arg) {
-  return typeof arg === 'function';
-};
-
-var isOptionsObject = function isOptionsObject(options) {
+function isOptionsObject(options) {
   return options === Object(options) && Object.keys(options).length !== 0;
-};
+}
 
-var defaultBehavior = function defaultBehavior(actions, behavior) {
+function defaultBehavior(actions, behavior) {
   if (behavior === void 0) {
@@ -27,3 +23,2 @@ behavior = 'auto';
   var viewport = (0, _viewport.default)();
-  var supportsScrollBehavior = 'scrollBehavior' in viewport.style;
   actions.forEach(function (_ref) {
@@ -34,3 +29,3 @@ var el = _ref.el,
 
-    if (el.scroll && supportsScrollBehavior) {
+    if (el.scroll && 'scrollBehavior' in viewport.style) {
       el.scroll({
@@ -43,3 +38,3 @@ top: top,
       if (el === viewport) {
-        window.scrollTo(left, top);
+        scrollTo(left, top);
       } else {
@@ -51,20 +46,13 @@ el.scrollTop = top;
   });
-};
+}
 
-var getOptions = function getOptions(options) {
-  if (options === void 0) {
-    options = true;
-  }
-
-  if (options === true || options === null) {
+function getOptions(options) {
+  if (options === false) {
     return {
-      block: 'start',
-      inline: 'nearest'
-    };
-  } else if (options === false) {
-    return {
       block: 'end',
       inline: 'nearest'
     };
-  } else if (isOptionsObject(options)) {
+  }
+
+  if (isOptionsObject(options)) {
     return options;
@@ -77,10 +65,6 @@ }
   };
-};
+}
 
 function scrollIntoView(target, options) {
-  if (options === void 0) {
-    options = true;
-  }
-
-  if (isOptionsObject(options) && isFunction(options.behavior)) {
+  if (isOptionsObject(options) && typeof options.behavior === 'function') {
     return options.behavior((0, _compute.default)(target, options));
@@ -87,0 +71,0 @@ }

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "2.2.7",
+  "version": "2.2.8",
   "main": "index.js",
@@ -32,6 +32,6 @@ "module": "es/index.js",
     "precommit": "lint-staged",
-    "dev": "concurrently 'tsc --watch' 'yarn build:cjs --watch'",
+    "dev": "concurrently 'tsc --noEmit --watch' 'tsc --noEmit -p tests/typescript --watch' 'yarn build:cjs --watch' 'yarn build:es --watch' 'yarn build:umd --watch' 'yarn build:umd.min --watch'",
     "lint": "eslint ./integration-examples",
     "prepublishOnly": "unset npm_config_cafile && yarn build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tests/typescript"
   },
@@ -51,7 +51,7 @@ "devDependencies": {
     "eslint-plugin-import": "2.13.0",
-    "eslint-plugin-react": "7.9.1",
+    "eslint-plugin-react": "7.10.0",
     "flowgen": "1.2.2",
     "husky": "0.14.3",
     "lint-staged": "7.2.0",
-    "prettier": "1.13.5",
+    "prettier": "1.13.6",
     "prettier-package-json": "1.6.0",
@@ -58,0 +58,0 @@ "rimraf": "2.6.2",

typings/compute.d.ts

@@ -13,3 +13,3 @@ declare global {
 import { CustomScrollAction, Options } from './types';
-declare const _default: (target: Element, options?: Options) => CustomScrollAction[];
+declare const _default: (target: Element, options: Options) => CustomScrollAction[];
 export default _default;

umd/scroll-into-view-if-needed.js

@@ -9,4 +9,6 @@ (function (global, factory) {
   var getViewport = (function () {
+    var doc = document;
+
     if (!viewport) {
-      viewport = document.compatMode === 'CSS1Compat' ? document.documentElement : document.scrollingElement || document.documentElement;
+      viewport = doc.compatMode !== 'CSS1Compat' && doc.scrollingElement || doc.documentElement;
     }
@@ -17,13 +19,9 @@
 
-  var isElement = function isElement(el) {
+  function isElement(el) {
     return el != null && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 11);
-  };
+  }
 
-  var hasScrollableSpace = function hasScrollableSpace(el, axis) {
-    return axis === 'X' ? el.clientWidth < el.scrollWidth : el.clientHeight < el.scrollHeight;
-  };
+  function canOverflow(el, axis, skipOverflowHiddenElements) {
+    var overflowValue = getComputedStyle(el, null)[axis];
 
-  var canOverflow = function canOverflow(el, axis, skipOverflowHiddenElements) {
-    var overflowValue = getComputedStyle(el, null)['overflow' + axis];
-
     if (skipOverflowHiddenElements && overflowValue === 'hidden') {
@@ -34,9 +32,9 @@ return false;
     return overflowValue !== 'visible' && overflowValue !== 'clip';
-  };
+  }
 
-  var isScrollable = function isScrollable(el, skipOverflowHiddenElements) {
-    return el === getViewport() || hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y', skipOverflowHiddenElements) || hasScrollableSpace(el, 'X') && canOverflow(el, 'X', skipOverflowHiddenElements);
-  };
+  function isScrollable(el, skipOverflowHiddenElements) {
+    return el === getViewport() || el.clientHeight < el.scrollHeight && canOverflow(el, 'overflowY', skipOverflowHiddenElements) || el.clientWidth < el.scrollWidth && canOverflow(el, 'overflowX', skipOverflowHiddenElements);
+  }
 
-  var alignNearest = function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
+  function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
     if (elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd || elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd) {
@@ -55,19 +53,10 @@ return 0;
     return 0;
-  };
+  }
 
   var compute = (function (target, options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    var _options = options,
-        _options$scrollMode = _options.scrollMode,
-        scrollMode = _options$scrollMode === void 0 ? 'always' : _options$scrollMode,
-        _options$block = _options.block,
-        block = _options$block === void 0 ? 'center' : _options$block,
-        _options$inline = _options.inline,
-        inline = _options$inline === void 0 ? 'nearest' : _options$inline,
-        boundary = _options.boundary,
-        _options$skipOverflow = _options.skipOverflowHiddenElements,
-        skipOverflowHiddenElements = _options$skipOverflow === void 0 ? false : _options$skipOverflow;
+    var scrollMode = options.scrollMode,
+        block = options.block,
+        inline = options.inline,
+        boundary = options.boundary,
+        skipOverflowHiddenElements = options.skipOverflowHiddenElements;
     var checkBoundary = typeof boundary === 'function' ? boundary : function (node) {
@@ -129,4 +118,4 @@ return node !== boundary;
 
-    var targetBlock;
-    var targetInline;
+    var targetBlock = block === 'start' ? targetRect.top : block === 'end' ? targetRect.bottom : block === 'nearest' ? targetRect.top : targetRect.top + targetRect.height / 2;
+    var targetInline = inline === 'start' ? targetRect.left : inline === 'center' ? targetRect.left + targetRect.width / 2 : inline === 'end' ? targetRect.right : targetRect.left;
     var computations = frames.map(function (frame) {
@@ -145,116 +134,21 @@ var frameRect = frame.getBoundingClientRect();
       if (block === 'start') {
-        if (!targetBlock) {
-          targetBlock = targetRect.top;
-        }
-
-        if (viewport === frame) {
-          blockScroll = viewportY + targetBlock;
-        } else {
-          var offset = Math.min(targetBlock - frameRect.top, frame.scrollHeight - frame.clientHeight - frame.scrollTop);
-          blockScroll = frame.scrollTop + offset - borderTop;
-        }
+        blockScroll = viewport === frame ? viewportY + targetBlock : targetBlock - frameRect.top - borderTop;
+      } else if (block === 'end') {
+        blockScroll = viewport === frame ? viewportY + (targetBlock - viewportHeight) : frame.scrollTop - (frameRect.bottom - targetBlock) + borderBottom + scrollbarHeight;
+      } else if (block === 'nearest') {
+        blockScroll = viewport === frame ? viewportY + alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetRect.height, targetRect.height) : frame.scrollTop + alignNearest(frameRect.top, frameRect.bottom, frameRect.height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
+      } else {
+        blockScroll = viewport === frame ? viewportY + targetBlock - viewportHeight / 2 : frame.scrollTop - (frameRect.top + frameRect.height / 2 - targetBlock);
       }
 
-      if (block === 'center') {
-        if (!targetBlock) {
-          targetBlock = targetRect.top + targetRect.height / 2;
-        }
-
-        if (viewport === frame) {
-          blockScroll = viewportY + targetBlock - viewportHeight / 2;
-        } else {
-          var _offset = 0 - Math.min(frameRect.top + frameRect.height / 2 - targetBlock, frame.scrollTop);
-
-          blockScroll = frame.scrollTop + _offset;
-        }
-      }
-
-      if (block === 'end') {
-        if (!targetBlock) {
-          targetBlock = targetRect.bottom;
-        }
-
-        if (viewport === frame) {
-          blockScroll = viewportY + targetBlock - viewportHeight;
-        } else {
-          var _offset2 = 0 - Math.min(frameRect.bottom - targetBlock, frame.scrollTop);
-
-          blockScroll = frame.scrollTop + _offset2 + borderBottom + scrollbarHeight;
-        }
-      }
-
-      if (block === 'nearest') {
-        if (!targetBlock) {
-          targetBlock = targetRect.top;
-        }
-
-        if (viewport === frame) {
-          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, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetRect.height, targetRect.height);
-
-          blockScroll = frame.scrollTop + _offset4;
-        }
-      }
-
       if (inline === 'start') {
-        if (!targetInline) {
-          targetInline = targetRect.left;
-        }
-
-        if (viewport === frame) {
-          inlineScroll = viewportX + targetInline;
-        } else {
-          var _offset5 = Math.min(targetInline - frameRect.left, frame.scrollHeight - frame.clientLeft - frame.scrollLeft);
-
-          inlineScroll = frame.scrollLeft + _offset5 - borderLeft;
-        }
+        inlineScroll = viewport === frame ? viewportX + targetInline : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft;
+      } else if (inline === 'center') {
+        inlineScroll = viewport === frame ? viewportX + targetInline - viewportWidth / 2 : frame.scrollLeft - (frameRect.left + frameRect.width / 2 - targetInline);
+      } else if (inline === 'end') {
+        inlineScroll = viewport === frame ? viewportX + (targetInline - viewportWidth) : frame.scrollLeft - (frameRect.right - targetInline) + borderRight + scrollbarWidth;
+      } else {
+        inlineScroll = viewport === frame ? viewportX + alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetRect.width, targetRect.width) : frame.scrollLeft + alignNearest(frameRect.left, frameRect.right, frameRect.width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
       }
 
-      if (inline === 'center') {
-        if (!targetInline) {
-          targetInline = targetRect.left + targetRect.width / 2;
-        }
-
-        if (viewport === frame) {
-          inlineScroll = viewportX + targetInline - viewportWidth / 2;
-        } else {
-          var _offset6 = 0 - Math.min(frameRect.left + frameRect.width / 2 - targetInline, frame.scrollLeft);
-
-          inlineScroll = frame.scrollLeft + _offset6;
-        }
-      }
-
-      if (inline === 'end') {
-        if (!targetInline) {
-          targetInline = targetRect.right;
-        }
-
-        if (viewport === frame) {
-          inlineScroll = viewportX + targetInline - viewportWidth;
-        } else {
-          var _offset7 = 0 - Math.min(frameRect.right - targetInline, frame.scrollLeft);
-
-          inlineScroll = frame.scrollLeft + _offset7 + borderRight + scrollbarWidth;
-        }
-      }
-
-      if (inline === 'nearest') {
-        if (!targetInline) {
-          targetInline = targetRect.left;
-        }
-
-        if (viewport === frame) {
-          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, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetRect.width, targetRect.width);
-
-          inlineScroll = frame.scrollLeft + _offset9;
-        }
-      }
-
       targetBlock += frame.scrollTop - blockScroll;
@@ -271,11 +165,7 @@ targetInline += frame.scrollLeft - inlineScroll;
 
-  var isFunction = function isFunction(arg) {
-    return typeof arg === 'function';
-  };
-
-  var isOptionsObject = function isOptionsObject(options) {
+  function isOptionsObject(options) {
     return options === Object(options) && Object.keys(options).length !== 0;
-  };
+  }
 
-  var defaultBehavior = function defaultBehavior(actions, behavior) {
+  function defaultBehavior(actions, behavior) {
     if (behavior === void 0) {
@@ -286,3 +176,2 @@ behavior = 'auto';
     var viewport = getViewport();
-    var supportsScrollBehavior = 'scrollBehavior' in viewport.style;
     actions.forEach(function (_ref) {
@@ -293,3 +182,3 @@ var el = _ref.el,
 
-      if (el.scroll && supportsScrollBehavior) {
+      if (el.scroll && 'scrollBehavior' in viewport.style) {
         el.scroll({
@@ -302,3 +191,3 @@ top: top,
         if (el === viewport) {
-          window.scrollTo(left, top);
+          scrollTo(left, top);
         } else {
@@ -310,20 +199,13 @@ el.scrollTop = top;
     });
-  };
+  }
 
-  var getOptions = function getOptions(options) {
-    if (options === void 0) {
-      options = true;
-    }
-
-    if (options === true || options === null) {
+  function getOptions(options) {
+    if (options === false) {
       return {
-        block: 'start',
-        inline: 'nearest'
-      };
-    } else if (options === false) {
-      return {
         block: 'end',
         inline: 'nearest'
       };
-    } else if (isOptionsObject(options)) {
+    }
+
+    if (isOptionsObject(options)) {
       return options;
@@ -336,10 +218,6 @@ }
     };
-  };
+  }
 
   function scrollIntoView(target, options) {
-    if (options === void 0) {
-      options = true;
-    }
-
-    if (isOptionsObject(options) && isFunction(options.behavior)) {
+    if (isOptionsObject(options) && typeof options.behavior === 'function') {
       return options.behavior(compute(target, options));
@@ -346,0 +224,0 @@ }

umd/scroll-into-view-if-needed.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollIntoView=e()}(this,function(){"use strict";var t,e=function(){return t||(t="CSS1Compat"===document.compatMode?document.documentElement:document.scrollingElement||document.documentElement),t},i=function(t){return null!=t&&"object"==typeof t&&(1===t.nodeType||11===t.nodeType)},o=function(t,e){return"X"===e?t.clientWidth<t.scrollWidth:t.clientHeight<t.scrollHeight},n=function(t,e,i){var o=getComputedStyle(t,null)["overflow"+e];return(!i||"hidden"!==o)&&("visible"!==o&&"clip"!==o)},r=function(t,i){return t===e()||o(t,"Y")&&n(t,"Y",i)||o(t,"X")&&n(t,"X",i)},l=function(t,e,i,o,n,r,l,f){return r<t&&l>e||r>t&&l<e?0:r<t&&f<i||l>e&&f>i?r-t-o:l>e&&f<i||r<t&&f>i?l-e+n:0},f=function(t,o){void 0===o&&(o={});var n=o,f=n.scrollMode,c=void 0===f?"always":f,s=n.block,d=void 0===s?"center":s,h=n.inline,u=void 0===h?"nearest":h,a=n.boundary,p=n.skipOverflowHiddenElements,v=void 0!==p&&p,w="function"==typeof a?a:function(t){return t!==a};if(!i(t))throw new Error("Element is required in scrollIntoView");for(var g,m=t.getBoundingClientRect(),b=[];i(g=t.parentNode||t.host)&&w(t);)r(g,v)&&b.push(g),t=g;var y,T,H=e(),L=window.visualViewport?window.visualViewport.width:Math.min(H.clientWidth,window.innerWidth),W=window.visualViewport?window.visualViewport.height:Math.min(H.clientHeight,window.innerHeight),M=window.scrollX||window.pageXOffset,C=window.scrollY||window.pageYOffset;if("if-needed"===c&&b.every(function(t){var e=t.getBoundingClientRect();if(m.top<e.top)return!1;if(m.bottom>e.bottom)return!1;if(t===H){if(m.bottom>W||m.top<0)return!1;if(m.left>L||m.right<0)return!1}return!0}))return[];return b.map(function(t){var e=t.getBoundingClientRect(),i=getComputedStyle(t),o=parseInt(i.borderLeftWidth,10),n=parseInt(i.borderTopWidth,10),r=parseInt(i.borderRightWidth,10),f=parseInt(i.borderBottomWidth,10),c="offsetWidth"in t?t.offsetWidth-t.clientWidth-o-r:0,s="offsetHeight"in t?t.offsetHeight-t.clientHeight-n-f:0,h=0,a=0;if("start"===d)if(y||(y=m.top),H===t)h=C+y;else{var p=Math.min(y-e.top,t.scrollHeight-t.clientHeight-t.scrollTop);h=t.scrollTop+p-n}if("center"===d)if(y||(y=m.top+m.height/2),H===t)h=C+y-W/2;else{var v=0-Math.min(e.top+e.height/2-y,t.scrollTop);h=t.scrollTop+v}if("end"===d)if(y||(y=m.bottom),H===t)h=C+y-W;else{var w=0-Math.min(e.bottom-y,t.scrollTop);h=t.scrollTop+w+f+s}if("nearest"===d)if(y||(y=m.top),H===t){var g=l(C,C+W,W,n,f,C+y,C+y+m.height,m.height);h=C+g}else{var b=l(e.top,e.bottom,e.height,n,f+s,y,y+m.height,m.height);h=t.scrollTop+b}if("start"===u)if(T||(T=m.left),H===t)a=M+T;else{var E=Math.min(T-e.left,t.scrollHeight-t.clientLeft-t.scrollLeft);a=t.scrollLeft+E-o}if("center"===u)if(T||(T=m.left+m.width/2),H===t)a=M+T-L/2;else{var k=0-Math.min(e.left+e.width/2-T,t.scrollLeft);a=t.scrollLeft+k}if("end"===u)if(T||(T=m.right),H===t)a=M+T-L;else{var I=0-Math.min(e.right-T,t.scrollLeft);a=t.scrollLeft+I+r+c}if("nearest"===u)if(T||(T=m.left),H===t){var V=l(M,M+L,L,o,r,M+T,M+T+m.width,m.width);a=M+V}else{var B=l(e.left,e.right,e.width,o,r+c,T,T+m.width,m.width);a=t.scrollLeft+B}return y+=t.scrollTop-h,T+=t.scrollLeft-a,{el:t,top:h,left:a}})},c=function(t){return"function"==typeof t},s=function(t){return t===Object(t)&&0!==Object.keys(t).length},d=function(t,i){void 0===i&&(i="auto");var o=e(),n="scrollBehavior"in o.style;t.forEach(function(t){var e=t.el,r=t.top,l=t.left;e.scroll&&n?e.scroll({top:r,left:l,behavior:i}):e===o?window.scrollTo(l,r):(e.scrollTop=r,e.scrollLeft=l)})},h=function(t){return void 0===t&&(t=!0),!0===t||null===t?{block:"start",inline:"nearest"}:!1===t?{block:"end",inline:"nearest"}:s(t)?t:{block:"start",inline:"nearest"}};return function(t,e){if(void 0===e&&(e=!0),s(e)&&c(e.behavior))return e.behavior(f(t,e));var i=h(e);return d(f(t,i),i.behavior)}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollIntoView=e()}(this,function(){"use strict";var t,e=function(){var e=document;return t||(t="CSS1Compat"!==e.compatMode&&e.scrollingElement||e.documentElement),t};function o(t){return null!=t&&"object"==typeof t&&(1===t.nodeType||11===t.nodeType)}function n(t,e,o){var n=getComputedStyle(t,null)[e];return(!o||"hidden"!==n)&&("visible"!==n&&"clip"!==n)}function i(t,o){return t===e()||t.clientHeight<t.scrollHeight&&n(t,"overflowY",o)||t.clientWidth<t.scrollWidth&&n(t,"overflowX",o)}function r(t,e,o,n,i,r,l,f){return r<t&&l>e||r>t&&l<e?0:r<t&&f<o||l>e&&f>o?r-t-n:l>e&&f<o||r<t&&f>o?l-e+i:0}var l=function(t,n){var l=n.scrollMode,f=n.block,d=n.inline,c=n.boundary,h=n.skipOverflowHiddenElements,s="function"==typeof c?c:function(t){return t!==c};if(!o(t))throw new Error("Element is required in scrollIntoView");for(var u,a=t.getBoundingClientRect(),p=[];o(u=t.parentNode||t.host)&&s(t);)i(u,h)&&p.push(u),t=u;var w=e(),g=window.visualViewport?window.visualViewport.width:Math.min(w.clientWidth,window.innerWidth),v=window.visualViewport?window.visualViewport.height:Math.min(w.clientHeight,window.innerHeight),b=window.scrollX||window.pageXOffset,m=window.scrollY||window.pageYOffset;if("if-needed"===l&&p.every(function(t){var e=t.getBoundingClientRect();if(a.top<e.top)return!1;if(a.bottom>e.bottom)return!1;if(t===w){if(a.bottom>v||a.top<0)return!1;if(a.left>g||a.right<0)return!1}return!0}))return[];var y="start"===f?a.top:"end"===f?a.bottom:"nearest"===f?a.top:a.top+a.height/2,W="start"===d?a.left:"center"===d?a.left+a.width/2:"end"===d?a.right:a.left;return p.map(function(t){var e=t.getBoundingClientRect(),o=getComputedStyle(t),n=parseInt(o.borderLeftWidth,10),i=parseInt(o.borderTopWidth,10),l=parseInt(o.borderRightWidth,10),c=parseInt(o.borderBottomWidth,10),h="offsetWidth"in t?t.offsetWidth-t.clientWidth-n-l:0,s="offsetHeight"in t?t.offsetHeight-t.clientHeight-i-c:0,u=0,p=0;return u="start"===f?w===t?m+y:y-e.top-i:"end"===f?w===t?m+(y-v):t.scrollTop-(e.bottom-y)+c+s:"nearest"===f?w===t?m+r(m,m+v,v,i,c,m+y,m+y+a.height,a.height):t.scrollTop+r(e.top,e.bottom,e.height,i,c+s,y,y+a.height,a.height):w===t?m+y-v/2:t.scrollTop-(e.top+e.height/2-y),p="start"===d?w===t?b+W:t.scrollLeft+(W-e.left)-n:"center"===d?w===t?b+W-g/2:t.scrollLeft-(e.left+e.width/2-W):"end"===d?w===t?b+(W-g):t.scrollLeft-(e.right-W)+l+h:w===t?b+r(b,b+g,g,n,l,b+W,b+W+a.width,a.width):t.scrollLeft+r(e.left,e.right,e.width,n,l+h,W,W+a.width,a.width),y+=t.scrollTop-u,W+=t.scrollLeft-p,{el:t,top:u,left:p}})};function f(t){return t===Object(t)&&0!==Object.keys(t).length}return function(t,o){if(f(o)&&"function"==typeof o.behavior)return o.behavior(l(t,o));var n=function(t){return!1===t?{block:"end",inline:"nearest"}:f(t)?t:{block:"start",inline:"nearest"}}(o);return function(t,o){void 0===o&&(o="auto");var n=e();t.forEach(function(t){var e=t.el,i=t.top,r=t.left;e.scroll&&"scrollBehavior"in n.style?e.scroll({top:i,left:r,behavior:o}):e===n?scrollTo(r,i):(e.scrollTop=i,e.scrollLeft=r)})}(l(t,n),n.behavior)}});

viewport.js

@@ -8,4 +8,6 @@ "use strict";
 var _default = function _default() {
+  var doc = document;
+
   if (!viewport) {
-    viewport = document.compatMode === 'CSS1Compat' ? document.documentElement : document.scrollingElement || document.documentElement;
+    viewport = doc.compatMode !== 'CSS1Compat' && doc.scrollingElement || doc.documentElement;
   }
@@ -12,0 +14,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

60108

decreased by-12.24%

Lines of code

612

decreased by-31.7%

No dependency changes