@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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96262

increased by13.8%

Number of package files

33

increased by3.13%

Lines of code

2167

increased by12.86%

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