@haiilo/catalyst 1.2.4 → 1.3.0

package/dist/components/floating-ui.dom.esm.js

@@ -105,9 +105,9 @@ const computePosition$1 = async (reference, floating, config) => {
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
   let middlewareData = {};
+  let resetCount = 0;
 
   for (let i = 0; i < middleware.length; i++) {
-
     const {
       name,
       fn
@@ -139,7 +139,9 @@ const computePosition$1 = async (reference, floating, config) => {
       }
     };
 
-    if (reset) {
+    if (reset && resetCount <= 50) {
+      resetCount++;
+
       if (typeof reset === 'object') {
         if (reset.placement) {
           statefulPlacement = reset.placement;
@@ -247,9 +249,7 @@ async function detectOverflow(middlewareArguments, options) {
     } : rects.reference,
     offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
     strategy
-  }) : rects[elementContext]); // positive = overflowing the clipping rect
-  // 0 or negative = within the clipping rect
-
+  }) : rects[elementContext]);
   return {
     top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
     bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
@@ -414,19 +414,19 @@ const flip = function (options) {
   };
 };
 
-function convertValueToCoords(placement, rects, value, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-
+async function convertValueToCoords(middlewareArguments, value) {
+  const {
+    placement,
+    platform,
+    elements
+  } = middlewareArguments;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getMainAxisFromPlacement(placement) === 'x';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value({ ...rects,
-    placement
-  }) : value; // eslint-disable-next-line prefer-const
+  const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
 
   let {
     mainAxis,
@@ -472,13 +472,9 @@ const offset = function (value) {
     async fn(middlewareArguments) {
       const {
         x,
-        y,
-        placement,
-        rects,
-        platform,
-        elements
+        y
       } = middlewareArguments;
-      const diffCoords = convertValueToCoords(placement, rects, value, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+      const diffCoords = await convertValueToCoords(middlewareArguments, value);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
@@ -490,7 +486,7 @@ const offset = function (value) {
 };
 
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === '[object Window]';
+  return value && value.document && value.location && value.alert && value.setInterval;
 }
 function getWindow(node) {
   if (node == null) {
@@ -505,7 +501,7 @@ function getWindow(node) {
   return node;
 }
 
-function getComputedStyle$1(element) {
+function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
 }
 
@@ -513,6 +509,16 @@ function getNodeName(node) {
   return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
 }
 
+function getUAString() {
+  const uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
 function isHTMLElement(value) {
   return value instanceof getWindow(value).HTMLElement;
 }
@@ -523,6 +529,11 @@ function isNode(value) {
   return value instanceof getWindow(value).Node;
 }
 function isShadowRoot(node) {
+  // Browsers without `ShadowRoot` support
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
   const OwnElement = getWindow(node).ShadowRoot;
   return node instanceof OwnElement || node instanceof ShadowRoot;
 }
@@ -531,36 +542,46 @@ function isOverflowElement(element) {
   const {
     overflow,
     overflowX,
-    overflowY
-  } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+    overflowY,
+    display
+  } = getComputedStyle(element);
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
 function isContainingBlock(element) {
   // TODO: Try and use feature detection here instead
-  const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
-  const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that
+  const isFirefox = /firefox/i.test(getUAString());
+  const css = getComputedStyle(element); // This is non-exhaustive but covers the most common CSS properties that
   // create a containing block.
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
-  return css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false);
+  return css.transform !== 'none' || css.perspective !== 'none' || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some( // TS 4.1 compat
+  value => {
+    const contain = css.contain;
+    return contain != null ? contain.includes(value) : false;
+  });
 }
 function isLayoutViewport() {
   // Not Safari
-  return !/^((?!chrome|android).)*safari/i.test(navigator.userAgent); // Feature detection for this fails in various ways
+  return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways
   // • Always-visible scrollbar or not
   // • Width of <html>, etc.
   // const vV = win.visualViewport;
   // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true;
 }
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
 
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
 
 function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
+
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -580,8 +601,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
 
   const win = isElement(element) ? getWindow(element) : window;
   const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-  const x = (clientRect.left + (addVisualOffsets ? win.visualViewport.offsetLeft : 0)) / scaleX;
-  const y = (clientRect.top + (addVisualOffsets ? win.visualViewport.offsetTop : 0)) / scaleY;
+  const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX;
+  const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY;
   const width = clientRect.width / scaleX;
   const height = clientRect.height / scaleY;
   return {
@@ -601,16 +622,16 @@ function getDocumentElement(node) {
 }
 
 function getNodeScroll(element) {
-  if (isWindow(element)) {
+  if (isElement(element)) {
     return {
-      scrollLeft: element.pageXOffset,
-      scrollTop: element.pageYOffset
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
     };
   }
 
   return {
-    scrollLeft: element.scrollLeft,
-    scrollTop: element.scrollTop
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
   };
 }
 
@@ -628,7 +649,8 @@ function isScaled(element) {
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
+  const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat)
+  isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
   let scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -690,11 +712,12 @@ function getContainingBlock(element) {
     currentNode = currentNode.host;
   }
 
-  while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
     } else {
-      currentNode = currentNode.parentNode;
+      const parent = currentNode.parentNode;
+      currentNode = isShadowRoot(parent) ? parent.host : parent;
     }
   }
 
@@ -818,7 +841,7 @@ function getDocumentRect(element) {
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
 
-  if (getComputedStyle$1(body || html).direction === 'rtl') {
+  if (getComputedStyle(body || html).direction === 'rtl') {
     x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
   }
 
@@ -833,7 +856,7 @@ function getDocumentRect(element) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
 
-  if (['html', 'body', '#document'].includes(getNodeName(parentNode))) {
+  if (isLastTraversableNode(parentNode)) {
     // @ts-ignore assume body is always available
     return node.ownerDocument.body;
   }
@@ -858,7 +881,7 @@ function getOverflowAncestors(node, list) {
   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(getOverflowAncestors(getParentNode(target)));
+  updatedList.concat(getOverflowAncestors(target));
 }
 
 function contains(parent, child) {
@@ -884,6 +907,22 @@ function contains(parent, child) {
   return false;
 }
 
+function getNearestParentCapableOfEscapingClipping(element, clippingAncestors) {
+  let currentNode = element;
+
+  while (currentNode && !isLastTraversableNode(currentNode) && // @ts-expect-error
+  !clippingAncestors.includes(currentNode)) {
+    if (isElement(currentNode) && ['absolute', 'fixed'].includes(getComputedStyle(currentNode).position)) {
+      break;
+    }
+
+    const parentNode = getParentNode(currentNode);
+    currentNode = isShadowRoot(parentNode) ? parentNode.host : parentNode;
+  }
+
+  return currentNode;
+}
+
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
@@ -917,15 +956,25 @@ function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
 
 function getClippingAncestors(element) {
   const clippingAncestors = getOverflowAncestors(element);
-  const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
-  const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+  const nearestEscapableParent = getNearestParentCapableOfEscapingClipping(element, clippingAncestors);
+  let clipperElement = null;
+
+  if (nearestEscapableParent && isHTMLElement(nearestEscapableParent)) {
+    const offsetParent = getOffsetParent(nearestEscapableParent);
+
+    if (isOverflowElement(nearestEscapableParent)) {
+      clipperElement = nearestEscapableParent;
+    } else if (isHTMLElement(offsetParent)) {
+      clipperElement = offsetParent;
+    }
+  }
 
   if (!isElement(clipperElement)) {
     return [];
   } // @ts-ignore isElement check ensures we return Array<Element>
 
 
-  return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
+  return clippingAncestors.filter(clippingAncestors => clipperElement && isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping ancestors
 
@@ -978,7 +1027,7 @@ const platform = {
     };
   },
   getClientRects: element => Array.from(element.getClientRects()),
-  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
+  isRTL: element => getComputedStyle(element).direction === 'rtl'
 };
 
 /**
@@ -992,14 +1041,11 @@ function autoUpdate(reference, floating, update, options) {
 
   const {
     ancestorScroll: _ancestorScroll = true,
-    ancestorResize: _ancestorResize = true,
-    elementResize: _elementResize = true,
+    ancestorResize = true,
+    elementResize = true,
     animationFrame = false
   } = options;
-  let cleanedUp = false;
   const ancestorScroll = _ancestorScroll && !animationFrame;
-  const ancestorResize = _ancestorResize && !animationFrame;
-  const elementResize = _elementResize && !animationFrame;
   const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
@@ -1010,8 +1056,15 @@ function autoUpdate(reference, floating, update, options) {
   let observer = null;
 
   if (elementResize) {
-    observer = new ResizeObserver(update);
-    isElement(reference) && observer.observe(reference);
+    let initialUpdate = true;
+    observer = new ResizeObserver(() => {
+      if (!initialUpdate) {
+        update();
+      }
+
+      initialUpdate = false;
+    });
+    isElement(reference) && !animationFrame && observer.observe(reference);
     observer.observe(floating);
   }
 
@@ -1023,10 +1076,6 @@ function autoUpdate(reference, floating, update, options) {
   }
 
   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)) {
@@ -1037,10 +1086,10 @@ function autoUpdate(reference, floating, update, options) {
     frameId = requestAnimationFrame(frameLoop);
   }
 
+  update();
   return () => {
     var _observer;
 
-    cleanedUp = true;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);