compute-scroll-into-view 1.0.19 → 2.0.0

package/README.md

@@ -2,7 +2,6 @@
 [![npm version](https://img.shields.io/npm/v/compute-scroll-into-view.svg?style=flat-square)](https://www.npmjs.com/package/compute-scroll-into-view)
 [![gzip size][gzip-badge]][unpkg-dist]
 [![size][size-badge]][unpkg-dist]
-[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
 
 ![compute-scroll-into-view](https://user-images.githubusercontent.com/81981/43024153-a2cc212c-8c6d-11e8-913b-b4d62efcf105.png)
@@ -12,33 +11,41 @@ Use this if you want the smallest possible bundlesize and is ok with implementin
 
 Scrolling SVG elements are supported, as well as Shadow DOM elements. The [VisualViewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) API is also supported, ensuring scrolling works properly on modern devices. Quirksmode is also supported as long as you polyfill [`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement).
 
+- [Install](#install)
+- [Usage](#usage)
+- [API](#api)
+  - [compute(target, options)](#computetarget-options)
+  - [options](#options)
+    - [block](#block)
+    - [inline](#inline)
+    - [scrollMode](#scrollmode)
+    - [boundary](#boundary)
+    - [skipOverflowHiddenElements](#skipoverflowhiddenelements)
+
 ## Install
 
 ```bash
 npm i compute-scroll-into-view
 ```
 
-The UMD build is also available on [unpkg](https://unpkg.com/compute-scroll-into-view/umd/):
+You can also use it from an CDN:
 
-```html
-<script src="https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js"></script>
+```js
+const { default: compute } = await import(
+  'https://esm.sh/compute-scroll-into-view'
+)
 ```
 
-You can find the library on `window.computeScrollIntoView`.
-
 ## Usage
 
 ```js
-// es6 import
-import computeScrollIntoView from 'compute-scroll-into-view'
-// or es5
-const computeScrollIntoView = require('compute-scroll-into-view')
+import compute from 'compute-scroll-into-view'
 
 const node = document.getElementById('hero')
 
 // same behavior as Element.scrollIntoView({block: "nearest", inline: "nearest"})
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-const actions = computeScrollIntoView(node, {
+const actions = compute(node, {
   scrollMode: 'if-needed',
   block: 'nearest',
   inline: 'nearest',
@@ -46,7 +53,7 @@ const actions = computeScrollIntoView(node, {
 
 // same behavior as Element.scrollIntoViewIfNeeded(true)
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
-const actions = computeScrollIntoView(node, {
+const actions = compute(node, {
   scrollMode: 'if-needed',
   block: 'center',
   inline: 'center',
@@ -61,7 +68,7 @@ actions.forEach(({ el, top, left }) => {
 
 ## API
 
-### computeScrollIntoView(target, options)
+### compute(target, options)
 
 ### options
 
@@ -102,7 +109,7 @@ By passing a boundary you can short-circuit this loop depending on your needs:
 You can also pass a function to do more dynamic checks to override the scroll scoping:
 
 ```js
-const actions = computeScrollIntoView(target, {
+const actions = compute(target, {
   boundary: (parent) => {
     // By default `overflow: hidden` elements are allowed, only `overflow: visible | clip` is skipped as
     // this is required by the CSSOM spec
@@ -123,11 +130,6 @@ By default the [spec](https://drafts.csswg.org/cssom-view/#scrolling-box) states
 
 This package follows the convention [adopted by Firefox](https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18) of setting a boolean option to _not_ scroll all nodes with `overflow: hidden` set.
 
-# TypeScript support
-
-This library ships with library definitions for TypeScript.
-
-[gzip-badge]: http://img.badgesize.io/https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js?compression=gzip&label=gzip%20size&style=flat-square
-[size-badge]: http://img.badgesize.io/https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js?label=size&style=flat-square
-[unpkg-dist]: https://unpkg.com/compute-scroll-into-view/umd/
-[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
+[gzip-badge]: https://img.badgesize.io/https:/unpkg.com/compute-scroll-into-view/dist/index.js?label=gzip%20size&compression=gzip&style=flat-square
+[size-badge]: https://img.badgesize.io/https:/unpkg.com/compute-scroll-into-view/dist/index.js?label=size&style=flat-square
+[unpkg-dist]: https://unpkg.com/compute-scroll-into-view/dist/

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";function t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t)}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e(o.overflowY,n)||e(o.overflowX,n)||function(t){const e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function o(t,e,n,o,i,l,r,d){return l<t&&r>e||l>t&&r<e?0:l<=t&&d<=n||r>=e&&d>=n?l-t-o:r>e&&d<n||l<t&&d>n?r-e+i:0}function i(t){const e=t.parentElement;return null==e?t.getRootNode().host||null:e}module.exports=(e,l)=>{var r,d,s,u,c,f;if("undefined"==typeof document)return[];const{scrollMode:h,block:a,inline:g,boundary:m,skipOverflowHiddenElements:p}=l,w="function"==typeof m?m:t=>t!==m;if(!t(e))throw new TypeError("Invalid target");const W=document.scrollingElement||document.documentElement,H=[];let b=e;for(;t(b)&&w(b);){if(b=i(b),b===W){H.push(b);break}null!=b&&b===document.body&&n(b)&&!n(document.documentElement)||null!=b&&n(b,p)&&H.push(b)}const v=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,y=null!=(u=null==(s=window.visualViewport)?void 0:s.height)?u:innerHeight,E=null!=(c=window.scrollX)?c:pageXOffset,M=null!=(f=window.scrollY)?f:pageYOffset,{height:x,width:I,top:C,right:R,bottom:T,left:V}=e.getBoundingClientRect();let k="start"===a||"nearest"===a?C:"end"===a?T:C+x/2,B="center"===g?V+I/2:"end"===g?R:V;const D=[];for(let t=0;t<H.length;t++){const e=H[t],{height:n,width:i,top:l,right:r,bottom:d,left:s}=e.getBoundingClientRect();if("if-needed"===h&&C>=0&&V>=0&&T<=y&&R<=v&&C>=l&&T<=d&&V>=s&&R<=r)return D;const u=getComputedStyle(e),c=parseInt(u.borderLeftWidth,10),f=parseInt(u.borderTopWidth,10),m=parseInt(u.borderRightWidth,10),p=parseInt(u.borderBottomWidth,10);let w=0,b=0;const O="offsetWidth"in e?e.offsetWidth-e.clientWidth-c-m:0,X="offsetHeight"in e?e.offsetHeight-e.clientHeight-f-p:0,Y="offsetWidth"in e?0===e.offsetWidth?0:i/e.offsetWidth:0,L="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(W===e)w="start"===a?k:"end"===a?k-y:"nearest"===a?o(M,M+y,y,f,p,M+k,M+k+x,x):k-y/2,b="start"===g?B:"center"===g?B-v/2:"end"===g?B-v:o(E,E+v,v,c,m,E+B,E+B+I,I),w=Math.max(0,w+M),b=Math.max(0,b+E);else{w="start"===a?k-l-f:"end"===a?k-d+p+X:"nearest"===a?o(l,d,n,f,p+X,k,k+x,x):k-(l+n/2)+X/2,b="start"===g?B-s-c:"center"===g?B-(s+i/2)+O/2:"end"===g?B-r+m+O:o(s,r,i,c,m+O,B,B+I,I);const{scrollLeft:t,scrollTop:u}=e;w=Math.max(0,Math.min(u+w/L,e.scrollHeight-n/L+X)),b=Math.max(0,Math.min(t+b/Y,e.scrollWidth-i/Y+O)),k+=u-w,B+=t-b}D.push({el:e,top:w,left:b})}return D};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Compute what scrolling needs to be done on required scrolling boxes for target to be in view\n\n// The type names here are named after the spec to make it easier to find more information around what they mean:\n// To reduce churn and reduce things that need be maintained things from the official TS DOM library is used here\n// https://drafts.csswg.org/cssom-view/\n\n// For a definition on what is \"block flow direction\" exactly, check this: https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction\n\n/**\n * This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805\n * @public\n */\nexport type ScrollMode = 'always' | 'if-needed'\n\n/** @public */\nexport interface Options {\n  block?: ScrollLogicalPosition\n  inline?: ScrollLogicalPosition\n  scrollMode?: ScrollMode\n  // Custom behavior, not in any spec\n  boundary?: Element | ((parent: Element) => boolean) | null\n  /**\n   * New option that skips auto-scrolling all nodes with overflow: hidden set\n   * See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18\n   * @public\n   */\n  skipOverflowHiddenElements?: boolean\n}\n\n/** @public */\nexport interface ScrollAction {\n  el: Element\n  top: number\n  left: number\n}\n\n// @TODO better shadowdom test, 11 = document fragment\nfunction isElement(el: any): el is Element {\n  return typeof el === 'object' && el != null && el.nodeType === 1\n}\n\nfunction canOverflow(\n  overflow: string | null,\n  skipOverflowHiddenElements?: boolean\n) {\n  if (skipOverflowHiddenElements && overflow === 'hidden') {\n    return false\n  }\n\n  return overflow !== 'visible' && overflow !== 'clip'\n}\n\nfunction getFrameElement(el: Element) {\n  if (!el.ownerDocument || !el.ownerDocument.defaultView) {\n    return null\n  }\n\n  try {\n    return el.ownerDocument.defaultView.frameElement\n  } catch (e) {\n    return null\n  }\n}\n\nfunction isHiddenByFrame(el: Element): boolean {\n  const frame = getFrameElement(el)\n  if (!frame) {\n    return false\n  }\n\n  return (\n    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth\n  )\n}\n\nfunction isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {\n  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {\n    const style = getComputedStyle(el, null)\n    return (\n      canOverflow(style.overflowY, skipOverflowHiddenElements) ||\n      canOverflow(style.overflowX, skipOverflowHiddenElements) ||\n      isHiddenByFrame(el)\n    )\n  }\n\n  return false\n}\n/**\n * Find out which edge to align against when logical scroll position is \"nearest\"\n * Interesting fact: \"nearest\" works similarily to \"if-needed\", if the element is fully visible it will not scroll it\n *\n * Legends:\n * ┌────────┐ ┏ ━ ━ ━ ┓\n * │ target │   frame\n * └────────┘ ┗ ━ ━ ━ ┛\n */\nfunction alignNearest(\n  scrollingEdgeStart: number,\n  scrollingEdgeEnd: number,\n  scrollingSize: number,\n  scrollingBorderStart: number,\n  scrollingBorderEnd: number,\n  elementEdgeStart: number,\n  elementEdgeEnd: number,\n  elementSize: number\n) {\n  /**\n   * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓\n   *          │  │\n   *        ┃ │  │ ┃        do nothing\n   *          │  │\n   *        ┗━│━━│━┛\n   *          └──┘\n   *\n   *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D\n   *\n   *    ┏ ━ ━ ━ ━ ┓\n   *   ┌───────────┐\n   *   │┃         ┃│        do nothing\n   *   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart < scrollingEdgeStart &&\n      elementEdgeEnd > scrollingEdgeEnd) ||\n    (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)\n  ) {\n    return 0\n  }\n\n  /**\n   * If element edge A is outside scrolling box edge A and element height is less than scrolling box height\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓         ┏━┌━━┐━┓\n   *          └──┘             │  │\n   *  from  ┃      ┃     to  ┃ └──┘ ┃\n   *\n   *        ┗━ ━━ ━┛         ┗━ ━━ ━┛\n   *\n   * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━┌━━┐━┓\n   *                           │  │\n   *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃\n   *          │  │             │  │\n   *        ┗━│━━│━┛         ┗━│━━│━┛\n   *          │  │             └──┘\n   *          │  │\n   *          └──┘\n   *\n   * If element edge C is outside scrolling box edge C and element width is less than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───┐                 ┌───┐\n   *  │ ┃ │       ┃         ┃   │     ┃\n   *  └───┘                 └───┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *        ┌───────────┐   ┌───────────┐\n   *    ┃   │     ┃     │   ┃         ┃ │\n   *        └───────────┘   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||\n    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)\n  ) {\n    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart\n  }\n\n  /**\n   * If element edge B is outside scrolling box edge B and element height is less than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━ ━━ ━┓\n   *\n   *  from  ┃      ┃     to  ┃ ┌──┐ ┃\n   *          ┌──┐             │  │\n   *        ┗━│━━│━┛         ┗━└━━┘━┛\n   *          └──┘\n   *\n   * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height\n   *\n   *          ┌──┐\n   *          │  │\n   *          │  │             ┌──┐\n   *        ┏━│━━│━┓         ┏━│━━│━┓\n   *          │  │             │  │\n   *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃\n   *                           │  │\n   *        ┗━ ━━ ━┛         ┗━└━━┘━┛\n   *\n   * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───────────┐           ┌───────────┐\n   *  │     ┃     │   ┃       │ ┃         ┃\n   *  └───────────┘           └───────────┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is less than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *                ┌───┐             ┌───┐\n   *        ┃       │ ┃ │       ┃     │   ┃\n   *                └───┘             └───┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   */\n  if (\n    (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||\n    (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)\n  ) {\n    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd\n  }\n\n  return 0\n}\n\nfunction getParentElement(element: Node): Element | null {\n  const parent = element.parentElement\n  if (parent == null) {\n    return (element.getRootNode() as ShadowRoot).host || null\n  }\n  return parent\n}\n\n/** @public */\nexport default (target: Element, options: Options): ScrollAction[] => {\n  if (typeof document === 'undefined') {\n    // If there's no DOM we assume it's not in a browser environment\n    return []\n  }\n\n  const { scrollMode, block, inline, boundary, skipOverflowHiddenElements } =\n    options\n  // Allow using a callback to check the boundary\n  // The default behavior is to check if the current target matches the boundary element or not\n  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)\n  const checkBoundary =\n    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary\n\n  if (!isElement(target)) {\n    throw new TypeError('Invalid target')\n  }\n\n  // Used to handle the top most element that can be scrolled\n  const scrollingElement = document.scrollingElement || document.documentElement\n\n  // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box\n  const frames: Element[] = []\n  let cursor: Element | null = target\n  while (isElement(cursor) && checkBoundary(cursor)) {\n    // Move cursor to parent\n    cursor = getParentElement(cursor)\n\n    // Stop when we reach the viewport\n    if (cursor === scrollingElement) {\n      frames.push(cursor)\n      break\n    }\n\n    // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable\n    if (\n      cursor != null &&\n      cursor === document.body &&\n      isScrollable(cursor) &&\n      !isScrollable(document.documentElement)\n    ) {\n      continue\n    }\n\n    // Now we check if the element is scrollable, this code only runs if the loop haven't already hit the viewport or a custom boundary\n    if (cursor != null && isScrollable(cursor, skipOverflowHiddenElements)) {\n      frames.push(cursor)\n    }\n  }\n\n  // Support pinch-zooming properly, making sure elements scroll into the visual viewport\n  // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height\n  // and viewport dimensions on window.innerWidth/Height\n  // https://www.quirksmode.org/mobile/viewports2.html\n  // https://bokand.github.io/viewport/index.html\n  const viewportWidth = window.visualViewport?.width ?? innerWidth\n  const viewportHeight = window.visualViewport?.height ?? innerHeight\n\n  // Newer browsers supports scroll[X|Y], page[X|Y]Offset is\n  const viewportX = window.scrollX ?? pageXOffset\n  const viewportY = window.scrollY ?? pageYOffset\n\n  const {\n    height: targetHeight,\n    width: targetWidth,\n    top: targetTop,\n    right: targetRight,\n    bottom: targetBottom,\n    left: targetLeft,\n  } = target.getBoundingClientRect()\n\n  // These values mutate as we loop through and generate scroll coordinates\n  let targetBlock: number =\n    block === 'start' || block === 'nearest'\n      ? targetTop\n      : block === 'end'\n      ? targetBottom\n      : targetTop + targetHeight / 2 // block === 'center\n  let targetInline: number =\n    inline === 'center'\n      ? targetLeft + targetWidth / 2\n      : inline === 'end'\n      ? targetRight\n      : targetLeft // inline === 'start || inline === 'nearest\n\n  // Collect new scroll positions\n  const computations: ScrollAction[] = []\n  // In chrome there's no longer a difference between caching the `frames.length` to a var or not, so we don't in this case (size > speed anyways)\n  for (let index = 0; index < frames.length; index++) {\n    const frame = frames[index]\n\n    // @TODO add a shouldScroll hook here that allows userland code to take control\n\n    const { height, width, top, right, bottom, left } =\n      frame.getBoundingClientRect()\n\n    // If the element is already visible we can end it here\n    // @TODO targetBlock and targetInline should be taken into account to be compliant with https://github.com/w3c/csswg-drafts/pull/1805/files#diff-3c17f0e43c20f8ecf89419d49e7ef5e0R1333\n    if (\n      scrollMode === 'if-needed' &&\n      targetTop >= 0 &&\n      targetLeft >= 0 &&\n      targetBottom <= viewportHeight &&\n      targetRight <= viewportWidth &&\n      targetTop >= top &&\n      targetBottom <= bottom &&\n      targetLeft >= left &&\n      targetRight <= right\n    ) {\n      // Break the loop and return the computations for things that are not fully visible\n      return computations\n    }\n\n    const frameStyle = getComputedStyle(frame)\n    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)\n    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)\n    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)\n    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)\n\n    let blockScroll: number = 0\n    let inlineScroll: number = 0\n\n    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here\n    // @TODO find out if the \"as HTMLElement\" overrides can be dropped\n    const scrollbarWidth =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth -\n          (frame as HTMLElement).clientWidth -\n          borderLeft -\n          borderRight\n        : 0\n    const scrollbarHeight =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight -\n          (frame as HTMLElement).clientHeight -\n          borderTop -\n          borderBottom\n        : 0\n\n    const scaleX =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth === 0\n          ? 0\n          : width / (frame as HTMLElement).offsetWidth\n        : 0\n    const scaleY =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight === 0\n          ? 0\n          : height / (frame as HTMLElement).offsetHeight\n        : 0\n\n    if (scrollingElement === frame) {\n      // Handle viewport logic (document.documentElement or document.body)\n\n      if (block === 'start') {\n        blockScroll = targetBlock\n      } else if (block === 'end') {\n        blockScroll = targetBlock - viewportHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          viewportY,\n          viewportY + viewportHeight,\n          viewportHeight,\n          borderTop,\n          borderBottom,\n          viewportY + targetBlock,\n          viewportY + targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - viewportHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - viewportWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - viewportWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          viewportX,\n          viewportX + viewportWidth,\n          viewportWidth,\n          borderLeft,\n          borderRight,\n          viewportX + targetInline,\n          viewportX + targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      // Apply scroll position offsets and ensure they are within bounds\n      // @TODO add more test cases to cover this 100%\n      blockScroll = Math.max(0, blockScroll + viewportY)\n      inlineScroll = Math.max(0, inlineScroll + viewportX)\n    } else {\n      // Handle each scrolling frame that might exist between the target and the viewport\n\n      if (block === 'start') {\n        blockScroll = targetBlock - top - borderTop\n      } else if (block === 'end') {\n        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          top,\n          bottom,\n          height,\n          borderTop,\n          borderBottom + scrollbarHeight,\n          targetBlock,\n          targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline - left - borderLeft\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - right + borderRight + scrollbarWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          left,\n          right,\n          width,\n          borderLeft,\n          borderRight + scrollbarWidth,\n          targetInline,\n          targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      const { scrollLeft, scrollTop } = frame\n      // Ensure scroll coordinates are not out of bounds while applying scroll offsets\n      blockScroll = Math.max(\n        0,\n        Math.min(\n          scrollTop + blockScroll / scaleY,\n          frame.scrollHeight - height / scaleY + scrollbarHeight\n        )\n      )\n      inlineScroll = Math.max(\n        0,\n        Math.min(\n          scrollLeft + inlineScroll / scaleX,\n          frame.scrollWidth - width / scaleX + scrollbarWidth\n        )\n      )\n\n      // Cache the offset so that parent frames can scroll this into view correctly\n      targetBlock += scrollTop - blockScroll\n      targetInline += scrollLeft - inlineScroll\n    }\n\n    computations.push({ el: frame, top: blockScroll, left: inlineScroll })\n  }\n\n  return computations\n}\n"],"names":["isElement","el","nodeType","canOverflow","overflow","skipOverflowHiddenElements","isScrollable","clientHeight","scrollHeight","clientWidth","scrollWidth","style","getComputedStyle","overflowY","overflowX","frame","ownerDocument","defaultView","frameElement","e","getFrameElement","isHiddenByFrame","alignNearest","scrollingEdgeStart","scrollingEdgeEnd","scrollingSize","scrollingBorderStart","scrollingBorderEnd","elementEdgeStart","elementEdgeEnd","elementSize","getParentElement","element","parent","parentElement","getRootNode","host","target","options","_a","_b","_c","_d","_e","_f","document","scrollMode","block","inline","boundary","checkBoundary","node","TypeError","scrollingElement","documentElement","frames","cursor","push","body","viewportWidth","window","visualViewport","width","innerWidth","viewportHeight","height","innerHeight","viewportX","scrollX","pageXOffset","viewportY","scrollY","pageYOffset","targetHeight","targetWidth","top","targetTop","right","targetRight","bottom","targetBottom","left","targetLeft","getBoundingClientRect","targetBlock","targetInline","computations","index","length","frameStyle","borderLeft","parseInt","borderLeftWidth","borderTop","borderTopWidth","borderRight","borderRightWidth","borderBottom","borderBottomWidth","blockScroll","inlineScroll","scrollbarWidth","offsetWidth","scrollbarHeight","offsetHeight","scaleX","scaleY","Math","max","scrollLeft","scrollTop","min"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+/** @public */
+declare const _default: (target: Element, options: Options) => ScrollAction[]
+export default _default
+
+/** @public */
+export declare interface Options {
+  block?: ScrollLogicalPosition
+  inline?: ScrollLogicalPosition
+  scrollMode?: ScrollMode
+  boundary?: Element | ((parent: Element) => boolean) | null
+  /**
+   * New option that skips auto-scrolling all nodes with overflow: hidden set
+   * See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18
+   * @public
+   */
+  skipOverflowHiddenElements?: boolean
+}
+
+/** @public */
+export declare interface ScrollAction {
+  el: Element
+  top: number
+  left: number
+}
+
+/**
+ * This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805
+ * @public
+ */
+export declare type ScrollMode = 'always' | 'if-needed'
+
+export {}

package/dist/index.js

@@ -1,2 +1,2 @@
-function t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var i=getComputedStyle(t,null);return e(i.overflowY,n)||e(i.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function i(t,e,n,i,r,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-i:l>e&&d<n||o<t&&d>n?l-e+r:0}module.exports=function(e,r){var o=window,l=r.scrollMode,d=r.block,f=r.inline,h=r.boundary,u=r.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var c=document.scrollingElement||document.documentElement,a=[],g=e;t(g)&&s(g);){if((g=g.parentElement)===c){a.push(g);break}null!=g&&g===document.body&&n(g)&&!n(document.documentElement)||null!=g&&n(g,u)&&a.push(g)}for(var m=o.visualViewport?o.visualViewport.width:innerWidth,p=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),H=W.height,b=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+H/2,I="center"===f?V+b/2:"end"===f?E:V,C=[],T=0;T<a.length;T++){var k=a[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=p&&E<=m&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0,N="offsetWidth"in k?0===k.offsetWidth?0:O/k.offsetWidth:0,P="offsetHeight"in k?0===k.offsetHeight?0:D/k.offsetHeight:0;if(c===k)F="start"===d?x:"end"===d?x-p:"nearest"===d?i(v,v+p,p,q,A,v+x,v+x+H,H):x-p/2,G="start"===f?I:"center"===f?I-m/2:"end"===f?I-m:i(w,w+m,m,j,z,w+I,w+I+b,b),F=Math.max(0,F+v),G=Math.max(0,G+w);else{F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?i(R,Y,D,q,A+K,x,x+H,H):x-(R+D/2)+K/2,G="start"===f?I-L-j:"center"===f?I-(L+O/2)+J/2:"end"===f?I-X+z+J:i(L,X,O,j,z+J,I,I+b,b);var Q=k.scrollLeft,U=k.scrollTop;x+=U-(F=Math.max(0,Math.min(U+F/P,k.scrollHeight-D/P+K))),I+=Q-(G=Math.max(0,Math.min(Q+G/N,k.scrollWidth-O/N+J)))}C.push({el:k,top:F,left:G})}return C};
+function t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t)}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e(o.overflowY,n)||e(o.overflowX,n)||function(t){const e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function o(t,e,n,o,i,l,r,d){return l<t&&r>e||l>t&&r<e?0:l<=t&&d<=n||r>=e&&d>=n?l-t-o:r>e&&d<n||l<t&&d>n?r-e+i:0}function i(t){const e=t.parentElement;return null==e?t.getRootNode().host||null:e}var l=(e,l)=>{var r,d,u,f,s,c;if("undefined"==typeof document)return[];const{scrollMode:h,block:a,inline:g,boundary:m,skipOverflowHiddenElements:p}=l,w="function"==typeof m?m:t=>t!==m;if(!t(e))throw new TypeError("Invalid target");const W=document.scrollingElement||document.documentElement,H=[];let b=e;for(;t(b)&&w(b);){if(b=i(b),b===W){H.push(b);break}null!=b&&b===document.body&&n(b)&&!n(document.documentElement)||null!=b&&n(b,p)&&H.push(b)}const v=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,y=null!=(f=null==(u=window.visualViewport)?void 0:u.height)?f:innerHeight,E=null!=(s=window.scrollX)?s:pageXOffset,M=null!=(c=window.scrollY)?c:pageYOffset,{height:x,width:I,top:C,right:R,bottom:T,left:V}=e.getBoundingClientRect();let k="start"===a||"nearest"===a?C:"end"===a?T:C+x/2,B="center"===g?V+I/2:"end"===g?R:V;const D=[];for(let t=0;t<H.length;t++){const e=H[t],{height:n,width:i,top:l,right:r,bottom:d,left:u}=e.getBoundingClientRect();if("if-needed"===h&&C>=0&&V>=0&&T<=y&&R<=v&&C>=l&&T<=d&&V>=u&&R<=r)return D;const f=getComputedStyle(e),s=parseInt(f.borderLeftWidth,10),c=parseInt(f.borderTopWidth,10),m=parseInt(f.borderRightWidth,10),p=parseInt(f.borderBottomWidth,10);let w=0,b=0;const O="offsetWidth"in e?e.offsetWidth-e.clientWidth-s-m:0,X="offsetHeight"in e?e.offsetHeight-e.clientHeight-c-p:0,Y="offsetWidth"in e?0===e.offsetWidth?0:i/e.offsetWidth:0,L="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(W===e)w="start"===a?k:"end"===a?k-y:"nearest"===a?o(M,M+y,y,c,p,M+k,M+k+x,x):k-y/2,b="start"===g?B:"center"===g?B-v/2:"end"===g?B-v:o(E,E+v,v,s,m,E+B,E+B+I,I),w=Math.max(0,w+M),b=Math.max(0,b+E);else{w="start"===a?k-l-c:"end"===a?k-d+p+X:"nearest"===a?o(l,d,n,c,p+X,k,k+x,x):k-(l+n/2)+X/2,b="start"===g?B-u-s:"center"===g?B-(u+i/2)+O/2:"end"===g?B-r+m+O:o(u,r,i,s,m+O,B,B+I,I);const{scrollLeft:t,scrollTop:f}=e;w=Math.max(0,Math.min(f+w/L,e.scrollHeight-n/L+X)),b=Math.max(0,Math.min(t+b/Y,e.scrollWidth-i/Y+O)),k+=f-w,B+=t-b}D.push({el:e,top:w,left:b})}return D};export{l as default};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Compute what scrolling needs to be done on required scrolling boxes for target to be in view\n\n// The type names here are named after the spec to make it easier to find more information around what they mean:\n// To reduce churn and reduce things that need be maintained things from the official TS DOM library is used here\n// https://drafts.csswg.org/cssom-view/\n\n// For a definition on what is \"block flow direction\" exactly, check this: https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction\n\n// add support for visualViewport object currently implemented in chrome\ninterface visualViewport {\n  height: number\n  width: number\n}\n\ntype ScrollLogicalPosition = 'start' | 'center' | 'end' | 'nearest'\n// This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805\ntype ScrollMode = 'always' | 'if-needed'\n// New option that skips auto-scrolling all nodes with overflow: hidden set\n// See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18\ntype SkipOverflowHiddenElements = boolean\n\ninterface Options {\n  block?: ScrollLogicalPosition\n  inline?: ScrollLogicalPosition\n  scrollMode?: ScrollMode\n  boundary?: CustomScrollBoundary\n  skipOverflowHiddenElements?: SkipOverflowHiddenElements\n}\n\n// Custom behavior, not in any spec\ntype CustomScrollBoundaryCallback = (parent: Element) => boolean\ntype CustomScrollBoundary = Element | CustomScrollBoundaryCallback | null\ninterface CustomScrollAction {\n  el: Element\n  top: number\n  left: number\n}\n\n// @TODO better shadowdom test, 11 = document fragment\nfunction isElement(el: any): el is Element {\n  return typeof el === 'object' && el != null && el.nodeType === 1\n}\n\nfunction canOverflow(\n  overflow: string | null,\n  skipOverflowHiddenElements?: boolean\n) {\n  if (skipOverflowHiddenElements && overflow === 'hidden') {\n    return false\n  }\n\n  return overflow !== 'visible' && overflow !== 'clip'\n}\n\nfunction getFrameElement(el: Element) {\n  if (!el.ownerDocument || !el.ownerDocument.defaultView) {\n    return null\n  }\n\n  try {\n    return el.ownerDocument.defaultView.frameElement\n  } catch (e) {\n    return null\n  }\n}\n\nfunction isHiddenByFrame(el: Element): boolean {\n  const frame = getFrameElement(el)\n  if (!frame) {\n    return false\n  }\n\n  return (\n    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth\n  )\n}\n\nfunction isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {\n  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {\n    const style = getComputedStyle(el, null)\n    return (\n      canOverflow(style.overflowY, skipOverflowHiddenElements) ||\n      canOverflow(style.overflowX, skipOverflowHiddenElements) ||\n      isHiddenByFrame(el)\n    )\n  }\n\n  return false\n}\n/**\n * Find out which edge to align against when logical scroll position is \"nearest\"\n * Interesting fact: \"nearest\" works similarily to \"if-needed\", if the element is fully visible it will not scroll it\n *\n * Legends:\n * ┌────────┐ ┏ ━ ━ ━ ┓\n * │ target │   frame\n * └────────┘ ┗ ━ ━ ━ ┛\n */\nfunction alignNearest(\n  scrollingEdgeStart: number,\n  scrollingEdgeEnd: number,\n  scrollingSize: number,\n  scrollingBorderStart: number,\n  scrollingBorderEnd: number,\n  elementEdgeStart: number,\n  elementEdgeEnd: number,\n  elementSize: number\n) {\n  /**\n   * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓\n   *          │  │\n   *        ┃ │  │ ┃        do nothing\n   *          │  │\n   *        ┗━│━━│━┛\n   *          └──┘\n   *\n   *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D\n   *\n   *    ┏ ━ ━ ━ ━ ┓\n   *   ┌───────────┐\n   *   │┃         ┃│        do nothing\n   *   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart < scrollingEdgeStart &&\n      elementEdgeEnd > scrollingEdgeEnd) ||\n    (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)\n  ) {\n    return 0\n  }\n\n  /**\n   * If element edge A is outside scrolling box edge A and element height is less than scrolling box height\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓         ┏━┌━━┐━┓\n   *          └──┘             │  │\n   *  from  ┃      ┃     to  ┃ └──┘ ┃\n   *\n   *        ┗━ ━━ ━┛         ┗━ ━━ ━┛\n   *\n   * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━┌━━┐━┓\n   *                           │  │\n   *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃\n   *          │  │             │  │\n   *        ┗━│━━│━┛         ┗━│━━│━┛\n   *          │  │             └──┘\n   *          │  │\n   *          └──┘\n   *\n   * If element edge C is outside scrolling box edge C and element width is less than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───┐                 ┌───┐\n   *  │ ┃ │       ┃         ┃   │     ┃\n   *  └───┘                 └───┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *        ┌───────────┐   ┌───────────┐\n   *    ┃   │     ┃     │   ┃         ┃ │\n   *        └───────────┘   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||\n    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)\n  ) {\n    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart\n  }\n\n  /**\n   * If element edge B is outside scrolling box edge B and element height is less than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━ ━━ ━┓\n   *\n   *  from  ┃      ┃     to  ┃ ┌──┐ ┃\n   *          ┌──┐             │  │\n   *        ┗━│━━│━┛         ┗━└━━┘━┛\n   *          └──┘\n   *\n   * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height\n   *\n   *          ┌──┐\n   *          │  │\n   *          │  │             ┌──┐\n   *        ┏━│━━│━┓         ┏━│━━│━┓\n   *          │  │             │  │\n   *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃\n   *                           │  │\n   *        ┗━ ━━ ━┛         ┗━└━━┘━┛\n   *\n   * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───────────┐           ┌───────────┐\n   *  │     ┃     │   ┃       │ ┃         ┃\n   *  └───────────┘           └───────────┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is less than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *                ┌───┐             ┌───┐\n   *        ┃       │ ┃ │       ┃     │   ┃\n   *                └───┘             └───┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   */\n  if (\n    (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||\n    (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)\n  ) {\n    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd\n  }\n\n  return 0\n}\n\nexport default (target: Element, options: Options): CustomScrollAction[] => {\n  //TODO: remove this hack when microbundle will support typescript >= 4.0\n  const windowWithViewport = window as unknown as Window & {\n    visualViewport: visualViewport\n  }\n\n  const { scrollMode, block, inline, boundary, skipOverflowHiddenElements } =\n    options\n  // Allow using a callback to check the boundary\n  // The default behavior is to check if the current target matches the boundary element or not\n  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)\n  const checkBoundary =\n    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary\n\n  if (!isElement(target)) {\n    throw new TypeError('Invalid target')\n  }\n\n  // Used to handle the top most element that can be scrolled\n  const scrollingElement = document.scrollingElement || document.documentElement\n\n  // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box\n  const frames: Element[] = []\n  let cursor: Element | null = target\n  while (isElement(cursor) && checkBoundary(cursor)) {\n    // Move cursor to parent\n    cursor = cursor.parentElement\n\n    // Stop when we reach the viewport\n    if (cursor === scrollingElement) {\n      frames.push(cursor)\n      break\n    }\n\n    // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable\n    if (\n      cursor != null &&\n      cursor === document.body &&\n      isScrollable(cursor) &&\n      !isScrollable(document.documentElement)\n    ) {\n      continue\n    }\n\n    // Now we check if the element is scrollable, this code only runs if the loop haven't already hit the viewport or a custom boundary\n    if (cursor != null && isScrollable(cursor, skipOverflowHiddenElements)) {\n      frames.push(cursor)\n    }\n  }\n\n  // Support pinch-zooming properly, making sure elements scroll into the visual viewport\n  // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height\n  // and viewport dimensions on window.innerWidth/Height\n  // https://www.quirksmode.org/mobile/viewports2.html\n  // https://bokand.github.io/viewport/index.html\n  const viewportWidth = windowWithViewport.visualViewport\n    ? windowWithViewport.visualViewport.width\n    : innerWidth\n  const viewportHeight = windowWithViewport.visualViewport\n    ? windowWithViewport.visualViewport.height\n    : innerHeight\n\n  // Newer browsers supports scroll[X|Y], page[X|Y]Offset is\n  const viewportX = window.scrollX || pageXOffset\n  const viewportY = window.scrollY || pageYOffset\n\n  const {\n    height: targetHeight,\n    width: targetWidth,\n    top: targetTop,\n    right: targetRight,\n    bottom: targetBottom,\n    left: targetLeft,\n  } = target.getBoundingClientRect()\n\n  // These values mutate as we loop through and generate scroll coordinates\n  let targetBlock: number =\n    block === 'start' || block === 'nearest'\n      ? targetTop\n      : block === 'end'\n      ? targetBottom\n      : targetTop + targetHeight / 2 // block === 'center\n  let targetInline: number =\n    inline === 'center'\n      ? targetLeft + targetWidth / 2\n      : inline === 'end'\n      ? targetRight\n      : targetLeft // inline === 'start || inline === 'nearest\n\n  // Collect new scroll positions\n  const computations: CustomScrollAction[] = []\n  // In chrome there's no longer a difference between caching the `frames.length` to a var or not, so we don't in this case (size > speed anyways)\n  for (let index = 0; index < frames.length; index++) {\n    const frame = frames[index]\n\n    // @TODO add a shouldScroll hook here that allows userland code to take control\n\n    const { height, width, top, right, bottom, left } =\n      frame.getBoundingClientRect()\n\n    // If the element is already visible we can end it here\n    // @TODO targetBlock and targetInline should be taken into account to be compliant with https://github.com/w3c/csswg-drafts/pull/1805/files#diff-3c17f0e43c20f8ecf89419d49e7ef5e0R1333\n    if (\n      scrollMode === 'if-needed' &&\n      targetTop >= 0 &&\n      targetLeft >= 0 &&\n      targetBottom <= viewportHeight &&\n      targetRight <= viewportWidth &&\n      targetTop >= top &&\n      targetBottom <= bottom &&\n      targetLeft >= left &&\n      targetRight <= right\n    ) {\n      // Break the loop and return the computations for things that are not fully visible\n      return computations\n    }\n\n    const frameStyle = getComputedStyle(frame)\n    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)\n    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)\n    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)\n    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)\n\n    let blockScroll: number = 0\n    let inlineScroll: number = 0\n\n    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here\n    // @TODO find out if the \"as HTMLElement\" overrides can be dropped\n    const scrollbarWidth =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth -\n          (frame as HTMLElement).clientWidth -\n          borderLeft -\n          borderRight\n        : 0\n    const scrollbarHeight =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight -\n          (frame as HTMLElement).clientHeight -\n          borderTop -\n          borderBottom\n        : 0\n\n    const scaleX =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth === 0\n          ? 0\n          : width / (frame as HTMLElement).offsetWidth\n        : 0\n    const scaleY =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight === 0\n          ? 0\n          : height / (frame as HTMLElement).offsetHeight\n        : 0\n\n    if (scrollingElement === frame) {\n      // Handle viewport logic (document.documentElement or document.body)\n\n      if (block === 'start') {\n        blockScroll = targetBlock\n      } else if (block === 'end') {\n        blockScroll = targetBlock - viewportHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          viewportY,\n          viewportY + viewportHeight,\n          viewportHeight,\n          borderTop,\n          borderBottom,\n          viewportY + targetBlock,\n          viewportY + targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - viewportHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - viewportWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - viewportWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          viewportX,\n          viewportX + viewportWidth,\n          viewportWidth,\n          borderLeft,\n          borderRight,\n          viewportX + targetInline,\n          viewportX + targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      // Apply scroll position offsets and ensure they are within bounds\n      // @TODO add more test cases to cover this 100%\n      blockScroll = Math.max(0, blockScroll + viewportY)\n      inlineScroll = Math.max(0, inlineScroll + viewportX)\n    } else {\n      // Handle each scrolling frame that might exist between the target and the viewport\n\n      if (block === 'start') {\n        blockScroll = targetBlock - top - borderTop\n      } else if (block === 'end') {\n        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          top,\n          bottom,\n          height,\n          borderTop,\n          borderBottom + scrollbarHeight,\n          targetBlock,\n          targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline - left - borderLeft\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - right + borderRight + scrollbarWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          left,\n          right,\n          width,\n          borderLeft,\n          borderRight + scrollbarWidth,\n          targetInline,\n          targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      const { scrollLeft, scrollTop } = frame\n      // Ensure scroll coordinates are not out of bounds while applying scroll offsets\n      blockScroll = Math.max(\n        0,\n        Math.min(\n          scrollTop + blockScroll / scaleY,\n          frame.scrollHeight - height / scaleY + scrollbarHeight\n        )\n      )\n      inlineScroll = Math.max(\n        0,\n        Math.min(\n          scrollLeft + inlineScroll / scaleX,\n          frame.scrollWidth - width / scaleX + scrollbarWidth\n        )\n      )\n\n      // Cache the offset so that parent frames can scroll this into view correctly\n      targetBlock += scrollTop - blockScroll\n      targetInline += scrollLeft - inlineScroll\n    }\n\n    computations.push({ el: frame, top: blockScroll, left: inlineScroll })\n  }\n\n  return computations\n}\n"],"names":["isElement","el","nodeType","canOverflow","overflow","skipOverflowHiddenElements","isScrollable","clientHeight","scrollHeight","clientWidth","scrollWidth","style","getComputedStyle","overflowY","overflowX","frame","ownerDocument","defaultView","frameElement","e","getFrameElement","isHiddenByFrame","alignNearest","scrollingEdgeStart","scrollingEdgeEnd","scrollingSize","scrollingBorderStart","scrollingBorderEnd","elementEdgeStart","elementEdgeEnd","elementSize","target","options","windowWithViewport","window","scrollMode","block","inline","boundary","checkBoundary","node","TypeError","scrollingElement","document","documentElement","frames","cursor","parentElement","push","body","viewportWidth","visualViewport","width","innerWidth","viewportHeight","height","innerHeight","viewportX","scrollX","pageXOffset","viewportY","scrollY","pageYOffset","getBoundingClientRect","targetHeight","targetWidth","targetTop","top","targetRight","right","targetBottom","bottom","targetLeft","left","targetBlock","targetInline","computations","index","length","frameStyle","borderLeft","parseInt","borderLeftWidth","borderTop","borderTopWidth","borderRight","borderRightWidth","borderBottom","borderBottomWidth","blockScroll","inlineScroll","scrollbarWidth","offsetWidth","scrollbarHeight","offsetHeight","scaleX","scaleY","Math","max","scrollLeft","scrollTop","min"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Compute what scrolling needs to be done on required scrolling boxes for target to be in view\n\n// The type names here are named after the spec to make it easier to find more information around what they mean:\n// To reduce churn and reduce things that need be maintained things from the official TS DOM library is used here\n// https://drafts.csswg.org/cssom-view/\n\n// For a definition on what is \"block flow direction\" exactly, check this: https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction\n\n/**\n * This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805\n * @public\n */\nexport type ScrollMode = 'always' | 'if-needed'\n\n/** @public */\nexport interface Options {\n  block?: ScrollLogicalPosition\n  inline?: ScrollLogicalPosition\n  scrollMode?: ScrollMode\n  // Custom behavior, not in any spec\n  boundary?: Element | ((parent: Element) => boolean) | null\n  /**\n   * New option that skips auto-scrolling all nodes with overflow: hidden set\n   * See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18\n   * @public\n   */\n  skipOverflowHiddenElements?: boolean\n}\n\n/** @public */\nexport interface ScrollAction {\n  el: Element\n  top: number\n  left: number\n}\n\n// @TODO better shadowdom test, 11 = document fragment\nfunction isElement(el: any): el is Element {\n  return typeof el === 'object' && el != null && el.nodeType === 1\n}\n\nfunction canOverflow(\n  overflow: string | null,\n  skipOverflowHiddenElements?: boolean\n) {\n  if (skipOverflowHiddenElements && overflow === 'hidden') {\n    return false\n  }\n\n  return overflow !== 'visible' && overflow !== 'clip'\n}\n\nfunction getFrameElement(el: Element) {\n  if (!el.ownerDocument || !el.ownerDocument.defaultView) {\n    return null\n  }\n\n  try {\n    return el.ownerDocument.defaultView.frameElement\n  } catch (e) {\n    return null\n  }\n}\n\nfunction isHiddenByFrame(el: Element): boolean {\n  const frame = getFrameElement(el)\n  if (!frame) {\n    return false\n  }\n\n  return (\n    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth\n  )\n}\n\nfunction isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {\n  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {\n    const style = getComputedStyle(el, null)\n    return (\n      canOverflow(style.overflowY, skipOverflowHiddenElements) ||\n      canOverflow(style.overflowX, skipOverflowHiddenElements) ||\n      isHiddenByFrame(el)\n    )\n  }\n\n  return false\n}\n/**\n * Find out which edge to align against when logical scroll position is \"nearest\"\n * Interesting fact: \"nearest\" works similarily to \"if-needed\", if the element is fully visible it will not scroll it\n *\n * Legends:\n * ┌────────┐ ┏ ━ ━ ━ ┓\n * │ target │   frame\n * └────────┘ ┗ ━ ━ ━ ┛\n */\nfunction alignNearest(\n  scrollingEdgeStart: number,\n  scrollingEdgeEnd: number,\n  scrollingSize: number,\n  scrollingBorderStart: number,\n  scrollingBorderEnd: number,\n  elementEdgeStart: number,\n  elementEdgeEnd: number,\n  elementSize: number\n) {\n  /**\n   * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓\n   *          │  │\n   *        ┃ │  │ ┃        do nothing\n   *          │  │\n   *        ┗━│━━│━┛\n   *          └──┘\n   *\n   *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D\n   *\n   *    ┏ ━ ━ ━ ━ ┓\n   *   ┌───────────┐\n   *   │┃         ┃│        do nothing\n   *   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart < scrollingEdgeStart &&\n      elementEdgeEnd > scrollingEdgeEnd) ||\n    (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)\n  ) {\n    return 0\n  }\n\n  /**\n   * If element edge A is outside scrolling box edge A and element height is less than scrolling box height\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓         ┏━┌━━┐━┓\n   *          └──┘             │  │\n   *  from  ┃      ┃     to  ┃ └──┘ ┃\n   *\n   *        ┗━ ━━ ━┛         ┗━ ━━ ━┛\n   *\n   * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━┌━━┐━┓\n   *                           │  │\n   *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃\n   *          │  │             │  │\n   *        ┗━│━━│━┛         ┗━│━━│━┛\n   *          │  │             └──┘\n   *          │  │\n   *          └──┘\n   *\n   * If element edge C is outside scrolling box edge C and element width is less than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───┐                 ┌───┐\n   *  │ ┃ │       ┃         ┃   │     ┃\n   *  └───┘                 └───┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *        ┌───────────┐   ┌───────────┐\n   *    ┃   │     ┃     │   ┃         ┃ │\n   *        └───────────┘   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||\n    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)\n  ) {\n    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart\n  }\n\n  /**\n   * If element edge B is outside scrolling box edge B and element height is less than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━ ━━ ━┓\n   *\n   *  from  ┃      ┃     to  ┃ ┌──┐ ┃\n   *          ┌──┐             │  │\n   *        ┗━│━━│━┛         ┗━└━━┘━┛\n   *          └──┘\n   *\n   * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height\n   *\n   *          ┌──┐\n   *          │  │\n   *          │  │             ┌──┐\n   *        ┏━│━━│━┓         ┏━│━━│━┓\n   *          │  │             │  │\n   *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃\n   *                           │  │\n   *        ┗━ ━━ ━┛         ┗━└━━┘━┛\n   *\n   * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───────────┐           ┌───────────┐\n   *  │     ┃     │   ┃       │ ┃         ┃\n   *  └───────────┘           └───────────┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is less than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *                ┌───┐             ┌───┐\n   *        ┃       │ ┃ │       ┃     │   ┃\n   *                └───┘             └───┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   */\n  if (\n    (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||\n    (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)\n  ) {\n    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd\n  }\n\n  return 0\n}\n\nfunction getParentElement(element: Node): Element | null {\n  const parent = element.parentElement\n  if (parent == null) {\n    return (element.getRootNode() as ShadowRoot).host || null\n  }\n  return parent\n}\n\n/** @public */\nexport default (target: Element, options: Options): ScrollAction[] => {\n  if (typeof document === 'undefined') {\n    // If there's no DOM we assume it's not in a browser environment\n    return []\n  }\n\n  const { scrollMode, block, inline, boundary, skipOverflowHiddenElements } =\n    options\n  // Allow using a callback to check the boundary\n  // The default behavior is to check if the current target matches the boundary element or not\n  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)\n  const checkBoundary =\n    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary\n\n  if (!isElement(target)) {\n    throw new TypeError('Invalid target')\n  }\n\n  // Used to handle the top most element that can be scrolled\n  const scrollingElement = document.scrollingElement || document.documentElement\n\n  // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box\n  const frames: Element[] = []\n  let cursor: Element | null = target\n  while (isElement(cursor) && checkBoundary(cursor)) {\n    // Move cursor to parent\n    cursor = getParentElement(cursor)\n\n    // Stop when we reach the viewport\n    if (cursor === scrollingElement) {\n      frames.push(cursor)\n      break\n    }\n\n    // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable\n    if (\n      cursor != null &&\n      cursor === document.body &&\n      isScrollable(cursor) &&\n      !isScrollable(document.documentElement)\n    ) {\n      continue\n    }\n\n    // Now we check if the element is scrollable, this code only runs if the loop haven't already hit the viewport or a custom boundary\n    if (cursor != null && isScrollable(cursor, skipOverflowHiddenElements)) {\n      frames.push(cursor)\n    }\n  }\n\n  // Support pinch-zooming properly, making sure elements scroll into the visual viewport\n  // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height\n  // and viewport dimensions on window.innerWidth/Height\n  // https://www.quirksmode.org/mobile/viewports2.html\n  // https://bokand.github.io/viewport/index.html\n  const viewportWidth = window.visualViewport?.width ?? innerWidth\n  const viewportHeight = window.visualViewport?.height ?? innerHeight\n\n  // Newer browsers supports scroll[X|Y], page[X|Y]Offset is\n  const viewportX = window.scrollX ?? pageXOffset\n  const viewportY = window.scrollY ?? pageYOffset\n\n  const {\n    height: targetHeight,\n    width: targetWidth,\n    top: targetTop,\n    right: targetRight,\n    bottom: targetBottom,\n    left: targetLeft,\n  } = target.getBoundingClientRect()\n\n  // These values mutate as we loop through and generate scroll coordinates\n  let targetBlock: number =\n    block === 'start' || block === 'nearest'\n      ? targetTop\n      : block === 'end'\n      ? targetBottom\n      : targetTop + targetHeight / 2 // block === 'center\n  let targetInline: number =\n    inline === 'center'\n      ? targetLeft + targetWidth / 2\n      : inline === 'end'\n      ? targetRight\n      : targetLeft // inline === 'start || inline === 'nearest\n\n  // Collect new scroll positions\n  const computations: ScrollAction[] = []\n  // In chrome there's no longer a difference between caching the `frames.length` to a var or not, so we don't in this case (size > speed anyways)\n  for (let index = 0; index < frames.length; index++) {\n    const frame = frames[index]\n\n    // @TODO add a shouldScroll hook here that allows userland code to take control\n\n    const { height, width, top, right, bottom, left } =\n      frame.getBoundingClientRect()\n\n    // If the element is already visible we can end it here\n    // @TODO targetBlock and targetInline should be taken into account to be compliant with https://github.com/w3c/csswg-drafts/pull/1805/files#diff-3c17f0e43c20f8ecf89419d49e7ef5e0R1333\n    if (\n      scrollMode === 'if-needed' &&\n      targetTop >= 0 &&\n      targetLeft >= 0 &&\n      targetBottom <= viewportHeight &&\n      targetRight <= viewportWidth &&\n      targetTop >= top &&\n      targetBottom <= bottom &&\n      targetLeft >= left &&\n      targetRight <= right\n    ) {\n      // Break the loop and return the computations for things that are not fully visible\n      return computations\n    }\n\n    const frameStyle = getComputedStyle(frame)\n    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)\n    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)\n    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)\n    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)\n\n    let blockScroll: number = 0\n    let inlineScroll: number = 0\n\n    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here\n    // @TODO find out if the \"as HTMLElement\" overrides can be dropped\n    const scrollbarWidth =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth -\n          (frame as HTMLElement).clientWidth -\n          borderLeft -\n          borderRight\n        : 0\n    const scrollbarHeight =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight -\n          (frame as HTMLElement).clientHeight -\n          borderTop -\n          borderBottom\n        : 0\n\n    const scaleX =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth === 0\n          ? 0\n          : width / (frame as HTMLElement).offsetWidth\n        : 0\n    const scaleY =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight === 0\n          ? 0\n          : height / (frame as HTMLElement).offsetHeight\n        : 0\n\n    if (scrollingElement === frame) {\n      // Handle viewport logic (document.documentElement or document.body)\n\n      if (block === 'start') {\n        blockScroll = targetBlock\n      } else if (block === 'end') {\n        blockScroll = targetBlock - viewportHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          viewportY,\n          viewportY + viewportHeight,\n          viewportHeight,\n          borderTop,\n          borderBottom,\n          viewportY + targetBlock,\n          viewportY + targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - viewportHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - viewportWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - viewportWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          viewportX,\n          viewportX + viewportWidth,\n          viewportWidth,\n          borderLeft,\n          borderRight,\n          viewportX + targetInline,\n          viewportX + targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      // Apply scroll position offsets and ensure they are within bounds\n      // @TODO add more test cases to cover this 100%\n      blockScroll = Math.max(0, blockScroll + viewportY)\n      inlineScroll = Math.max(0, inlineScroll + viewportX)\n    } else {\n      // Handle each scrolling frame that might exist between the target and the viewport\n\n      if (block === 'start') {\n        blockScroll = targetBlock - top - borderTop\n      } else if (block === 'end') {\n        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          top,\n          bottom,\n          height,\n          borderTop,\n          borderBottom + scrollbarHeight,\n          targetBlock,\n          targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline - left - borderLeft\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - right + borderRight + scrollbarWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          left,\n          right,\n          width,\n          borderLeft,\n          borderRight + scrollbarWidth,\n          targetInline,\n          targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      const { scrollLeft, scrollTop } = frame\n      // Ensure scroll coordinates are not out of bounds while applying scroll offsets\n      blockScroll = Math.max(\n        0,\n        Math.min(\n          scrollTop + blockScroll / scaleY,\n          frame.scrollHeight - height / scaleY + scrollbarHeight\n        )\n      )\n      inlineScroll = Math.max(\n        0,\n        Math.min(\n          scrollLeft + inlineScroll / scaleX,\n          frame.scrollWidth - width / scaleX + scrollbarWidth\n        )\n      )\n\n      // Cache the offset so that parent frames can scroll this into view correctly\n      targetBlock += scrollTop - blockScroll\n      targetInline += scrollLeft - inlineScroll\n    }\n\n    computations.push({ el: frame, top: blockScroll, left: inlineScroll })\n  }\n\n  return computations\n}\n"],"names":["isElement","el","nodeType","canOverflow","overflow","skipOverflowHiddenElements","isScrollable","clientHeight","scrollHeight","clientWidth","scrollWidth","style","getComputedStyle","overflowY","overflowX","frame","ownerDocument","defaultView","frameElement","e","getFrameElement","isHiddenByFrame","alignNearest","scrollingEdgeStart","scrollingEdgeEnd","scrollingSize","scrollingBorderStart","scrollingBorderEnd","elementEdgeStart","elementEdgeEnd","elementSize","getParentElement","element","parent","parentElement","getRootNode","host","index","target","options","_a","_b","_c","_d","_e","_f","document","scrollMode","block","inline","boundary","checkBoundary","node","TypeError","scrollingElement","documentElement","frames","cursor","push","body","viewportWidth","window","visualViewport","width","innerWidth","viewportHeight","height","innerHeight","viewportX","scrollX","pageXOffset","viewportY","scrollY","pageYOffset","targetHeight","targetWidth","top","targetTop","right","targetRight","bottom","targetBottom","left","targetLeft","getBoundingClientRect","targetBlock","targetInline","computations","length","frameStyle","borderLeft","parseInt","borderLeftWidth","borderTop","borderTopWidth","borderRight","borderRightWidth","borderBottom","borderBottomWidth","blockScroll","inlineScroll","scrollbarWidth","offsetWidth","scrollbarHeight","offsetHeight","scaleX","scaleY","Math","max","scrollLeft","scrollTop","min"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compute-scroll-into-view",
-  "version": "1.0.19",
+  "version": "2.0.0",
   "description": "The engine that powers scroll-into-view-if-needed",
   "keywords": [
     "if-needed",
@@ -20,72 +20,61 @@
   "license": "MIT",
   "author": "Cody Olsen",
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
-      "types": "./typings/index.d.ts",
+      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.mjs"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "umd:main": "umd/compute-scroll-into-view.min.js",
-  "module": "dist/index.mjs",
-  "source": "src/index.ts",
-  "typings": "typings/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "source": "./src/index.ts",
+  "typings": "./dist/index.d.ts",
   "files": [
     "dist",
-    "typings",
-    "umd/compute-scroll-into-view.min.js",
-    "umd/compute-scroll-into-view.min.js.map"
+    "src"
   ],
   "scripts": {
-    "prebuild": "rimraf 'dist' 'umd'",
-    "build": "npm run build:dist && npm run build:umd",
-    "build:dist": "microbundle -f cjs,es",
-    "build:umd": "microbundle -f umd -o umd",
+    "prebuild": "npx rimraf 'dist'",
+    "build": "pkg build --strict",
     "prepublishOnly": "npm run build",
-    "test": "jest -c integration/jest.config.js",
-    "typecheck": "tsc --noEmit"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,ts,tsx,json,md}": "prettier --write"
-  },
-  "browserify": {
-    "transform": [
-      "loose-envify"
-    ]
+    "test": "npx cross-env JEST_PUPPETEER_CONFIG='jest-puppeteer.config.cjs' jest -c integration/jest.config.cjs",
+    "typecheck": "tsc"
   },
+  "browserslist": [
+    "> 0.2% and supports es6-module and supports es6-module-dynamic-import and not dead and not IE 11",
+    "maintained node versions"
+  ],
   "prettier": {
     "semi": false,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "singleQuote": true
   },
   "devDependencies": {
+    "@sanity/pkg-utils": "^1.20.1",
     "@sanity/semantic-release-preset": "^2.0.2",
-    "husky": "^8.0.1",
-    "jest": "^26.6.3",
-    "jest-junit": "^12.2.0",
-    "jest-puppeteer": "^4.4.0",
-    "lint-staged": "^13.0.3",
-    "microbundle": "^0.15.1",
+    "@types/expect-puppeteer": "^5.0.2",
+    "@types/jest": "^29.2.3",
+    "@types/jest-environment-puppeteer": "^5.0.3",
+    "@types/puppeteer": "^7.0.4",
+    "cross-env": "^7.0.3",
+    "jest": "^29.3.1",
+    "jest-junit": "^15.0.0",
+    "jest-puppeteer": "^6.1.1",
     "prettier": "^2.8.0",
     "prettier-plugin-packagejson": "^2.3.0",
-    "puppeteer": "^5.5.0",
+    "puppeteer": "^19.3.0",
     "rimraf": "^3.0.2",
-    "serve": "^11.3.2",
+    "serve": "^14.1.2",
     "typescript": "^4.9.3"
   },
   "bundlesize": [
     {
-      "path": "./umd/compute-scroll-into-view.min.js",
+      "path": "./dist/index.js",
       "maxSize": "3 kB",
       "compression": "none"
     }

package/src/index.ts

@@ -0,0 +1,507 @@
+// Compute what scrolling needs to be done on required scrolling boxes for target to be in view
+
+// The type names here are named after the spec to make it easier to find more information around what they mean:
+// To reduce churn and reduce things that need be maintained things from the official TS DOM library is used here
+// https://drafts.csswg.org/cssom-view/
+
+// For a definition on what is "block flow direction" exactly, check this: https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction
+
+/**
+ * This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805
+ * @public
+ */
+export type ScrollMode = 'always' | 'if-needed'
+
+/** @public */
+export interface Options {
+  block?: ScrollLogicalPosition
+  inline?: ScrollLogicalPosition
+  scrollMode?: ScrollMode
+  // Custom behavior, not in any spec
+  boundary?: Element | ((parent: Element) => boolean) | null
+  /**
+   * New option that skips auto-scrolling all nodes with overflow: hidden set
+   * See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18
+   * @public
+   */
+  skipOverflowHiddenElements?: boolean
+}
+
+/** @public */
+export interface ScrollAction {
+  el: Element
+  top: number
+  left: number
+}
+
+// @TODO better shadowdom test, 11 = document fragment
+function isElement(el: any): el is Element {
+  return typeof el === 'object' && el != null && el.nodeType === 1
+}
+
+function canOverflow(
+  overflow: string | null,
+  skipOverflowHiddenElements?: boolean
+) {
+  if (skipOverflowHiddenElements && overflow === 'hidden') {
+    return false
+  }
+
+  return overflow !== 'visible' && overflow !== 'clip'
+}
+
+function getFrameElement(el: Element) {
+  if (!el.ownerDocument || !el.ownerDocument.defaultView) {
+    return null
+  }
+
+  try {
+    return el.ownerDocument.defaultView.frameElement
+  } catch (e) {
+    return null
+  }
+}
+
+function isHiddenByFrame(el: Element): boolean {
+  const frame = getFrameElement(el)
+  if (!frame) {
+    return false
+  }
+
+  return (
+    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth
+  )
+}
+
+function isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {
+  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
+    const style = getComputedStyle(el, null)
+    return (
+      canOverflow(style.overflowY, skipOverflowHiddenElements) ||
+      canOverflow(style.overflowX, skipOverflowHiddenElements) ||
+      isHiddenByFrame(el)
+    )
+  }
+
+  return false
+}
+/**
+ * Find out which edge to align against when logical scroll position is "nearest"
+ * Interesting fact: "nearest" works similarily to "if-needed", if the element is fully visible it will not scroll it
+ *
+ * Legends:
+ * ┌────────┐ ┏ ━ ━ ━ ┓
+ * │ target │   frame
+ * └────────┘ ┗ ━ ━ ━ ┛
+ */
+function alignNearest(
+  scrollingEdgeStart: number,
+  scrollingEdgeEnd: number,
+  scrollingSize: number,
+  scrollingBorderStart: number,
+  scrollingBorderEnd: number,
+  elementEdgeStart: number,
+  elementEdgeEnd: number,
+  elementSize: number
+) {
+  /**
+   * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B
+   *
+   *          ┌──┐
+   *        ┏━│━━│━┓
+   *          │  │
+   *        ┃ │  │ ┃        do nothing
+   *          │  │
+   *        ┗━│━━│━┛
+   *          └──┘
+   *
+   *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D
+   *
+   *    ┏ ━ ━ ━ ━ ┓
+   *   ┌───────────┐
+   *   │┃         ┃│        do nothing
+   *   └───────────┘
+   *    ┗ ━ ━ ━ ━ ┛
+   */
+  if (
+    (elementEdgeStart < scrollingEdgeStart &&
+      elementEdgeEnd > scrollingEdgeEnd) ||
+    (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)
+  ) {
+    return 0
+  }
+
+  /**
+   * If element edge A is outside scrolling box edge A and element height is less than scrolling box height
+   *
+   *          ┌──┐
+   *        ┏━│━━│━┓         ┏━┌━━┐━┓
+   *          └──┘             │  │
+   *  from  ┃      ┃     to  ┃ └──┘ ┃
+   *
+   *        ┗━ ━━ ━┛         ┗━ ━━ ━┛
+   *
+   * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height
+   *
+   *        ┏━ ━━ ━┓         ┏━┌━━┐━┓
+   *                           │  │
+   *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃
+   *          │  │             │  │
+   *        ┗━│━━│━┛         ┗━│━━│━┛
+   *          │  │             └──┘
+   *          │  │
+   *          └──┘
+   *
+   * If element edge C is outside scrolling box edge C and element width is less than scrolling box width
+   *
+   *       from                 to
+   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+   *  ┌───┐                 ┌───┐
+   *  │ ┃ │       ┃         ┃   │     ┃
+   *  └───┘                 └───┘
+   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+   *
+   * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width
+   *
+   *       from                 to
+   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+   *        ┌───────────┐   ┌───────────┐
+   *    ┃   │     ┃     │   ┃         ┃ │
+   *        └───────────┘   └───────────┘
+   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+   */
+  if (
+    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||
+    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)
+  ) {
+    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart
+  }
+
+  /**
+   * If element edge B is outside scrolling box edge B and element height is less than scrolling box height
+   *
+   *        ┏━ ━━ ━┓         ┏━ ━━ ━┓
+   *
+   *  from  ┃      ┃     to  ┃ ┌──┐ ┃
+   *          ┌──┐             │  │
+   *        ┗━│━━│━┛         ┗━└━━┘━┛
+   *          └──┘
+   *
+   * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height
+   *
+   *          ┌──┐
+   *          │  │
+   *          │  │             ┌──┐
+   *        ┏━│━━│━┓         ┏━│━━│━┓
+   *          │  │             │  │
+   *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃
+   *                           │  │
+   *        ┗━ ━━ ━┛         ┗━└━━┘━┛
+   *
+   * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width
+   *
+   *           from                 to
+   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+   *  ┌───────────┐           ┌───────────┐
+   *  │     ┃     │   ┃       │ ┃         ┃
+   *  └───────────┘           └───────────┘
+   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+   *
+   * If element edge D is outside scrolling box edge D and element width is less than scrolling box width
+   *
+   *           from                 to
+   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+   *                ┌───┐             ┌───┐
+   *        ┃       │ ┃ │       ┃     │   ┃
+   *                └───┘             └───┘
+   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+   *
+   */
+  if (
+    (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||
+    (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)
+  ) {
+    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd
+  }
+
+  return 0
+}
+
+function getParentElement(element: Node): Element | null {
+  const parent = element.parentElement
+  if (parent == null) {
+    return (element.getRootNode() as ShadowRoot).host || null
+  }
+  return parent
+}
+
+/** @public */
+export default (target: Element, options: Options): ScrollAction[] => {
+  if (typeof document === 'undefined') {
+    // If there's no DOM we assume it's not in a browser environment
+    return []
+  }
+
+  const { scrollMode, block, inline, boundary, skipOverflowHiddenElements } =
+    options
+  // Allow using a callback to check the boundary
+  // The default behavior is to check if the current target matches the boundary element or not
+  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)
+  const checkBoundary =
+    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary
+
+  if (!isElement(target)) {
+    throw new TypeError('Invalid target')
+  }
+
+  // Used to handle the top most element that can be scrolled
+  const scrollingElement = document.scrollingElement || document.documentElement
+
+  // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box
+  const frames: Element[] = []
+  let cursor: Element | null = target
+  while (isElement(cursor) && checkBoundary(cursor)) {
+    // Move cursor to parent
+    cursor = getParentElement(cursor)
+
+    // Stop when we reach the viewport
+    if (cursor === scrollingElement) {
+      frames.push(cursor)
+      break
+    }
+
+    // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable
+    if (
+      cursor != null &&
+      cursor === document.body &&
+      isScrollable(cursor) &&
+      !isScrollable(document.documentElement)
+    ) {
+      continue
+    }
+
+    // Now we check if the element is scrollable, this code only runs if the loop haven't already hit the viewport or a custom boundary
+    if (cursor != null && isScrollable(cursor, skipOverflowHiddenElements)) {
+      frames.push(cursor)
+    }
+  }
+
+  // Support pinch-zooming properly, making sure elements scroll into the visual viewport
+  // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height
+  // and viewport dimensions on window.innerWidth/Height
+  // https://www.quirksmode.org/mobile/viewports2.html
+  // https://bokand.github.io/viewport/index.html
+  const viewportWidth = window.visualViewport?.width ?? innerWidth
+  const viewportHeight = window.visualViewport?.height ?? innerHeight
+
+  // Newer browsers supports scroll[X|Y], page[X|Y]Offset is
+  const viewportX = window.scrollX ?? pageXOffset
+  const viewportY = window.scrollY ?? pageYOffset
+
+  const {
+    height: targetHeight,
+    width: targetWidth,
+    top: targetTop,
+    right: targetRight,
+    bottom: targetBottom,
+    left: targetLeft,
+  } = target.getBoundingClientRect()
+
+  // These values mutate as we loop through and generate scroll coordinates
+  let targetBlock: number =
+    block === 'start' || block === 'nearest'
+      ? targetTop
+      : block === 'end'
+      ? targetBottom
+      : targetTop + targetHeight / 2 // block === 'center
+  let targetInline: number =
+    inline === 'center'
+      ? targetLeft + targetWidth / 2
+      : inline === 'end'
+      ? targetRight
+      : targetLeft // inline === 'start || inline === 'nearest
+
+  // Collect new scroll positions
+  const computations: ScrollAction[] = []
+  // In chrome there's no longer a difference between caching the `frames.length` to a var or not, so we don't in this case (size > speed anyways)
+  for (let index = 0; index < frames.length; index++) {
+    const frame = frames[index]
+
+    // @TODO add a shouldScroll hook here that allows userland code to take control
+
+    const { height, width, top, right, bottom, left } =
+      frame.getBoundingClientRect()
+
+    // If the element is already visible we can end it here
+    // @TODO targetBlock and targetInline should be taken into account to be compliant with https://github.com/w3c/csswg-drafts/pull/1805/files#diff-3c17f0e43c20f8ecf89419d49e7ef5e0R1333
+    if (
+      scrollMode === 'if-needed' &&
+      targetTop >= 0 &&
+      targetLeft >= 0 &&
+      targetBottom <= viewportHeight &&
+      targetRight <= viewportWidth &&
+      targetTop >= top &&
+      targetBottom <= bottom &&
+      targetLeft >= left &&
+      targetRight <= right
+    ) {
+      // Break the loop and return the computations for things that are not fully visible
+      return computations
+    }
+
+    const frameStyle = getComputedStyle(frame)
+    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)
+    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)
+    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)
+    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)
+
+    let blockScroll: number = 0
+    let inlineScroll: number = 0
+
+    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here
+    // @TODO find out if the "as HTMLElement" overrides can be dropped
+    const scrollbarWidth =
+      'offsetWidth' in frame
+        ? (frame as HTMLElement).offsetWidth -
+          (frame as HTMLElement).clientWidth -
+          borderLeft -
+          borderRight
+        : 0
+    const scrollbarHeight =
+      'offsetHeight' in frame
+        ? (frame as HTMLElement).offsetHeight -
+          (frame as HTMLElement).clientHeight -
+          borderTop -
+          borderBottom
+        : 0
+
+    const scaleX =
+      'offsetWidth' in frame
+        ? (frame as HTMLElement).offsetWidth === 0
+          ? 0
+          : width / (frame as HTMLElement).offsetWidth
+        : 0
+    const scaleY =
+      'offsetHeight' in frame
+        ? (frame as HTMLElement).offsetHeight === 0
+          ? 0
+          : height / (frame as HTMLElement).offsetHeight
+        : 0
+
+    if (scrollingElement === frame) {
+      // Handle viewport logic (document.documentElement or document.body)
+
+      if (block === 'start') {
+        blockScroll = targetBlock
+      } else if (block === 'end') {
+        blockScroll = targetBlock - viewportHeight
+      } else if (block === 'nearest') {
+        blockScroll = alignNearest(
+          viewportY,
+          viewportY + viewportHeight,
+          viewportHeight,
+          borderTop,
+          borderBottom,
+          viewportY + targetBlock,
+          viewportY + targetBlock + targetHeight,
+          targetHeight
+        )
+      } else {
+        // block === 'center' is the default
+        blockScroll = targetBlock - viewportHeight / 2
+      }
+
+      if (inline === 'start') {
+        inlineScroll = targetInline
+      } else if (inline === 'center') {
+        inlineScroll = targetInline - viewportWidth / 2
+      } else if (inline === 'end') {
+        inlineScroll = targetInline - viewportWidth
+      } else {
+        // inline === 'nearest' is the default
+        inlineScroll = alignNearest(
+          viewportX,
+          viewportX + viewportWidth,
+          viewportWidth,
+          borderLeft,
+          borderRight,
+          viewportX + targetInline,
+          viewportX + targetInline + targetWidth,
+          targetWidth
+        )
+      }
+
+      // Apply scroll position offsets and ensure they are within bounds
+      // @TODO add more test cases to cover this 100%
+      blockScroll = Math.max(0, blockScroll + viewportY)
+      inlineScroll = Math.max(0, inlineScroll + viewportX)
+    } else {
+      // Handle each scrolling frame that might exist between the target and the viewport
+
+      if (block === 'start') {
+        blockScroll = targetBlock - top - borderTop
+      } else if (block === 'end') {
+        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight
+      } else if (block === 'nearest') {
+        blockScroll = alignNearest(
+          top,
+          bottom,
+          height,
+          borderTop,
+          borderBottom + scrollbarHeight,
+          targetBlock,
+          targetBlock + targetHeight,
+          targetHeight
+        )
+      } else {
+        // block === 'center' is the default
+        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2
+      }
+
+      if (inline === 'start') {
+        inlineScroll = targetInline - left - borderLeft
+      } else if (inline === 'center') {
+        inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2
+      } else if (inline === 'end') {
+        inlineScroll = targetInline - right + borderRight + scrollbarWidth
+      } else {
+        // inline === 'nearest' is the default
+        inlineScroll = alignNearest(
+          left,
+          right,
+          width,
+          borderLeft,
+          borderRight + scrollbarWidth,
+          targetInline,
+          targetInline + targetWidth,
+          targetWidth
+        )
+      }
+
+      const { scrollLeft, scrollTop } = frame
+      // Ensure scroll coordinates are not out of bounds while applying scroll offsets
+      blockScroll = Math.max(
+        0,
+        Math.min(
+          scrollTop + blockScroll / scaleY,
+          frame.scrollHeight - height / scaleY + scrollbarHeight
+        )
+      )
+      inlineScroll = Math.max(
+        0,
+        Math.min(
+          scrollLeft + inlineScroll / scaleX,
+          frame.scrollWidth - width / scaleX + scrollbarWidth
+        )
+      )
+
+      // Cache the offset so that parent frames can scroll this into view correctly
+      targetBlock += scrollTop - blockScroll
+      targetInline += scrollLeft - inlineScroll
+    }
+
+    computations.push({ el: frame, top: blockScroll, left: inlineScroll })
+  }
+
+  return computations
+}

package/dist/index.mjs

@@ -1,2 +0,0 @@
-function t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,a="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var s=document.scrollingElement||document.documentElement,c=[],g=e;t(g)&&a(g);){if((g=g.parentElement)===s){c.push(g);break}null!=g&&g===document.body&&n(g)&&!n(document.documentElement)||null!=g&&n(g,u)&&c.push(g)}for(var p=o.visualViewport?o.visualViewport.width:innerWidth,m=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),H=W.height,b=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+H/2,I="center"===f?V+b/2:"end"===f?E:V,C=[],T=0;T<c.length;T++){var k=c[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=m&&E<=p&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0,N="offsetWidth"in k?0===k.offsetWidth?0:O/k.offsetWidth:0,P="offsetHeight"in k?0===k.offsetHeight?0:D/k.offsetHeight:0;if(s===k)F="start"===d?x:"end"===d?x-m:"nearest"===d?r(v,v+m,m,q,A,v+x,v+x+H,H):x-m/2,G="start"===f?I:"center"===f?I-p/2:"end"===f?I-p:r(w,w+p,p,j,z,w+I,w+I+b,b),F=Math.max(0,F+v),G=Math.max(0,G+w);else{F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?r(R,Y,D,q,A+K,x,x+H,H):x-(R+D/2)+K/2,G="start"===f?I-L-j:"center"===f?I-(L+O/2)+J/2:"end"===f?I-X+z+J:r(L,X,O,j,z+J,I,I+b,b);var Q=k.scrollLeft,U=k.scrollTop;x+=U-(F=Math.max(0,Math.min(U+F/P,k.scrollHeight-D/P+K))),I+=Q-(G=Math.max(0,Math.min(Q+G/N,k.scrollWidth-O/N+J)))}C.push({el:k,top:F,left:G})}return C};export{i as default};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["// Compute what scrolling needs to be done on required scrolling boxes for target to be in view\n\n// The type names here are named after the spec to make it easier to find more information around what they mean:\n// To reduce churn and reduce things that need be maintained things from the official TS DOM library is used here\n// https://drafts.csswg.org/cssom-view/\n\n// For a definition on what is \"block flow direction\" exactly, check this: https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction\n\n// add support for visualViewport object currently implemented in chrome\ninterface visualViewport {\n  height: number\n  width: number\n}\n\ntype ScrollLogicalPosition = 'start' | 'center' | 'end' | 'nearest'\n// This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805\ntype ScrollMode = 'always' | 'if-needed'\n// New option that skips auto-scrolling all nodes with overflow: hidden set\n// See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18\ntype SkipOverflowHiddenElements = boolean\n\ninterface Options {\n  block?: ScrollLogicalPosition\n  inline?: ScrollLogicalPosition\n  scrollMode?: ScrollMode\n  boundary?: CustomScrollBoundary\n  skipOverflowHiddenElements?: SkipOverflowHiddenElements\n}\n\n// Custom behavior, not in any spec\ntype CustomScrollBoundaryCallback = (parent: Element) => boolean\ntype CustomScrollBoundary = Element | CustomScrollBoundaryCallback | null\ninterface CustomScrollAction {\n  el: Element\n  top: number\n  left: number\n}\n\n// @TODO better shadowdom test, 11 = document fragment\nfunction isElement(el: any): el is Element {\n  return typeof el === 'object' && el != null && el.nodeType === 1\n}\n\nfunction canOverflow(\n  overflow: string | null,\n  skipOverflowHiddenElements?: boolean\n) {\n  if (skipOverflowHiddenElements && overflow === 'hidden') {\n    return false\n  }\n\n  return overflow !== 'visible' && overflow !== 'clip'\n}\n\nfunction getFrameElement(el: Element) {\n  if (!el.ownerDocument || !el.ownerDocument.defaultView) {\n    return null\n  }\n\n  try {\n    return el.ownerDocument.defaultView.frameElement\n  } catch (e) {\n    return null\n  }\n}\n\nfunction isHiddenByFrame(el: Element): boolean {\n  const frame = getFrameElement(el)\n  if (!frame) {\n    return false\n  }\n\n  return (\n    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth\n  )\n}\n\nfunction isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {\n  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {\n    const style = getComputedStyle(el, null)\n    return (\n      canOverflow(style.overflowY, skipOverflowHiddenElements) ||\n      canOverflow(style.overflowX, skipOverflowHiddenElements) ||\n      isHiddenByFrame(el)\n    )\n  }\n\n  return false\n}\n/**\n * Find out which edge to align against when logical scroll position is \"nearest\"\n * Interesting fact: \"nearest\" works similarily to \"if-needed\", if the element is fully visible it will not scroll it\n *\n * Legends:\n * ┌────────┐ ┏ ━ ━ ━ ┓\n * │ target │   frame\n * └────────┘ ┗ ━ ━ ━ ┛\n */\nfunction alignNearest(\n  scrollingEdgeStart: number,\n  scrollingEdgeEnd: number,\n  scrollingSize: number,\n  scrollingBorderStart: number,\n  scrollingBorderEnd: number,\n  elementEdgeStart: number,\n  elementEdgeEnd: number,\n  elementSize: number\n) {\n  /**\n   * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓\n   *          │  │\n   *        ┃ │  │ ┃        do nothing\n   *          │  │\n   *        ┗━│━━│━┛\n   *          └──┘\n   *\n   *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D\n   *\n   *    ┏ ━ ━ ━ ━ ┓\n   *   ┌───────────┐\n   *   │┃         ┃│        do nothing\n   *   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart < scrollingEdgeStart &&\n      elementEdgeEnd > scrollingEdgeEnd) ||\n    (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)\n  ) {\n    return 0\n  }\n\n  /**\n   * If element edge A is outside scrolling box edge A and element height is less than scrolling box height\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓         ┏━┌━━┐━┓\n   *          └──┘             │  │\n   *  from  ┃      ┃     to  ┃ └──┘ ┃\n   *\n   *        ┗━ ━━ ━┛         ┗━ ━━ ━┛\n   *\n   * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━┌━━┐━┓\n   *                           │  │\n   *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃\n   *          │  │             │  │\n   *        ┗━│━━│━┛         ┗━│━━│━┛\n   *          │  │             └──┘\n   *          │  │\n   *          └──┘\n   *\n   * If element edge C is outside scrolling box edge C and element width is less than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───┐                 ┌───┐\n   *  │ ┃ │       ┃         ┃   │     ┃\n   *  └───┘                 └───┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *        ┌───────────┐   ┌───────────┐\n   *    ┃   │     ┃     │   ┃         ┃ │\n   *        └───────────┘   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||\n    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)\n  ) {\n    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart\n  }\n\n  /**\n   * If element edge B is outside scrolling box edge B and element height is less than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━ ━━ ━┓\n   *\n   *  from  ┃      ┃     to  ┃ ┌──┐ ┃\n   *          ┌──┐             │  │\n   *        ┗━│━━│━┛         ┗━└━━┘━┛\n   *          └──┘\n   *\n   * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height\n   *\n   *          ┌──┐\n   *          │  │\n   *          │  │             ┌──┐\n   *        ┏━│━━│━┓         ┏━│━━│━┓\n   *          │  │             │  │\n   *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃\n   *                           │  │\n   *        ┗━ ━━ ━┛         ┗━└━━┘━┛\n   *\n   * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───────────┐           ┌───────────┐\n   *  │     ┃     │   ┃       │ ┃         ┃\n   *  └───────────┘           └───────────┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is less than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *                ┌───┐             ┌───┐\n   *        ┃       │ ┃ │       ┃     │   ┃\n   *                └───┘             └───┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   */\n  if (\n    (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||\n    (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)\n  ) {\n    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd\n  }\n\n  return 0\n}\n\nexport default (target: Element, options: Options): CustomScrollAction[] => {\n  //TODO: remove this hack when microbundle will support typescript >= 4.0\n  const windowWithViewport = window as unknown as Window & {\n    visualViewport: visualViewport\n  }\n\n  const { scrollMode, block, inline, boundary, skipOverflowHiddenElements } =\n    options\n  // Allow using a callback to check the boundary\n  // The default behavior is to check if the current target matches the boundary element or not\n  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)\n  const checkBoundary =\n    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary\n\n  if (!isElement(target)) {\n    throw new TypeError('Invalid target')\n  }\n\n  // Used to handle the top most element that can be scrolled\n  const scrollingElement = document.scrollingElement || document.documentElement\n\n  // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box\n  const frames: Element[] = []\n  let cursor: Element | null = target\n  while (isElement(cursor) && checkBoundary(cursor)) {\n    // Move cursor to parent\n    cursor = cursor.parentElement\n\n    // Stop when we reach the viewport\n    if (cursor === scrollingElement) {\n      frames.push(cursor)\n      break\n    }\n\n    // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable\n    if (\n      cursor != null &&\n      cursor === document.body &&\n      isScrollable(cursor) &&\n      !isScrollable(document.documentElement)\n    ) {\n      continue\n    }\n\n    // Now we check if the element is scrollable, this code only runs if the loop haven't already hit the viewport or a custom boundary\n    if (cursor != null && isScrollable(cursor, skipOverflowHiddenElements)) {\n      frames.push(cursor)\n    }\n  }\n\n  // Support pinch-zooming properly, making sure elements scroll into the visual viewport\n  // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height\n  // and viewport dimensions on window.innerWidth/Height\n  // https://www.quirksmode.org/mobile/viewports2.html\n  // https://bokand.github.io/viewport/index.html\n  const viewportWidth = windowWithViewport.visualViewport\n    ? windowWithViewport.visualViewport.width\n    : innerWidth\n  const viewportHeight = windowWithViewport.visualViewport\n    ? windowWithViewport.visualViewport.height\n    : innerHeight\n\n  // Newer browsers supports scroll[X|Y], page[X|Y]Offset is\n  const viewportX = window.scrollX || pageXOffset\n  const viewportY = window.scrollY || pageYOffset\n\n  const {\n    height: targetHeight,\n    width: targetWidth,\n    top: targetTop,\n    right: targetRight,\n    bottom: targetBottom,\n    left: targetLeft,\n  } = target.getBoundingClientRect()\n\n  // These values mutate as we loop through and generate scroll coordinates\n  let targetBlock: number =\n    block === 'start' || block === 'nearest'\n      ? targetTop\n      : block === 'end'\n      ? targetBottom\n      : targetTop + targetHeight / 2 // block === 'center\n  let targetInline: number =\n    inline === 'center'\n      ? targetLeft + targetWidth / 2\n      : inline === 'end'\n      ? targetRight\n      : targetLeft // inline === 'start || inline === 'nearest\n\n  // Collect new scroll positions\n  const computations: CustomScrollAction[] = []\n  // In chrome there's no longer a difference between caching the `frames.length` to a var or not, so we don't in this case (size > speed anyways)\n  for (let index = 0; index < frames.length; index++) {\n    const frame = frames[index]\n\n    // @TODO add a shouldScroll hook here that allows userland code to take control\n\n    const { height, width, top, right, bottom, left } =\n      frame.getBoundingClientRect()\n\n    // If the element is already visible we can end it here\n    // @TODO targetBlock and targetInline should be taken into account to be compliant with https://github.com/w3c/csswg-drafts/pull/1805/files#diff-3c17f0e43c20f8ecf89419d49e7ef5e0R1333\n    if (\n      scrollMode === 'if-needed' &&\n      targetTop >= 0 &&\n      targetLeft >= 0 &&\n      targetBottom <= viewportHeight &&\n      targetRight <= viewportWidth &&\n      targetTop >= top &&\n      targetBottom <= bottom &&\n      targetLeft >= left &&\n      targetRight <= right\n    ) {\n      // Break the loop and return the computations for things that are not fully visible\n      return computations\n    }\n\n    const frameStyle = getComputedStyle(frame)\n    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)\n    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)\n    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)\n    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)\n\n    let blockScroll: number = 0\n    let inlineScroll: number = 0\n\n    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here\n    // @TODO find out if the \"as HTMLElement\" overrides can be dropped\n    const scrollbarWidth =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth -\n          (frame as HTMLElement).clientWidth -\n          borderLeft -\n          borderRight\n        : 0\n    const scrollbarHeight =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight -\n          (frame as HTMLElement).clientHeight -\n          borderTop -\n          borderBottom\n        : 0\n\n    const scaleX =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth === 0\n          ? 0\n          : width / (frame as HTMLElement).offsetWidth\n        : 0\n    const scaleY =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight === 0\n          ? 0\n          : height / (frame as HTMLElement).offsetHeight\n        : 0\n\n    if (scrollingElement === frame) {\n      // Handle viewport logic (document.documentElement or document.body)\n\n      if (block === 'start') {\n        blockScroll = targetBlock\n      } else if (block === 'end') {\n        blockScroll = targetBlock - viewportHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          viewportY,\n          viewportY + viewportHeight,\n          viewportHeight,\n          borderTop,\n          borderBottom,\n          viewportY + targetBlock,\n          viewportY + targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - viewportHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - viewportWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - viewportWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          viewportX,\n          viewportX + viewportWidth,\n          viewportWidth,\n          borderLeft,\n          borderRight,\n          viewportX + targetInline,\n          viewportX + targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      // Apply scroll position offsets and ensure they are within bounds\n      // @TODO add more test cases to cover this 100%\n      blockScroll = Math.max(0, blockScroll + viewportY)\n      inlineScroll = Math.max(0, inlineScroll + viewportX)\n    } else {\n      // Handle each scrolling frame that might exist between the target and the viewport\n\n      if (block === 'start') {\n        blockScroll = targetBlock - top - borderTop\n      } else if (block === 'end') {\n        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          top,\n          bottom,\n          height,\n          borderTop,\n          borderBottom + scrollbarHeight,\n          targetBlock,\n          targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline - left - borderLeft\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - right + borderRight + scrollbarWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          left,\n          right,\n          width,\n          borderLeft,\n          borderRight + scrollbarWidth,\n          targetInline,\n          targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      const { scrollLeft, scrollTop } = frame\n      // Ensure scroll coordinates are not out of bounds while applying scroll offsets\n      blockScroll = Math.max(\n        0,\n        Math.min(\n          scrollTop + blockScroll / scaleY,\n          frame.scrollHeight - height / scaleY + scrollbarHeight\n        )\n      )\n      inlineScroll = Math.max(\n        0,\n        Math.min(\n          scrollLeft + inlineScroll / scaleX,\n          frame.scrollWidth - width / scaleX + scrollbarWidth\n        )\n      )\n\n      // Cache the offset so that parent frames can scroll this into view correctly\n      targetBlock += scrollTop - blockScroll\n      targetInline += scrollLeft - inlineScroll\n    }\n\n    computations.push({ el: frame, top: blockScroll, left: inlineScroll })\n  }\n\n  return computations\n}\n"],"names":["isElement","el","nodeType","canOverflow","overflow","skipOverflowHiddenElements","isScrollable","clientHeight","scrollHeight","clientWidth","scrollWidth","style","getComputedStyle","overflowY","overflowX","frame","ownerDocument","defaultView","frameElement","e","getFrameElement","isHiddenByFrame","alignNearest","scrollingEdgeStart","scrollingEdgeEnd","scrollingSize","scrollingBorderStart","scrollingBorderEnd","elementEdgeStart","elementEdgeEnd","elementSize","target","options","windowWithViewport","window","scrollMode","block","inline","boundary","checkBoundary","node","TypeError","scrollingElement","document","documentElement","frames","cursor","parentElement","push","body","viewportWidth","visualViewport","width","innerWidth","viewportHeight","height","innerHeight","viewportX","scrollX","pageXOffset","viewportY","scrollY","pageYOffset","getBoundingClientRect","targetHeight","targetWidth","targetTop","top","targetRight","right","targetBottom","bottom","targetLeft","left","targetBlock","targetInline","computations","index","length","frameStyle","borderLeft","parseInt","borderLeftWidth","borderTop","borderTopWidth","borderRight","borderRightWidth","borderBottom","borderBottomWidth","blockScroll","inlineScroll","scrollbarWidth","offsetWidth","scrollbarHeight","offsetHeight","scaleX","scaleY","Math","max","scrollLeft","scrollTop","min"],"mappings":"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"}

package/typings/index.d.ts

@@ -1,19 +0,0 @@
-type ScrollLogicalPosition = 'start' | 'center' | 'end' | 'nearest';
-type ScrollMode = 'always' | 'if-needed';
-type SkipOverflowHiddenElements = boolean;
-interface Options {
-    block?: ScrollLogicalPosition;
-    inline?: ScrollLogicalPosition;
-    scrollMode?: ScrollMode;
-    boundary?: CustomScrollBoundary;
-    skipOverflowHiddenElements?: SkipOverflowHiddenElements;
-}
-type CustomScrollBoundaryCallback = (parent: Element) => boolean;
-type CustomScrollBoundary = Element | CustomScrollBoundaryCallback | null;
-interface CustomScrollAction {
-    el: Element;
-    top: number;
-    left: number;
-}
-declare const _default: (target: Element, options: Options) => CustomScrollAction[];
-export default _default;

package/umd/compute-scroll-into-view.min.js

@@ -1,2 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).computeScrollIntoView=t()}(this,function(){function e(e){return"object"==typeof e&&null!=e&&1===e.nodeType}function t(e,t){return(!t||"hidden"!==e)&&"visible"!==e&&"clip"!==e}function n(e,n){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var i=getComputedStyle(e,null);return t(i.overflowY,n)||t(i.overflowX,n)||function(e){var t=function(e){if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function i(e,t,n,i,o,r,l,f){return r<e&&l>t||r>e&&l<t?0:r<=e&&f<=n||l>=t&&f>=n?r-e-i:l>t&&f<n||r<e&&f>n?l-t+o:0}return function(t,o){var r=window,l=o.scrollMode,f=o.block,d=o.inline,u=o.boundary,h=o.skipOverflowHiddenElements,s="function"==typeof u?u:function(e){return e!==u};if(!e(t))throw new TypeError("Invalid target");for(var c=document.scrollingElement||document.documentElement,a=[],p=t;e(p)&&s(p);){if((p=p.parentElement)===c){a.push(p);break}null!=p&&p===document.body&&n(p)&&!n(document.documentElement)||null!=p&&n(p,h)&&a.push(p)}for(var g=r.visualViewport?r.visualViewport.width:innerWidth,m=r.visualViewport?r.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=t.getBoundingClientRect(),b=W.height,y=W.width,H=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===f||"nearest"===f?H:"end"===f?M:H+b/2,I="center"===d?V+y/2:"end"===d?E:V,T=[],C=0;C<a.length;C++){var k=a[C],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,S=B.right,X=B.bottom,Y=B.left;if("if-needed"===l&&H>=0&&V>=0&&M<=m&&E<=g&&H>=R&&M<=X&&V>=Y&&E<=S)return T;var j=getComputedStyle(k),L=parseInt(j.borderLeftWidth,10),q=parseInt(j.borderTopWidth,10),z=parseInt(j.borderRightWidth,10),A=parseInt(j.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-L-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0,N="offsetWidth"in k?0===k.offsetWidth?0:O/k.offsetWidth:0,P="offsetHeight"in k?0===k.offsetHeight?0:D/k.offsetHeight:0;if(c===k)F="start"===f?x:"end"===f?x-m:"nearest"===f?i(v,v+m,m,q,A,v+x,v+x+b,b):x-m/2,G="start"===d?I:"center"===d?I-g/2:"end"===d?I-g:i(w,w+g,g,L,z,w+I,w+I+y,y),F=Math.max(0,F+v),G=Math.max(0,G+w);else{F="start"===f?x-R-q:"end"===f?x-X+A+K:"nearest"===f?i(R,X,D,q,A+K,x,x+b,b):x-(R+D/2)+K/2,G="start"===d?I-Y-L:"center"===d?I-(Y+O/2)+J/2:"end"===d?I-S+z+J:i(Y,S,O,L,z+J,I,I+y,y);var Q=k.scrollLeft,U=k.scrollTop;x+=U-(F=Math.max(0,Math.min(U+F/P,k.scrollHeight-D/P+K))),I+=Q-(G=Math.max(0,Math.min(Q+G/N,k.scrollWidth-O/N+J)))}T.push({el:k,top:F,left:G})}return T}});
-//# sourceMappingURL=compute-scroll-into-view.min.js.map

package/umd/compute-scroll-into-view.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compute-scroll-into-view.min.js","sources":["../src/index.ts"],"sourcesContent":["// Compute what scrolling needs to be done on required scrolling boxes for target to be in view\n\n// The type names here are named after the spec to make it easier to find more information around what they mean:\n// To reduce churn and reduce things that need be maintained things from the official TS DOM library is used here\n// https://drafts.csswg.org/cssom-view/\n\n// For a definition on what is \"block flow direction\" exactly, check this: https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction\n\n// add support for visualViewport object currently implemented in chrome\ninterface visualViewport {\n  height: number\n  width: number\n}\n\ntype ScrollLogicalPosition = 'start' | 'center' | 'end' | 'nearest'\n// This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805\ntype ScrollMode = 'always' | 'if-needed'\n// New option that skips auto-scrolling all nodes with overflow: hidden set\n// See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18\ntype SkipOverflowHiddenElements = boolean\n\ninterface Options {\n  block?: ScrollLogicalPosition\n  inline?: ScrollLogicalPosition\n  scrollMode?: ScrollMode\n  boundary?: CustomScrollBoundary\n  skipOverflowHiddenElements?: SkipOverflowHiddenElements\n}\n\n// Custom behavior, not in any spec\ntype CustomScrollBoundaryCallback = (parent: Element) => boolean\ntype CustomScrollBoundary = Element | CustomScrollBoundaryCallback | null\ninterface CustomScrollAction {\n  el: Element\n  top: number\n  left: number\n}\n\n// @TODO better shadowdom test, 11 = document fragment\nfunction isElement(el: any): el is Element {\n  return typeof el === 'object' && el != null && el.nodeType === 1\n}\n\nfunction canOverflow(\n  overflow: string | null,\n  skipOverflowHiddenElements?: boolean\n) {\n  if (skipOverflowHiddenElements && overflow === 'hidden') {\n    return false\n  }\n\n  return overflow !== 'visible' && overflow !== 'clip'\n}\n\nfunction getFrameElement(el: Element) {\n  if (!el.ownerDocument || !el.ownerDocument.defaultView) {\n    return null\n  }\n\n  try {\n    return el.ownerDocument.defaultView.frameElement\n  } catch (e) {\n    return null\n  }\n}\n\nfunction isHiddenByFrame(el: Element): boolean {\n  const frame = getFrameElement(el)\n  if (!frame) {\n    return false\n  }\n\n  return (\n    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth\n  )\n}\n\nfunction isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {\n  if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {\n    const style = getComputedStyle(el, null)\n    return (\n      canOverflow(style.overflowY, skipOverflowHiddenElements) ||\n      canOverflow(style.overflowX, skipOverflowHiddenElements) ||\n      isHiddenByFrame(el)\n    )\n  }\n\n  return false\n}\n/**\n * Find out which edge to align against when logical scroll position is \"nearest\"\n * Interesting fact: \"nearest\" works similarily to \"if-needed\", if the element is fully visible it will not scroll it\n *\n * Legends:\n * ┌────────┐ ┏ ━ ━ ━ ┓\n * │ target │   frame\n * └────────┘ ┗ ━ ━ ━ ┛\n */\nfunction alignNearest(\n  scrollingEdgeStart: number,\n  scrollingEdgeEnd: number,\n  scrollingSize: number,\n  scrollingBorderStart: number,\n  scrollingBorderEnd: number,\n  elementEdgeStart: number,\n  elementEdgeEnd: number,\n  elementSize: number\n) {\n  /**\n   * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓\n   *          │  │\n   *        ┃ │  │ ┃        do nothing\n   *          │  │\n   *        ┗━│━━│━┛\n   *          └──┘\n   *\n   *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D\n   *\n   *    ┏ ━ ━ ━ ━ ┓\n   *   ┌───────────┐\n   *   │┃         ┃│        do nothing\n   *   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart < scrollingEdgeStart &&\n      elementEdgeEnd > scrollingEdgeEnd) ||\n    (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)\n  ) {\n    return 0\n  }\n\n  /**\n   * If element edge A is outside scrolling box edge A and element height is less than scrolling box height\n   *\n   *          ┌──┐\n   *        ┏━│━━│━┓         ┏━┌━━┐━┓\n   *          └──┘             │  │\n   *  from  ┃      ┃     to  ┃ └──┘ ┃\n   *\n   *        ┗━ ━━ ━┛         ┗━ ━━ ━┛\n   *\n   * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━┌━━┐━┓\n   *                           │  │\n   *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃\n   *          │  │             │  │\n   *        ┗━│━━│━┛         ┗━│━━│━┛\n   *          │  │             └──┘\n   *          │  │\n   *          └──┘\n   *\n   * If element edge C is outside scrolling box edge C and element width is less than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───┐                 ┌───┐\n   *  │ ┃ │       ┃         ┃   │     ┃\n   *  └───┘                 └───┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width\n   *\n   *       from                 to\n   *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *        ┌───────────┐   ┌───────────┐\n   *    ┃   │     ┃     │   ┃         ┃ │\n   *        └───────────┘   └───────────┘\n   *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   */\n  if (\n    (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||\n    (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)\n  ) {\n    return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart\n  }\n\n  /**\n   * If element edge B is outside scrolling box edge B and element height is less than scrolling box height\n   *\n   *        ┏━ ━━ ━┓         ┏━ ━━ ━┓\n   *\n   *  from  ┃      ┃     to  ┃ ┌──┐ ┃\n   *          ┌──┐             │  │\n   *        ┗━│━━│━┛         ┗━└━━┘━┛\n   *          └──┘\n   *\n   * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height\n   *\n   *          ┌──┐\n   *          │  │\n   *          │  │             ┌──┐\n   *        ┏━│━━│━┓         ┏━│━━│━┓\n   *          │  │             │  │\n   *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃\n   *                           │  │\n   *        ┗━ ━━ ━┛         ┗━└━━┘━┛\n   *\n   * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *  ┌───────────┐           ┌───────────┐\n   *  │     ┃     │   ┃       │ ┃         ┃\n   *  └───────────┘           └───────────┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   * If element edge D is outside scrolling box edge D and element width is less than scrolling box width\n   *\n   *           from                 to\n   *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓\n   *                ┌───┐             ┌───┐\n   *        ┃       │ ┃ │       ┃     │   ┃\n   *                └───┘             └───┘\n   *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛\n   *\n   */\n  if (\n    (elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||\n    (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)\n  ) {\n    return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd\n  }\n\n  return 0\n}\n\nexport default (target: Element, options: Options): CustomScrollAction[] => {\n  //TODO: remove this hack when microbundle will support typescript >= 4.0\n  const windowWithViewport = window as unknown as Window & {\n    visualViewport: visualViewport\n  }\n\n  const { scrollMode, block, inline, boundary, skipOverflowHiddenElements } =\n    options\n  // Allow using a callback to check the boundary\n  // The default behavior is to check if the current target matches the boundary element or not\n  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)\n  const checkBoundary =\n    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary\n\n  if (!isElement(target)) {\n    throw new TypeError('Invalid target')\n  }\n\n  // Used to handle the top most element that can be scrolled\n  const scrollingElement = document.scrollingElement || document.documentElement\n\n  // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box\n  const frames: Element[] = []\n  let cursor: Element | null = target\n  while (isElement(cursor) && checkBoundary(cursor)) {\n    // Move cursor to parent\n    cursor = cursor.parentElement\n\n    // Stop when we reach the viewport\n    if (cursor === scrollingElement) {\n      frames.push(cursor)\n      break\n    }\n\n    // Skip document.body if it's not the scrollingElement and documentElement isn't independently scrollable\n    if (\n      cursor != null &&\n      cursor === document.body &&\n      isScrollable(cursor) &&\n      !isScrollable(document.documentElement)\n    ) {\n      continue\n    }\n\n    // Now we check if the element is scrollable, this code only runs if the loop haven't already hit the viewport or a custom boundary\n    if (cursor != null && isScrollable(cursor, skipOverflowHiddenElements)) {\n      frames.push(cursor)\n    }\n  }\n\n  // Support pinch-zooming properly, making sure elements scroll into the visual viewport\n  // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height\n  // and viewport dimensions on window.innerWidth/Height\n  // https://www.quirksmode.org/mobile/viewports2.html\n  // https://bokand.github.io/viewport/index.html\n  const viewportWidth = windowWithViewport.visualViewport\n    ? windowWithViewport.visualViewport.width\n    : innerWidth\n  const viewportHeight = windowWithViewport.visualViewport\n    ? windowWithViewport.visualViewport.height\n    : innerHeight\n\n  // Newer browsers supports scroll[X|Y], page[X|Y]Offset is\n  const viewportX = window.scrollX || pageXOffset\n  const viewportY = window.scrollY || pageYOffset\n\n  const {\n    height: targetHeight,\n    width: targetWidth,\n    top: targetTop,\n    right: targetRight,\n    bottom: targetBottom,\n    left: targetLeft,\n  } = target.getBoundingClientRect()\n\n  // These values mutate as we loop through and generate scroll coordinates\n  let targetBlock: number =\n    block === 'start' || block === 'nearest'\n      ? targetTop\n      : block === 'end'\n      ? targetBottom\n      : targetTop + targetHeight / 2 // block === 'center\n  let targetInline: number =\n    inline === 'center'\n      ? targetLeft + targetWidth / 2\n      : inline === 'end'\n      ? targetRight\n      : targetLeft // inline === 'start || inline === 'nearest\n\n  // Collect new scroll positions\n  const computations: CustomScrollAction[] = []\n  // In chrome there's no longer a difference between caching the `frames.length` to a var or not, so we don't in this case (size > speed anyways)\n  for (let index = 0; index < frames.length; index++) {\n    const frame = frames[index]\n\n    // @TODO add a shouldScroll hook here that allows userland code to take control\n\n    const { height, width, top, right, bottom, left } =\n      frame.getBoundingClientRect()\n\n    // If the element is already visible we can end it here\n    // @TODO targetBlock and targetInline should be taken into account to be compliant with https://github.com/w3c/csswg-drafts/pull/1805/files#diff-3c17f0e43c20f8ecf89419d49e7ef5e0R1333\n    if (\n      scrollMode === 'if-needed' &&\n      targetTop >= 0 &&\n      targetLeft >= 0 &&\n      targetBottom <= viewportHeight &&\n      targetRight <= viewportWidth &&\n      targetTop >= top &&\n      targetBottom <= bottom &&\n      targetLeft >= left &&\n      targetRight <= right\n    ) {\n      // Break the loop and return the computations for things that are not fully visible\n      return computations\n    }\n\n    const frameStyle = getComputedStyle(frame)\n    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)\n    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)\n    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)\n    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)\n\n    let blockScroll: number = 0\n    let inlineScroll: number = 0\n\n    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here\n    // @TODO find out if the \"as HTMLElement\" overrides can be dropped\n    const scrollbarWidth =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth -\n          (frame as HTMLElement).clientWidth -\n          borderLeft -\n          borderRight\n        : 0\n    const scrollbarHeight =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight -\n          (frame as HTMLElement).clientHeight -\n          borderTop -\n          borderBottom\n        : 0\n\n    const scaleX =\n      'offsetWidth' in frame\n        ? (frame as HTMLElement).offsetWidth === 0\n          ? 0\n          : width / (frame as HTMLElement).offsetWidth\n        : 0\n    const scaleY =\n      'offsetHeight' in frame\n        ? (frame as HTMLElement).offsetHeight === 0\n          ? 0\n          : height / (frame as HTMLElement).offsetHeight\n        : 0\n\n    if (scrollingElement === frame) {\n      // Handle viewport logic (document.documentElement or document.body)\n\n      if (block === 'start') {\n        blockScroll = targetBlock\n      } else if (block === 'end') {\n        blockScroll = targetBlock - viewportHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          viewportY,\n          viewportY + viewportHeight,\n          viewportHeight,\n          borderTop,\n          borderBottom,\n          viewportY + targetBlock,\n          viewportY + targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - viewportHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - viewportWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - viewportWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          viewportX,\n          viewportX + viewportWidth,\n          viewportWidth,\n          borderLeft,\n          borderRight,\n          viewportX + targetInline,\n          viewportX + targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      // Apply scroll position offsets and ensure they are within bounds\n      // @TODO add more test cases to cover this 100%\n      blockScroll = Math.max(0, blockScroll + viewportY)\n      inlineScroll = Math.max(0, inlineScroll + viewportX)\n    } else {\n      // Handle each scrolling frame that might exist between the target and the viewport\n\n      if (block === 'start') {\n        blockScroll = targetBlock - top - borderTop\n      } else if (block === 'end') {\n        blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight\n      } else if (block === 'nearest') {\n        blockScroll = alignNearest(\n          top,\n          bottom,\n          height,\n          borderTop,\n          borderBottom + scrollbarHeight,\n          targetBlock,\n          targetBlock + targetHeight,\n          targetHeight\n        )\n      } else {\n        // block === 'center' is the default\n        blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2\n      }\n\n      if (inline === 'start') {\n        inlineScroll = targetInline - left - borderLeft\n      } else if (inline === 'center') {\n        inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2\n      } else if (inline === 'end') {\n        inlineScroll = targetInline - right + borderRight + scrollbarWidth\n      } else {\n        // inline === 'nearest' is the default\n        inlineScroll = alignNearest(\n          left,\n          right,\n          width,\n          borderLeft,\n          borderRight + scrollbarWidth,\n          targetInline,\n          targetInline + targetWidth,\n          targetWidth\n        )\n      }\n\n      const { scrollLeft, scrollTop } = frame\n      // Ensure scroll coordinates are not out of bounds while applying scroll offsets\n      blockScroll = Math.max(\n        0,\n        Math.min(\n          scrollTop + blockScroll / scaleY,\n          frame.scrollHeight - height / scaleY + scrollbarHeight\n        )\n      )\n      inlineScroll = Math.max(\n        0,\n        Math.min(\n          scrollLeft + inlineScroll / scaleX,\n          frame.scrollWidth - width / scaleX + scrollbarWidth\n        )\n      )\n\n      // Cache the offset so that parent frames can scroll this into view correctly\n      targetBlock += scrollTop - blockScroll\n      targetInline += scrollLeft - inlineScroll\n    }\n\n    computations.push({ el: frame, top: blockScroll, left: inlineScroll })\n  }\n\n  return computations\n}\n"],"names":["isElement","el","nodeType","canOverflow","overflow","skipOverflowHiddenElements","isScrollable","clientHeight","scrollHeight","clientWidth","scrollWidth","style","getComputedStyle","overflowY","overflowX","frame","ownerDocument","defaultView","frameElement","e","getFrameElement","isHiddenByFrame","alignNearest","scrollingEdgeStart","scrollingEdgeEnd","scrollingSize","scrollingBorderStart","scrollingBorderEnd","elementEdgeStart","elementEdgeEnd","elementSize","target","options","windowWithViewport","window","scrollMode","block","inline","boundary","checkBoundary","node","TypeError","scrollingElement","document","documentElement","frames","cursor","parentElement","push","body","viewportWidth","visualViewport","width","innerWidth","viewportHeight","height","innerHeight","viewportX","scrollX","pageXOffset","viewportY","scrollY","pageYOffset","getBoundingClientRect","targetHeight","targetWidth","targetTop","top","targetRight","right","targetBottom","bottom","targetLeft","left","targetBlock","targetInline","computations","index","length","frameStyle","borderLeft","parseInt","borderLeftWidth","borderTop","borderTopWidth","borderRight","borderRightWidth","borderBottom","borderBottomWidth","blockScroll","inlineScroll","scrollbarWidth","offsetWidth","scrollbarHeight","offsetHeight","scaleX","scaleY","Math","max","scrollLeft","scrollTop","min"],"mappings":"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"}