@floating-ui/dom - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/floating-ui.dom.esm.development.js

@@ -41,3 +41,3 @@ import { rectToClientRect, computePosition as computePosition$1 } from '@floating-ui/core';
 }
-function isScrollParent(element) {
+function isOverflowElement(element) {
   // Firefox wants us to check `-x` and `-y` variations as well
@@ -137,3 +137,3 @@ const {
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-    if (getNodeName(offsetParent) !== 'body' || isScrollParent(documentElement)) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -185,2 +185,6 @@ }
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
@@ -244,3 +248,3 @@ if (isContainingBlock(currentNode)) {
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-    if (getNodeName(offsetParent) !== 'body' || isScrollParent(documentElement)) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -321,3 +325,3 @@ }
 
-function getScrollParent(node) {
+function getNearestOverflowAncestor(node) {
   if (['html', 'body', '#document'].includes(getNodeName(node))) {
@@ -328,10 +332,10 @@ // @ts-ignore assume body is always available
 
-  if (isHTMLElement(node) && isScrollParent(node)) {
+  if (isHTMLElement(node) && isOverflowElement(node)) {
     return node;
   }
 
-  return getScrollParent(getParentNode(node));
+  return getNearestOverflowAncestor(getParentNode(node));
 }
 
-function getScrollParents(node, list) {
+function getOverflowAncestors(node, list) {
   var _node$ownerDocument;
@@ -343,9 +347,9 @@
 
-  const scrollParent = getScrollParent(node);
-  const isBody = scrollParent === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-  const win = getWindow(scrollParent);
-  const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
+  const win = getWindow(scrollableAncestor);
+  const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
   const updatedList = list.concat(target);
   return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
-  updatedList.concat(getScrollParents(getParentNode(target)));
+  updatedList.concat(getOverflowAncestors(getParentNode(target)));
 }
@@ -392,3 +396,3 @@
 
-function getClientRectFromClippingParent(element, clippingParent) {
+function getClientRectFromClippingAncestor(element, clippingParent) {
   if (clippingParent === 'viewport') {
@@ -403,3 +407,3 @@ return rectToClientRect(getViewportRect(element));
   return rectToClientRect(getDocumentRect(getDocumentElement(element)));
-} // A "clipping parent" is an overflowable container with the characteristic of
+} // A "clipping ancestor" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
@@ -409,4 +413,4 @@ // `initial`
 
-function getClippingParents(element) {
-  const clippingParents = getScrollParents(getParentNode(element));
+function getClippingAncestors(element) {
+  const clippingAncestors = getOverflowAncestors(getParentNode(element));
   const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
@@ -420,8 +424,8 @@ const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
 
-  return clippingParents.filter(clippingParent => isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body');
+  return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
 } // Gets the maximum area that the element is visible in due to any number of
-// clipping parents
+// clipping ancestors
 
 
-function getClippingClientRect(_ref) {
+function getClippingRect(_ref) {
   let {
@@ -432,7 +436,7 @@ element,
   } = _ref;
-  const mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
-  const clippingParents = [...mainClippingParents, rootBoundary];
-  const firstClippingParent = clippingParents[0];
-  const clippingRect = clippingParents.reduce((accRect, clippingParent) => {
-    const rect = getClientRectFromClippingParent(element, clippingParent);
+  const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
+  const clippingAncestors = [...mainClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor);
     accRect.top = max(rect.top, accRect.top);
@@ -443,11 +447,18 @@ accRect.right = min(rect.right, accRect.right);
     return accRect;
-  }, getClientRectFromClippingParent(element, firstClippingParent));
-  clippingRect.width = clippingRect.right - clippingRect.left;
-  clippingRect.height = clippingRect.bottom - clippingRect.top;
-  clippingRect.x = clippingRect.left;
-  clippingRect.y = clippingRect.top;
-  return clippingRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
 }
 
 const platform = {
+  getClippingRect,
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  isElement,
+  getDimensions,
+  getOffsetParent,
+  getDocumentElement,
   getElementRects: _ref => {
@@ -467,32 +478,79 @@ let {
   },
-  convertOffsetParentRelativeRectToViewportRelativeRect: args => convertOffsetParentRelativeRectToViewportRelativeRect(args),
-  getOffsetParent: _ref2 => {
-    let {
-      element
-    } = _ref2;
-    return getOffsetParent(element);
-  },
-  isElement: value => isElement(value),
-  getDocumentElement: _ref3 => {
-    let {
-      element
-    } = _ref3;
-    return getDocumentElement(element);
-  },
-  getClippingClientRect: args => getClippingClientRect(args),
-  getDimensions: _ref4 => {
-    let {
-      element
-    } = _ref4;
-    return getDimensions(element);
-  },
-  getClientRects: _ref5 => {
-    let {
-      element
-    } = _ref5;
-    return element.getClientRects();
-  }
+  getClientRects: element => element.getClientRects(),
+  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
 };
 
 /**
+ * Automatically updates the position of the floating element when necessary.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {
+      ancestorScroll: true,
+      ancestorResize: true,
+      elementResize: true,
+      animationFrame: false
+    };
+  }
+
+  let cleanedUp = false;
+  const animationFrame = options.animationFrame;
+  const ancestorScroll = options.ancestorScroll && !animationFrame;
+  const ancestorResize = options.ancestorResize && !animationFrame;
+  const elementResize = options.elementResize && !animationFrame;
+  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  let observer = null;
+
+  if (elementResize) {
+    observer = new ResizeObserver(update);
+    isElement(reference) && observer.observe(reference);
+    observer.observe(floating);
+  }
+
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+
+  if (animationFrame) {
+    frameLoop();
+  }
+
+  function frameLoop() {
+    if (cleanedUp) {
+      return;
+    }
+
+    const nextRefRect = getBoundingClientRect(reference);
+
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+
+  return () => {
+    var _observer;
+
+    cleanedUp = true;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    (_observer = observer) == null ? void 0 : _observer.disconnect();
+
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
  * Computes the `x` and `y` coordinates that will place the floating element
@@ -508,2 +566,2 @@ * next to a reference element when it is given a certain CSS positioning
 
-export { computePosition, getScrollParents };
+export { autoUpdate, computePosition, getOverflowAncestors };

dist/floating-ui.dom.esm.js

@@ -41,3 +41,3 @@ import { rectToClientRect, computePosition as computePosition$1 } from '@floating-ui/core';
 }
-function isScrollParent(element) {
+function isOverflowElement(element) {
   // Firefox wants us to check `-x` and `-y` variations as well
@@ -137,3 +137,3 @@ const {
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-    if (getNodeName(offsetParent) !== 'body' || isScrollParent(documentElement)) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -185,2 +185,6 @@ }
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
@@ -244,3 +248,3 @@ if (isContainingBlock(currentNode)) {
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-    if (getNodeName(offsetParent) !== 'body' || isScrollParent(documentElement)) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -321,3 +325,3 @@ }
 
-function getScrollParent(node) {
+function getNearestOverflowAncestor(node) {
   if (['html', 'body', '#document'].includes(getNodeName(node))) {
@@ -328,10 +332,10 @@ // @ts-ignore assume body is always available
 
-  if (isHTMLElement(node) && isScrollParent(node)) {
+  if (isHTMLElement(node) && isOverflowElement(node)) {
     return node;
   }
 
-  return getScrollParent(getParentNode(node));
+  return getNearestOverflowAncestor(getParentNode(node));
 }
 
-function getScrollParents(node, list) {
+function getOverflowAncestors(node, list) {
   var _node$ownerDocument;
@@ -343,9 +347,9 @@
 
-  const scrollParent = getScrollParent(node);
-  const isBody = scrollParent === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-  const win = getWindow(scrollParent);
-  const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
+  const win = getWindow(scrollableAncestor);
+  const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
   const updatedList = list.concat(target);
   return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
-  updatedList.concat(getScrollParents(getParentNode(target)));
+  updatedList.concat(getOverflowAncestors(getParentNode(target)));
 }
@@ -392,3 +396,3 @@
 
-function getClientRectFromClippingParent(element, clippingParent) {
+function getClientRectFromClippingAncestor(element, clippingParent) {
   if (clippingParent === 'viewport') {
@@ -403,3 +407,3 @@ return rectToClientRect(getViewportRect(element));
   return rectToClientRect(getDocumentRect(getDocumentElement(element)));
-} // A "clipping parent" is an overflowable container with the characteristic of
+} // A "clipping ancestor" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
@@ -409,4 +413,4 @@ // `initial`
 
-function getClippingParents(element) {
-  const clippingParents = getScrollParents(getParentNode(element));
+function getClippingAncestors(element) {
+  const clippingAncestors = getOverflowAncestors(getParentNode(element));
   const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
@@ -420,8 +424,8 @@ const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
 
-  return clippingParents.filter(clippingParent => isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body');
+  return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
 } // Gets the maximum area that the element is visible in due to any number of
-// clipping parents
+// clipping ancestors
 
 
-function getClippingClientRect(_ref) {
+function getClippingRect(_ref) {
   let {
@@ -432,7 +436,7 @@ element,
   } = _ref;
-  const mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
-  const clippingParents = [...mainClippingParents, rootBoundary];
-  const firstClippingParent = clippingParents[0];
-  const clippingRect = clippingParents.reduce((accRect, clippingParent) => {
-    const rect = getClientRectFromClippingParent(element, clippingParent);
+  const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
+  const clippingAncestors = [...mainClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor);
     accRect.top = max(rect.top, accRect.top);
@@ -443,11 +447,18 @@ accRect.right = min(rect.right, accRect.right);
     return accRect;
-  }, getClientRectFromClippingParent(element, firstClippingParent));
-  clippingRect.width = clippingRect.right - clippingRect.left;
-  clippingRect.height = clippingRect.bottom - clippingRect.top;
-  clippingRect.x = clippingRect.left;
-  clippingRect.y = clippingRect.top;
-  return clippingRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
 }
 
 const platform = {
+  getClippingRect,
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  isElement,
+  getDimensions,
+  getOffsetParent,
+  getDocumentElement,
   getElementRects: _ref => {
@@ -467,32 +478,79 @@ let {
   },
-  convertOffsetParentRelativeRectToViewportRelativeRect: args => convertOffsetParentRelativeRectToViewportRelativeRect(args),
-  getOffsetParent: _ref2 => {
-    let {
-      element
-    } = _ref2;
-    return getOffsetParent(element);
-  },
-  isElement: value => isElement(value),
-  getDocumentElement: _ref3 => {
-    let {
-      element
-    } = _ref3;
-    return getDocumentElement(element);
-  },
-  getClippingClientRect: args => getClippingClientRect(args),
-  getDimensions: _ref4 => {
-    let {
-      element
-    } = _ref4;
-    return getDimensions(element);
-  },
-  getClientRects: _ref5 => {
-    let {
-      element
-    } = _ref5;
-    return element.getClientRects();
-  }
+  getClientRects: element => element.getClientRects(),
+  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
 };
 
 /**
+ * Automatically updates the position of the floating element when necessary.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {
+      ancestorScroll: true,
+      ancestorResize: true,
+      elementResize: true,
+      animationFrame: false
+    };
+  }
+
+  let cleanedUp = false;
+  const animationFrame = options.animationFrame;
+  const ancestorScroll = options.ancestorScroll && !animationFrame;
+  const ancestorResize = options.ancestorResize && !animationFrame;
+  const elementResize = options.elementResize && !animationFrame;
+  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  let observer = null;
+
+  if (elementResize) {
+    observer = new ResizeObserver(update);
+    isElement(reference) && observer.observe(reference);
+    observer.observe(floating);
+  }
+
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+
+  if (animationFrame) {
+    frameLoop();
+  }
+
+  function frameLoop() {
+    if (cleanedUp) {
+      return;
+    }
+
+    const nextRefRect = getBoundingClientRect(reference);
+
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+
+  return () => {
+    var _observer;
+
+    cleanedUp = true;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    (_observer = observer) == null ? void 0 : _observer.disconnect();
+
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
  * Computes the `x` and `y` coordinates that will place the floating element
@@ -508,2 +566,2 @@ * next to a reference element when it is given a certain CSS positioning
 
-export { computePosition, getScrollParents };
+export { autoUpdate, computePosition, getOverflowAncestors };

dist/floating-ui.dom.esm.min.js

@@ -1,1 +0,1 @@
-import{rectToClientRect as t,computePosition as e}from"@floating-ui/core";export{arrow,autoPlacement,detectOverflow,flip,hide,inline,limitShift,offset,shift,size}from"@floating-ui/core";function n(t){return"[object Window]"===(null==t?void 0:t.toString())}function o(t){if(null==t)return window;if(!n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function i(t){return o(t).getComputedStyle(t)}function r(t){return n(t)?"":t?(t.nodeName||"").toLowerCase():""}function l(t){return t instanceof o(t).HTMLElement}function c(t){return t instanceof o(t).Element}function f(t){return t instanceof o(t).ShadowRoot||t instanceof ShadowRoot}function u(t){const{overflow:e,overflowX:n,overflowY:o}=i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function s(t){return["table","td","th"].includes(r(t))}function h(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const d=Math.min,a=Math.max,g=Math.round;function p(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&l(t)&&(o=t.offsetWidth>0&&g(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&g(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function m(t){return(e=t,(e instanceof o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function w(t){return n(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function y(t){return p(m(t)).left+w(t).scrollLeft}function x(t,e,n){const o=l(e),i=m(e),c=p(t,o&&function(t){const e=p(t);return g(e.width)!==t.offsetWidth||g(e.height)!==t.offsetHeight}(e));let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==r(e)||u(i))&&(f=w(e)),l(e)){const t=p(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=y(i));return{x:c.left+f.scrollLeft-s.x,y:c.top+f.scrollTop-s.y,width:c.width,height:c.height}}function v(t){return"html"===r(t)?t:t.assignedSlot||t.parentNode||(f(t)?t.host:null)||m(t)}function b(t){return l(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function L(t){const e=o(t);let n=b(t);for(;n&&s(n)&&"static"===getComputedStyle(n).position;)n=b(n);return n&&("html"===r(n)||"body"===r(n)&&"static"===getComputedStyle(n).position&&!h(n))?e:n||function(t){let e=v(t);for(;l(e)&&!["html","body"].includes(r(e));){if(h(e))return e;e=e.parentNode}return null}(t)||e}function W(t){return{width:t.offsetWidth,height:t.offsetHeight}}function T(t){return["html","body","#document"].includes(r(t))?t.ownerDocument.body:l(t)&&u(t)?t:T(v(t))}function C(t,e){var n;void 0===e&&(e=[]);const i=T(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=o(i),c=r?[l].concat(l.visualViewport||[],u(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(C(v(c)))}function R(e,n){return"viewport"===n?t(function(t){const e=o(t),n=m(t),i=e.visualViewport;let r=n.clientWidth,l=n.clientHeight,c=0,f=0;return i&&(r=i.width,l=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(c=i.offsetLeft,f=i.offsetTop)),{width:r,height:l,x:c,y:f}}(e)):c(n)?function(t){const e=p(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n):t(function(t){var e;const n=m(t),o=w(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=a(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=a(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+y(t);const u=-o.scrollTop;return"rtl"===i(r||n).direction&&(f+=a(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:u}}(m(e)))}function H(t){const e=C(v(t)),n=["absolute","fixed"].includes(i(t).position)&&l(t)?L(t):t;return c(n)?e.filter((t=>c(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&f(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==r(t))):[]}const S={getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:x(e,L(n),o),floating:{...W(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=l(n),c=m(n);if(n===c)return e;let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==r(n)||u(c))&&(f=w(n)),l(n))){const t=p(n,!0);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+s.x,y:e.y-f.scrollTop+s.y}}(t),getOffsetParent:t=>{let{element:e}=t;return L(e)},isElement:t=>c(t),getDocumentElement:t=>{let{element:e}=t;return m(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingParents"===n?H(e):[].concat(n),o],r=i[0],l=i.reduce(((t,n)=>{const o=R(e,n);return t.top=a(o.top,t.top),t.right=d(o.right,t.right),t.bottom=d(o.bottom,t.bottom),t.left=a(o.left,t.left),t}),R(e,r));return l.width=l.right-l.left,l.height=l.bottom-l.top,l.x=l.left,l.y=l.top,l}(t),getDimensions:t=>{let{element:e}=t;return W(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},D=(t,n,o)=>e(t,n,{platform:S,...o});export{D as computePosition,C as getScrollParents};
+import{rectToClientRect as t,computePosition as e}from"@floating-ui/core";export{arrow,autoPlacement,detectOverflow,flip,hide,inline,limitShift,offset,shift,size}from"@floating-ui/core";function n(t){return"[object Window]"===(null==t?void 0:t.toString())}function o(t){if(null==t)return window;if(!n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function i(t){return o(t).getComputedStyle(t)}function r(t){return n(t)?"":t?(t.nodeName||"").toLowerCase():""}function l(t){return t instanceof o(t).HTMLElement}function c(t){return t instanceof o(t).Element}function f(t){return t instanceof o(t).ShadowRoot||t instanceof ShadowRoot}function s(t){const{overflow:e,overflowX:n,overflowY:o}=i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function u(t){return["table","td","th"].includes(r(t))}function h(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const d=Math.min,a=Math.max,g=Math.round;function m(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&l(t)&&(o=t.offsetWidth>0&&g(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&g(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function p(t){return(e=t,(e instanceof o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function w(t){return n(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function y(t){return m(p(t)).left+w(t).scrollLeft}function v(t,e,n){const o=l(e),i=p(e),c=m(t,o&&function(t){const e=m(t);return g(e.width)!==t.offsetWidth||g(e.height)!==t.offsetHeight}(e));let f={scrollLeft:0,scrollTop:0};const u={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==r(e)||s(i))&&(f=w(e)),l(e)){const t=m(e,!0);u.x=t.x+e.clientLeft,u.y=t.y+e.clientTop}else i&&(u.x=y(i));return{x:c.left+f.scrollLeft-u.x,y:c.top+f.scrollTop-u.y,width:c.width,height:c.height}}function x(t){return"html"===r(t)?t:t.assignedSlot||t.parentNode||(f(t)?t.host:null)||p(t)}function b(t){return l(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function L(t){const e=o(t);let n=b(t);for(;n&&u(n)&&"static"===getComputedStyle(n).position;)n=b(n);return n&&("html"===r(n)||"body"===r(n)&&"static"===getComputedStyle(n).position&&!h(n))?e:n||function(t){let e=x(t);for(f(e)&&(e=e.host);l(e)&&!["html","body"].includes(r(e));){if(h(e))return e;e=e.parentNode}return null}(t)||e}function R(t){return{width:t.offsetWidth,height:t.offsetHeight}}function T(t){return["html","body","#document"].includes(r(t))?t.ownerDocument.body:l(t)&&s(t)?t:T(x(t))}function W(t,e){var n;void 0===e&&(e=[]);const i=T(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=o(i),c=r?[l].concat(l.visualViewport||[],s(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(W(x(c)))}function C(e,n){return"viewport"===n?t(function(t){const e=o(t),n=p(t),i=e.visualViewport;let r=n.clientWidth,l=n.clientHeight,c=0,f=0;return i&&(r=i.width,l=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(c=i.offsetLeft,f=i.offsetTop)),{width:r,height:l,x:c,y:f}}(e)):c(n)?function(t){const e=m(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n):t(function(t){var e;const n=p(t),o=w(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=a(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=a(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+y(t);const s=-o.scrollTop;return"rtl"===i(r||n).direction&&(f+=a(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:s}}(p(e)))}function E(t){const e=W(x(t)),n=["absolute","fixed"].includes(i(t).position)&&l(t)?L(t):t;return c(n)?e.filter((t=>c(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&f(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==r(t))):[]}const H={getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingAncestors"===n?E(e):[].concat(n),o],r=i[0],l=i.reduce(((t,n)=>{const o=C(e,n);return t.top=a(o.top,t.top),t.right=d(o.right,t.right),t.bottom=d(o.bottom,t.bottom),t.left=a(o.left,t.left),t}),C(e,r));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=l(n),c=p(n);if(n===c)return e;let f={scrollLeft:0,scrollTop:0};const u={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==r(n)||s(c))&&(f=w(n)),l(n))){const t=m(n,!0);u.x=t.x+n.clientLeft,u.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+u.x,y:e.y-f.scrollTop+u.y}},isElement:c,getDimensions:R,getOffsetParent:L,getDocumentElement:p,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:v(e,L(n),o),floating:{...R(n),x:0,y:0}}},getClientRects:t=>t.getClientRects(),isRTL:t=>"rtl"===i(t).direction};function S(t,e,n,o){void 0===o&&(o={ancestorScroll:!0,ancestorResize:!0,elementResize:!0,animationFrame:!1});let i=!1;const r=o.animationFrame,l=o.ancestorScroll&&!r,f=o.ancestorResize&&!r,s=o.elementResize&&!r,u=l||f?[...c(t)?W(t):[],...W(e)]:[];u.forEach((t=>{l&&t.addEventListener("scroll",n,{passive:!0}),f&&t.addEventListener("resize",n)}));let h,d=null;s&&(d=new ResizeObserver(n),c(t)&&d.observe(t),d.observe(e));let a=r?m(t):null;return r&&function e(){if(i)return;const o=m(t);!a||o.x===a.x&&o.y===a.y&&o.width===a.width&&o.height===a.height||n();a=o,h=requestAnimationFrame(e)}(),()=>{var t;i=!0,u.forEach((t=>{l&&t.removeEventListener("scroll",n),f&&t.removeEventListener("resize",n)})),null==(t=d)||t.disconnect(),r&&cancelAnimationFrame(h)}}const z=(t,n,o)=>e(t,n,{platform:H,...o});export{S as autoUpdate,z as computePosition,W as getOverflowAncestors};

dist/floating-ui.dom.js

@@ -44,3 +44,3 @@ (function (global, factory) {
   }
-  function isScrollParent(element) {
+  function isOverflowElement(element) {
     // Firefox wants us to check `-x` and `-y` variations as well
@@ -140,3 +140,3 @@ const {
     if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-      if (getNodeName(offsetParent) !== 'body' || isScrollParent(documentElement)) {
+      if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
@@ -188,2 +188,6 @@ }
 
+    if (isShadowRoot(currentNode)) {
+      currentNode = currentNode.host;
+    }
+
     while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
@@ -247,3 +251,3 @@ if (isContainingBlock(currentNode)) {
     if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-      if (getNodeName(offsetParent) !== 'body' || isScrollParent(documentElement)) {
+      if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
@@ -324,3 +328,3 @@ }
 
-  function getScrollParent(node) {
+  function getNearestOverflowAncestor(node) {
     if (['html', 'body', '#document'].includes(getNodeName(node))) {
@@ -331,10 +335,10 @@ // @ts-ignore assume body is always available
 
-    if (isHTMLElement(node) && isScrollParent(node)) {
+    if (isHTMLElement(node) && isOverflowElement(node)) {
       return node;
     }
 
-    return getScrollParent(getParentNode(node));
+    return getNearestOverflowAncestor(getParentNode(node));
   }
 
-  function getScrollParents(node, list) {
+  function getOverflowAncestors(node, list) {
     var _node$ownerDocument;
@@ -346,9 +350,9 @@
 
-    const scrollParent = getScrollParent(node);
-    const isBody = scrollParent === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-    const win = getWindow(scrollParent);
-    const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+    const scrollableAncestor = getNearestOverflowAncestor(node);
+    const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
+    const win = getWindow(scrollableAncestor);
+    const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
     const updatedList = list.concat(target);
     return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
-    updatedList.concat(getScrollParents(getParentNode(target)));
+    updatedList.concat(getOverflowAncestors(getParentNode(target)));
   }
@@ -395,3 +399,3 @@
 
-  function getClientRectFromClippingParent(element, clippingParent) {
+  function getClientRectFromClippingAncestor(element, clippingParent) {
     if (clippingParent === 'viewport') {
@@ -406,3 +410,3 @@ return core.rectToClientRect(getViewportRect(element));
     return core.rectToClientRect(getDocumentRect(getDocumentElement(element)));
-  } // A "clipping parent" is an overflowable container with the characteristic of
+  } // A "clipping ancestor" is an overflowable container with the characteristic of
   // clipping (or hiding) overflowing elements with a position different from
@@ -412,4 +416,4 @@ // `initial`
 
-  function getClippingParents(element) {
-    const clippingParents = getScrollParents(getParentNode(element));
+  function getClippingAncestors(element) {
+    const clippingAncestors = getOverflowAncestors(getParentNode(element));
     const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
@@ -423,8 +427,8 @@ const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
 
-    return clippingParents.filter(clippingParent => isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body');
+    return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
   } // Gets the maximum area that the element is visible in due to any number of
-  // clipping parents
+  // clipping ancestors
 
 
-  function getClippingClientRect(_ref) {
+  function getClippingRect(_ref) {
     let {
@@ -435,7 +439,7 @@ element,
     } = _ref;
-    const mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
-    const clippingParents = [...mainClippingParents, rootBoundary];
-    const firstClippingParent = clippingParents[0];
-    const clippingRect = clippingParents.reduce((accRect, clippingParent) => {
-      const rect = getClientRectFromClippingParent(element, clippingParent);
+    const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
+    const clippingAncestors = [...mainClippingAncestors, rootBoundary];
+    const firstClippingAncestor = clippingAncestors[0];
+    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestor);
       accRect.top = max(rect.top, accRect.top);
@@ -446,11 +450,18 @@ accRect.right = min(rect.right, accRect.right);
       return accRect;
-    }, getClientRectFromClippingParent(element, firstClippingParent));
-    clippingRect.width = clippingRect.right - clippingRect.left;
-    clippingRect.height = clippingRect.bottom - clippingRect.top;
-    clippingRect.x = clippingRect.left;
-    clippingRect.y = clippingRect.top;
-    return clippingRect;
+    }, getClientRectFromClippingAncestor(element, firstClippingAncestor));
+    return {
+      width: clippingRect.right - clippingRect.left,
+      height: clippingRect.bottom - clippingRect.top,
+      x: clippingRect.left,
+      y: clippingRect.top
+    };
   }
 
   const platform = {
+    getClippingRect,
+    convertOffsetParentRelativeRectToViewportRelativeRect,
+    isElement,
+    getDimensions,
+    getOffsetParent,
+    getDocumentElement,
     getElementRects: _ref => {
@@ -470,32 +481,79 @@ let {
     },
-    convertOffsetParentRelativeRectToViewportRelativeRect: args => convertOffsetParentRelativeRectToViewportRelativeRect(args),
-    getOffsetParent: _ref2 => {
-      let {
-        element
-      } = _ref2;
-      return getOffsetParent(element);
-    },
-    isElement: value => isElement(value),
-    getDocumentElement: _ref3 => {
-      let {
-        element
-      } = _ref3;
-      return getDocumentElement(element);
-    },
-    getClippingClientRect: args => getClippingClientRect(args),
-    getDimensions: _ref4 => {
-      let {
-        element
-      } = _ref4;
-      return getDimensions(element);
-    },
-    getClientRects: _ref5 => {
-      let {
-        element
-      } = _ref5;
-      return element.getClientRects();
-    }
+    getClientRects: element => element.getClientRects(),
+    isRTL: element => getComputedStyle$1(element).direction === 'rtl'
   };
 
   /**
+   * Automatically updates the position of the floating element when necessary.
+   * @see https://floating-ui.com/docs/autoUpdate
+   */
+  function autoUpdate(reference, floating, update, options) {
+    if (options === void 0) {
+      options = {
+        ancestorScroll: true,
+        ancestorResize: true,
+        elementResize: true,
+        animationFrame: false
+      };
+    }
+
+    let cleanedUp = false;
+    const animationFrame = options.animationFrame;
+    const ancestorScroll = options.ancestorScroll && !animationFrame;
+    const ancestorResize = options.ancestorResize && !animationFrame;
+    const elementResize = options.elementResize && !animationFrame;
+    const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.addEventListener('scroll', update, {
+        passive: true
+      });
+      ancestorResize && ancestor.addEventListener('resize', update);
+    });
+    let observer = null;
+
+    if (elementResize) {
+      observer = new ResizeObserver(update);
+      isElement(reference) && observer.observe(reference);
+      observer.observe(floating);
+    }
+
+    let frameId;
+    let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+
+    if (animationFrame) {
+      frameLoop();
+    }
+
+    function frameLoop() {
+      if (cleanedUp) {
+        return;
+      }
+
+      const nextRefRect = getBoundingClientRect(reference);
+
+      if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+        update();
+      }
+
+      prevRefRect = nextRefRect;
+      frameId = requestAnimationFrame(frameLoop);
+    }
+
+    return () => {
+      var _observer;
+
+      cleanedUp = true;
+      ancestors.forEach(ancestor => {
+        ancestorScroll && ancestor.removeEventListener('scroll', update);
+        ancestorResize && ancestor.removeEventListener('resize', update);
+      });
+      (_observer = observer) == null ? void 0 : _observer.disconnect();
+
+      if (animationFrame) {
+        cancelAnimationFrame(frameId);
+      }
+    };
+  }
+
+  /**
    * Computes the `x` and `y` coordinates that will place the floating element
@@ -551,4 +609,5 @@ * next to a reference element when it is given a certain CSS positioning
   });
+  exports.autoUpdate = autoUpdate;
   exports.computePosition = computePosition;
-  exports.getScrollParents = getScrollParents;
+  exports.getOverflowAncestors = getOverflowAncestors;
 
@@ -555,0 +614,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/floating-ui.dom.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@floating-ui/core")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/core"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FloatingUIDOM={},t.FloatingUICore)}(this,(function(t,e){"use strict";function n(t){return"[object Window]"===(null==t?void 0:t.toString())}function o(t){if(null==t)return window;if(!n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function i(t){return o(t).getComputedStyle(t)}function r(t){return n(t)?"":t?(t.nodeName||"").toLowerCase():""}function l(t){return t instanceof o(t).HTMLElement}function c(t){return t instanceof o(t).Element}function f(t){return t instanceof o(t).ShadowRoot||t instanceof ShadowRoot}function u(t){const{overflow:e,overflowX:n,overflowY:o}=i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function s(t){return["table","td","th"].includes(r(t))}function d(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const h=Math.min,a=Math.max,g=Math.round;function p(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&l(t)&&(o=t.offsetWidth>0&&g(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&g(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function m(t){return(e=t,(e instanceof o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function y(t){return n(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function b(t){return p(m(t)).left+y(t).scrollLeft}function w(t,e,n){const o=l(e),i=m(e),c=p(t,o&&function(t){const e=p(t);return g(e.width)!==t.offsetWidth||g(e.height)!==t.offsetHeight}(e));let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==r(e)||u(i))&&(f=y(e)),l(e)){const t=p(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=b(i));return{x:c.left+f.scrollLeft-s.x,y:c.top+f.scrollTop-s.y,width:c.width,height:c.height}}function x(t){return"html"===r(t)?t:t.assignedSlot||t.parentNode||(f(t)?t.host:null)||m(t)}function v(t){return l(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function P(t){const e=o(t);let n=v(t);for(;n&&s(n)&&"static"===getComputedStyle(n).position;)n=v(n);return n&&("html"===r(n)||"body"===r(n)&&"static"===getComputedStyle(n).position&&!d(n))?e:n||function(t){let e=x(t);for(;l(e)&&!["html","body"].includes(r(e));){if(d(e))return e;e=e.parentNode}return null}(t)||e}function O(t){return{width:t.offsetWidth,height:t.offsetHeight}}function T(t){return["html","body","#document"].includes(r(t))?t.ownerDocument.body:l(t)&&u(t)?t:T(x(t))}function C(t,e){var n;void 0===e&&(e=[]);const i=T(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=o(i),c=r?[l].concat(l.visualViewport||[],u(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(C(x(c)))}function L(t,n){return"viewport"===n?e.rectToClientRect(function(t){const e=o(t),n=m(t),i=e.visualViewport;let r=n.clientWidth,l=n.clientHeight,c=0,f=0;return i&&(r=i.width,l=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(c=i.offsetLeft,f=i.offsetTop)),{width:r,height:l,x:c,y:f}}(t)):c(n)?function(t){const e=p(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n):e.rectToClientRect(function(t){var e;const n=m(t),o=y(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=a(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=a(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+b(t);const u=-o.scrollTop;return"rtl"===i(r||n).direction&&(f+=a(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:u}}(m(t)))}function R(t){const e=C(x(t)),n=["absolute","fixed"].includes(i(t).position)&&l(t)?P(t):t;return c(n)?e.filter((t=>c(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&f(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==r(t))):[]}const W={getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:w(e,P(n),o),floating:{...O(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=l(n),c=m(n);if(n===c)return e;let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==r(n)||u(c))&&(f=y(n)),l(n))){const t=p(n,!0);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+s.x,y:e.y-f.scrollTop+s.y}}(t),getOffsetParent:t=>{let{element:e}=t;return P(e)},isElement:t=>c(t),getDocumentElement:t=>{let{element:e}=t;return m(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingParents"===n?R(e):[].concat(n),o],r=i[0],l=i.reduce(((t,n)=>{const o=L(e,n);return t.top=a(o.top,t.top),t.right=h(o.right,t.right),t.bottom=h(o.bottom,t.bottom),t.left=a(o.left,t.left),t}),L(e,r));return l.width=l.right-l.left,l.height=l.bottom-l.top,l.x=l.left,l.y=l.top,l}(t),getDimensions:t=>{let{element:e}=t;return O(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}};Object.defineProperty(t,"arrow",{enumerable:!0,get:function(){return e.arrow}}),Object.defineProperty(t,"autoPlacement",{enumerable:!0,get:function(){return e.autoPlacement}}),Object.defineProperty(t,"detectOverflow",{enumerable:!0,get:function(){return e.detectOverflow}}),Object.defineProperty(t,"flip",{enumerable:!0,get:function(){return e.flip}}),Object.defineProperty(t,"hide",{enumerable:!0,get:function(){return e.hide}}),Object.defineProperty(t,"inline",{enumerable:!0,get:function(){return e.inline}}),Object.defineProperty(t,"limitShift",{enumerable:!0,get:function(){return e.limitShift}}),Object.defineProperty(t,"offset",{enumerable:!0,get:function(){return e.offset}}),Object.defineProperty(t,"shift",{enumerable:!0,get:function(){return e.shift}}),Object.defineProperty(t,"size",{enumerable:!0,get:function(){return e.size}}),t.computePosition=(t,n,o)=>e.computePosition(t,n,{platform:W,...o}),t.getScrollParents=C,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@floating-ui/core")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/core"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FloatingUIDOM={},t.FloatingUICore)}(this,(function(t,e){"use strict";function n(t){return"[object Window]"===(null==t?void 0:t.toString())}function o(t){if(null==t)return window;if(!n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function i(t){return o(t).getComputedStyle(t)}function r(t){return n(t)?"":t?(t.nodeName||"").toLowerCase():""}function l(t){return t instanceof o(t).HTMLElement}function c(t){return t instanceof o(t).Element}function f(t){return t instanceof o(t).ShadowRoot||t instanceof ShadowRoot}function u(t){const{overflow:e,overflowX:n,overflowY:o}=i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function s(t){return["table","td","th"].includes(r(t))}function d(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const a=Math.min,h=Math.max,g=Math.round;function p(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&l(t)&&(o=t.offsetWidth>0&&g(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&g(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function m(t){return(e=t,(e instanceof o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function y(t){return n(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function b(t){return p(m(t)).left+y(t).scrollLeft}function w(t,e,n){const o=l(e),i=m(e),c=p(t,o&&function(t){const e=p(t);return g(e.width)!==t.offsetWidth||g(e.height)!==t.offsetHeight}(e));let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==r(e)||u(i))&&(f=y(e)),l(e)){const t=p(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=b(i));return{x:c.left+f.scrollLeft-s.x,y:c.top+f.scrollTop-s.y,width:c.width,height:c.height}}function v(t){return"html"===r(t)?t:t.assignedSlot||t.parentNode||(f(t)?t.host:null)||m(t)}function x(t){return l(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function L(t){const e=o(t);let n=x(t);for(;n&&s(n)&&"static"===getComputedStyle(n).position;)n=x(n);return n&&("html"===r(n)||"body"===r(n)&&"static"===getComputedStyle(n).position&&!d(n))?e:n||function(t){let e=v(t);for(f(e)&&(e=e.host);l(e)&&!["html","body"].includes(r(e));){if(d(e))return e;e=e.parentNode}return null}(t)||e}function R(t){return{width:t.offsetWidth,height:t.offsetHeight}}function O(t){return["html","body","#document"].includes(r(t))?t.ownerDocument.body:l(t)&&u(t)?t:O(v(t))}function P(t,e){var n;void 0===e&&(e=[]);const i=O(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=o(i),c=r?[l].concat(l.visualViewport||[],u(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(P(v(c)))}function T(t,n){return"viewport"===n?e.rectToClientRect(function(t){const e=o(t),n=m(t),i=e.visualViewport;let r=n.clientWidth,l=n.clientHeight,c=0,f=0;return i&&(r=i.width,l=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(c=i.offsetLeft,f=i.offsetTop)),{width:r,height:l,x:c,y:f}}(t)):c(n)?function(t){const e=p(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n):e.rectToClientRect(function(t){var e;const n=m(t),o=y(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=h(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=h(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+b(t);const u=-o.scrollTop;return"rtl"===i(r||n).direction&&(f+=h(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:u}}(m(t)))}function C(t){const e=P(v(t)),n=["absolute","fixed"].includes(i(t).position)&&l(t)?L(t):t;return c(n)?e.filter((t=>c(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&f(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==r(t))):[]}const W={getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingAncestors"===n?C(e):[].concat(n),o],r=i[0],l=i.reduce(((t,n)=>{const o=T(e,n);return t.top=h(o.top,t.top),t.right=a(o.right,t.right),t.bottom=a(o.bottom,t.bottom),t.left=h(o.left,t.left),t}),T(e,r));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=l(n),c=m(n);if(n===c)return e;let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==r(n)||u(c))&&(f=y(n)),l(n))){const t=p(n,!0);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+s.x,y:e.y-f.scrollTop+s.y}},isElement:c,getDimensions:R,getOffsetParent:L,getDocumentElement:m,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:w(e,L(n),o),floating:{...R(n),x:0,y:0}}},getClientRects:t=>t.getClientRects(),isRTL:t=>"rtl"===i(t).direction};Object.defineProperty(t,"arrow",{enumerable:!0,get:function(){return e.arrow}}),Object.defineProperty(t,"autoPlacement",{enumerable:!0,get:function(){return e.autoPlacement}}),Object.defineProperty(t,"detectOverflow",{enumerable:!0,get:function(){return e.detectOverflow}}),Object.defineProperty(t,"flip",{enumerable:!0,get:function(){return e.flip}}),Object.defineProperty(t,"hide",{enumerable:!0,get:function(){return e.hide}}),Object.defineProperty(t,"inline",{enumerable:!0,get:function(){return e.inline}}),Object.defineProperty(t,"limitShift",{enumerable:!0,get:function(){return e.limitShift}}),Object.defineProperty(t,"offset",{enumerable:!0,get:function(){return e.offset}}),Object.defineProperty(t,"shift",{enumerable:!0,get:function(){return e.shift}}),Object.defineProperty(t,"size",{enumerable:!0,get:function(){return e.size}}),t.autoUpdate=function(t,e,n,o){void 0===o&&(o={ancestorScroll:!0,ancestorResize:!0,elementResize:!0,animationFrame:!1});let i=!1;const r=o.animationFrame,l=o.ancestorScroll&&!r,f=o.ancestorResize&&!r,u=o.elementResize&&!r,s=l||f?[...c(t)?P(t):[],...P(e)]:[];s.forEach((t=>{l&&t.addEventListener("scroll",n,{passive:!0}),f&&t.addEventListener("resize",n)}));let d,a=null;u&&(a=new ResizeObserver(n),c(t)&&a.observe(t),a.observe(e));let h=r?p(t):null;return r&&function e(){if(i)return;const o=p(t);!h||o.x===h.x&&o.y===h.y&&o.width===h.width&&o.height===h.height||n();h=o,d=requestAnimationFrame(e)}(),()=>{var t;i=!0,s.forEach((t=>{l&&t.removeEventListener("scroll",n),f&&t.removeEventListener("resize",n)})),null==(t=a)||t.disconnect(),r&&cancelAnimationFrame(d)}},t.computePosition=(t,n,o)=>e.computePosition(t,n,{platform:W,...o}),t.getOverflowAncestors=P,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "@floating-ui/dom",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "@rollingversions": {
@@ -15,3 +15,3 @@ "baseVersion": [
   },
-  "main": "dist/floating-ui.dom.cjs",
+  "main": "dist/floating-ui.dom.js",
   "module": "dist/floating-ui.dom.esm.js",
@@ -61,3 +61,3 @@ "unpkg": "dist/floating-ui.dom.min.js",
   "dependencies": {
-    "@floating-ui/core": "^0.4.0"
+    "@floating-ui/core": "^0.5.0"
   },
@@ -64,0 +64,0 @@ "devDependencies": {

src/index.d.ts

@@ -1,2 +0,2 @@
-import { ClientRectObject, ComputePositionConfig } from '@floating-ui/core';
+import type { ComputePositionConfig, ReferenceElement, FloatingElement } from './types';
 /**
@@ -7,7 +7,5 @@ * Computes the `x` and `y` coordinates that will place the floating element
  */
-export declare const computePosition: (reference: Element | {
-    getBoundingClientRect(): ClientRectObject;
-    contextElement?: Element;
-}, floating: HTMLElement, options?: Partial<ComputePositionConfig>) => Promise<import("@floating-ui/core").ComputePositionReturn>;
+export declare const computePosition: (reference: ReferenceElement, floating: FloatingElement, options?: Partial<ComputePositionConfig>) => Promise<import("@floating-ui/core").ComputePositionReturn>;
 export { arrow, autoPlacement, flip, hide, offset, shift, limitShift, size, inline, detectOverflow, } from '@floating-ui/core';
-export { getScrollParents } from './utils/getScrollParents';
+export { autoUpdate } from './autoUpdate';
+export { getOverflowAncestors } from './utils/getOverflowAncestors';

src/types.d.ts

@@ -1,3 +0,3 @@
-import type { Middleware, MiddlewareArguments, SideObject } from '@floating-ui/core';
-import type { Options as DetectOverflowOptions } from '@floating-ui/core/src/detectOverflow';
+import type { Middleware, MiddlewareArguments, SideObject, ClientRectObject, Padding } from '@floating-ui/core';
+import type { Options as CoreDetectOverflowOptions } from '@floating-ui/core/src/detectOverflow';
 import type { Options as AutoPlacementOptions } from '@floating-ui/core/src/middleware/autoPlacement';
@@ -7,23 +7,42 @@ import type { Options as SizeOptions } from '@floating-ui/core/src/middleware/size';
 import type { Options as ShiftOptions } from '@floating-ui/core/src/middleware/shift';
-export declare type NodeScroll = {
+import type { Options as HideOptions } from '@floating-ui/core/src/middleware/hide';
+export interface NodeScroll {
     scrollLeft: number;
     scrollTop: number;
+}
+export declare type Boundary = 'clippingAncestors' | Element | Array<Element>;
+export declare type DetectOverflowOptions = Omit<CoreDetectOverflowOptions, 'boundary'> & {
+    boundary: Boundary;
 };
-export declare type DOMDetectOverflowOptions = Omit<DetectOverflowOptions, 'boundary'> & {
-    boundary: 'clippingParents' | Element | Array<Element>;
-};
 /**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+export interface VirtualElement {
+    getBoundingClientRect(): ClientRectObject;
+    contextElement?: Element;
+}
+export declare type ReferenceElement = Element | VirtualElement;
+export declare type FloatingElement = HTMLElement;
+export interface Elements {
+    reference: ReferenceElement;
+    floating: FloatingElement;
+}
+/**
  * Automatically chooses the `placement` which has the most space available.
+ * @see https://floating-ui.com/docs/autoPlacement
  */
-declare const autoPlacement: (options?: Partial<AutoPlacementOptions & DOMDetectOverflowOptions>) => Middleware;
+declare const autoPlacement: (options?: Partial<AutoPlacementOptions & DetectOverflowOptions>) => Middleware;
 /**
  * Shifts the floating element in order to keep it in view when it will overflow
  * a clipping boundary.
+ * @see https://floating-ui.com/docs/shift
  */
-declare const shift: (options?: Partial<ShiftOptions & DOMDetectOverflowOptions>) => Middleware;
+declare const shift: (options?: Partial<ShiftOptions & DetectOverflowOptions>) => Middleware;
 /**
  * Changes the placement of the floating element to one that will fit if the
  * initially specified `placement` does not.
+ * @see https://floating-ui.com/docs/flip
  */
-declare const flip: (options?: Partial<FlipOptions & DOMDetectOverflowOptions>) => Middleware;
+declare const flip: (options?: Partial<FlipOptions & DetectOverflowOptions>) => Middleware;
 /**
@@ -33,13 +52,21 @@ * Provides data to change the size of the floating element. For instance,
  * reference element.
+ * @see https://floating-ui.com/docs/size
  */
-declare const size: (options?: Partial<SizeOptions & DOMDetectOverflowOptions>) => Middleware;
+declare const size: (options?: Partial<SizeOptions & DetectOverflowOptions>) => Middleware;
 /**
  * Positions an inner element of the floating element such that it is centered
  * to the reference element.
+ * @see https://floating-ui.com/docs/arrow
  */
 declare const arrow: (options: {
     element: HTMLElement;
-    padding?: number | SideObject;
+    padding?: Padding;
 }) => Middleware;
 /**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+declare const hide: (options?: Partial<HideOptions & DetectOverflowOptions>) => Middleware;
+/**
  * Resolves with an object of overflow side offsets that determine how much the
@@ -50,8 +77,10 @@ * element is overflowing a given clipping boundary.
  * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
  */
-declare const detectOverflow: (middlewareArguments: MiddlewareArguments, options?: Partial<DOMDetectOverflowOptions>) => Promise<SideObject>;
-export { autoPlacement, shift, arrow, size, flip, detectOverflow };
-export { hide, offset, limitShift, inline } from '@floating-ui/core';
-export type { Platform, Placement, Strategy, Middleware, } from '@floating-ui/core';
+declare const detectOverflow: (middlewareArguments: MiddlewareArguments, options?: Partial<DetectOverflowOptions>) => Promise<SideObject>;
+export { autoPlacement, shift, arrow, size, flip, hide, detectOverflow };
+export { offset, limitShift, inline } from '@floating-ui/core';
+export type { Platform, Placement, Strategy, Middleware, Alignment, Side, AlignedPlacement, Axis, Length, Coords, SideObject, Dimensions, Rect, ElementRects, ElementContext, ClientRectObject, Padding, RootBoundary, MiddlewareArguments, MiddlewareReturn, MiddlewareData, ComputePositionConfig, ComputePositionReturn, } from '@floating-ui/core';
 export { computePosition } from './';
-export { getScrollParents } from './utils/getScrollParents';
+export { autoUpdate } from './autoUpdate';
+export { getOverflowAncestors } from './utils/getOverflowAncestors';

src/utils/is.d.ts

@@ -13,4 +13,4 @@ declare global {
 export declare function isShadowRoot(node: Node): node is ShadowRoot;
-export declare function isScrollParent(element: HTMLElement): boolean;
+export declare function isOverflowElement(element: HTMLElement): boolean;
 export declare function isTableElement(element: Element): boolean;
 export declare function isContainingBlock(element: Element): boolean;

New alerts

Minified code

Quality

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96262

13.8%

Number of package files

33

3.13%

Lines of code

2167

12.86%

Worsened metrics

Number of low quality alerts

3

50%

Dependency changes

• + Added

  @floating-ui/core@0.5.1
  (transitive)

• - Removed

  @floating-ui/core@0.4.0
  (transitive)

• Updated

  @floating-ui/core@^0.5.0