@esri/solutions-components 0.6.2 → 0.6.3

package/dist/components/floating-ui.js

@@ -5,6 +5,7 @@
  */
 import { Build } from '@stencil/core/internal/client';
 import { c as getElementDir } from './dom.js';
+import { g as getUserAgentString, a as getUserAgentData } from './browser.js';
 import { d as debounce } from './debounce.js';
 
 function getAlignment(placement) {
@@ -344,7 +345,7 @@ const arrow = options => ({
       [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset
+        centerOffset: center - offset + alignmentOffset
       }
     };
   }
@@ -868,7 +869,13 @@ function isNode(value) {
   return value instanceof getWindow(value).Node;
 }
 function getNodeName(node) {
-  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
 }
 
 function isHTMLElement(value) {
@@ -882,8 +889,7 @@ function isShadowRoot(node) {
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  const OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
+  return node instanceof getWindow(node).ShadowRoot || node instanceof ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -915,6 +921,11 @@ function isLastTraversableNode(node) {
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
+const floor = Math.floor;
+const createEmptyCoords = v => ({
+  x: v,
+  y: v
+});
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -933,7 +944,7 @@ function getCssDimensions(element) {
   return {
     width,
     height,
-    fallback: shouldFallback
+    $: shouldFallback
   };
 }
 
@@ -941,23 +952,19 @@ function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
 
-const FALLBACK_SCALE = {
-  x: 1,
-  y: 1
-};
 function getScale(element) {
   const domElement = unwrapElement(element);
   if (!isHTMLElement(domElement)) {
-    return FALLBACK_SCALE;
+    return createEmptyCoords(1);
   }
   const rect = domElement.getBoundingClientRect();
   const {
     width,
     height,
-    fallback
+    $
   } = getCssDimensions(domElement);
-  let x = (fallback ? round(rect.width) : rect.width) / width;
-  let y = (fallback ? round(rect.height) : rect.height) / height;
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
 
   // 0, NaN, or Infinity should always fallback to 1.
 
@@ -973,10 +980,7 @@ function getScale(element) {
   };
 }
 
-const noOffsets = {
-  x: 0,
-  y: 0
-};
+const noOffsets = /*#__PURE__*/createEmptyCoords(0);
 function getVisualOffsets(element, isFixed, floatingOffsetParent) {
   var _win$visualViewport, _win$visualViewport2;
   if (isFixed === void 0) {
@@ -1004,7 +1008,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const clientRect = element.getBoundingClientRect();
   const domElement = unwrapElement(element);
-  let scale = FALLBACK_SCALE;
+  let scale = createEmptyCoords(1);
   if (includeScale) {
     if (offsetParent) {
       if (isElement(offsetParent)) {
@@ -1027,14 +1031,14 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle(currentIFrame);
-      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
-      x += iframeRect.x;
-      y += iframeRect.y;
+      x += left;
+      y += top;
       currentIFrame = getWindow(currentIFrame).frameElement;
     }
   }
@@ -1078,14 +1082,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  let scale = {
-    x: 1,
-    y: 1
-  };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  let scale = createEmptyCoords(1);
+  const offsets = createEmptyCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1151,9 +1149,7 @@ function getParentNode(node) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
   if (isLastTraversableNode(parentNode)) {
-    // `getParentNode` will never return a `Document` due to the fallback
-    // check, so it's either the <html> or <body> element.
-    return parentNode.ownerDocument.body;
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
   }
   if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
     return parentNode;
@@ -1205,10 +1201,7 @@ function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement(element) ? getScale(element) : {
-    x: 1,
-    y: 1
-  };
+  const scale = isHTMLElement(element) ? getScale(element) : createEmptyCoords(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -1359,10 +1352,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  const offsets = createEmptyCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1412,6 +1402,67 @@ const platform = {
   isRTL: element => getComputedStyle$1(element).direction === 'rtl'
 };
 
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    let isFirstUpdate = true;
+    io = new IntersectionObserver(entries => {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (ratio === 0) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }, {
+      rootMargin,
+      threshold
+    });
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
 /**
  * Automatically updates the position of the floating element when necessary.
  * Should only be called when the floating element is mounted on the DOM or
@@ -1428,29 +1479,25 @@ function autoUpdate(reference, floating, update, options) {
     ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
+    layoutShift = typeof IntersectionObserver === 'function',
     animationFrame = false
   } = options;
-  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
-    // ignores Window, checks for [object VisualViewport]
-    const isVisualViewport = !isElement(ancestor) && ancestor.toString().includes('V');
-    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
-      ancestor.addEventListener('scroll', update, {
-        passive: true
-      });
-    }
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
     ancestorResize && ancestor.addEventListener('resize', update);
   });
-  let observer = null;
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let resizeObserver = null;
   if (elementResize) {
-    observer = new ResizeObserver(() => {
-      update();
-    });
-    isElement(reference) && !animationFrame && observer.observe(reference);
-    if (!isElement(reference) && reference.contextElement && !animationFrame) {
-      observer.observe(reference.contextElement);
+    resizeObserver = new ResizeObserver(update);
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
     }
-    observer.observe(floating);
+    resizeObserver.observe(floating);
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -1467,13 +1514,13 @@ function autoUpdate(reference, floating, update, options) {
   }
   update();
   return () => {
-    var _observer;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
     });
-    (_observer = observer) == null ? void 0 : _observer.disconnect();
-    observer = null;
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
     if (animationFrame) {
       cancelAnimationFrame(frameId);
     }
@@ -1507,7 +1554,7 @@ const computePosition = (reference, floating, options) => {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.2
+ * v1.4.3
  */
 /**
  * This module helps users provide custom configuration for component internals.
@@ -1529,38 +1576,119 @@ const config = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.2
+ * v1.4.3
  */
 const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers();
+function isChrome109OrAbove() {
+  const uaData = getUserAgentData();
+  if (uaData?.brands) {
+    return !!uaData.brands.find(({ brand, version }) => (brand === "Google Chrome" || brand === "Chromium") && Number(version) >= 109);
+  }
+  return !!navigator.userAgent.split(" ").find((ua) => {
+    const [browser, version] = ua.split("/");
+    return browser === "Chrome" && parseInt(version) >= 109;
+  });
+}
 async function patchFloatingUiForNonChromiumBrowsers() {
-  function getUAData() {
-    return navigator.userAgentData;
-  }
-  function getUAString() {
-    const uaData = getUAData();
-    return uaData?.brands
-      ? uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ")
-      : navigator.userAgent;
-  }
-  function isChrome109OrAbove() {
-    const uaData = getUAData();
-    if (uaData?.brands) {
-      return !!uaData.brands.find(({ brand, version }) => (brand === "Google Chrome" || brand === "Chromium") && Number(version) >= 109);
-    }
-    return !!navigator.userAgent.split(" ").find((ua) => {
-      const [browser, version] = ua.split("/");
-      return browser === "Chrome" && parseInt(version) >= 109;
-    });
-  }
   if (Build.isBrowser &&
     config.floatingUINonChromiumPositioningFix &&
     // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
-    (/firefox|safari/i.test(getUAString()) || isChrome109OrAbove())) {
+    (/firefox|safari/i.test(getUserAgentString()) || isChrome109OrAbove())) {
     const { offsetParent } = await import('./composed-offset-position.esm.js');
     const originalGetOffsetParent = platform.getOffsetParent;
     platform.getOffsetParent = (element) => originalGetOffsetParent(element, offsetParent);
   }
 }
+/**
+ * Positions the floating element relative to the reference element.
+ *
+ * **Note:** exported for testing purposes only
+ *
+ * @param root0
+ * @param root0.referenceEl
+ * @param root0.floatingEl
+ * @param root0.overlayPositioning
+ * @param root0.placement
+ * @param root0.flipDisabled
+ * @param root0.flipPlacements
+ * @param root0.offsetDistance
+ * @param root0.offsetSkidding
+ * @param root0.arrowEl
+ * @param root0.type
+ * @param component
+ * @param root0.referenceEl.referenceEl
+ * @param root0.referenceEl.floatingEl
+ * @param root0.referenceEl.overlayPositioning
+ * @param root0.referenceEl.placement
+ * @param root0.referenceEl.flipDisabled
+ * @param root0.referenceEl.flipPlacements
+ * @param root0.referenceEl.offsetDistance
+ * @param root0.referenceEl.offsetSkidding
+ * @param root0.referenceEl.arrowEl
+ * @param root0.referenceEl.type
+ * @param component.referenceEl
+ * @param component.floatingEl
+ * @param component.overlayPositioning
+ * @param component.placement
+ * @param component.flipDisabled
+ * @param component.flipPlacements
+ * @param component.offsetDistance
+ * @param component.offsetSkidding
+ * @param component.arrowEl
+ * @param component.type
+ */
+const positionFloatingUI = 
+/* we export arrow function to allow us to spy on it during testing */
+async (component, { referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) => {
+  if (!referenceEl || !floatingEl) {
+    return null;
+  }
+  await floatingUIBrowserCheck;
+  const { x, y, placement: effectivePlacement, strategy: position, middlewareData } = await computePosition(referenceEl, floatingEl, {
+    strategy: overlayPositioning,
+    placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
+      ? undefined
+      : getEffectivePlacement(floatingEl, placement),
+    middleware: getMiddleware({
+      placement,
+      flipDisabled,
+      flipPlacements,
+      offsetDistance,
+      offsetSkidding,
+      arrowEl,
+      type
+    })
+  });
+  if (arrowEl && middlewareData.arrow) {
+    const { x, y } = middlewareData.arrow;
+    const side = effectivePlacement.split("-")[0];
+    const alignment = x != null ? "left" : "top";
+    const transform = ARROW_CSS_TRANSFORM[side];
+    const reset = { left: "", top: "", bottom: "", right: "" };
+    if ("floatingLayout" in component) {
+      component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical";
+    }
+    Object.assign(arrowEl.style, {
+      ...reset,
+      [alignment]: `${alignment == "left" ? x : y}px`,
+      [side]: "100%",
+      transform
+    });
+  }
+  const referenceHidden = middlewareData.hide?.referenceHidden;
+  const visibility = referenceHidden ? "hidden" : null;
+  const pointerEvents = visibility ? "none" : null;
+  floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
+  const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
+  Object.assign(floatingEl.style, {
+    visibility,
+    pointerEvents,
+    position,
+    top: "0",
+    left: "0",
+    transform
+  });
+};
 /**
  * Exported for testing purposes only
  */
@@ -1661,112 +1789,34 @@ async function reposition(component, options, delayed = false) {
   if (!component.open) {
     return;
   }
-  return delayed ? debouncedReposition(component, options) : positionFloatingUI(component, options);
+  const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
+  return positionFunction(component, options);
+}
+function getDebouncedReposition(component) {
+  let debounced = componentToDebouncedRepositionMap.get(component);
+  if (debounced) {
+    return debounced;
+  }
+  debounced = debounce(positionFloatingUI, repositionDebounceTimeout, {
+    leading: true,
+    maxWait: repositionDebounceTimeout
+  });
+  componentToDebouncedRepositionMap.set(component, debounced);
+  return debounced;
 }
-const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeout, {
-  leading: true,
-  maxWait: repositionDebounceTimeout
-});
 const ARROW_CSS_TRANSFORM = {
   top: "",
   left: "rotate(-90deg)",
   bottom: "rotate(180deg)",
   right: "rotate(90deg)"
 };
-/**
- * Positions the floating element relative to the reference element.
- *
- * **Note:** exported for testing purposes only
- *
- * @param root0
- * @param root0.referenceEl
- * @param root0.floatingEl
- * @param root0.overlayPositioning
- * @param root0.placement
- * @param root0.flipDisabled
- * @param root0.flipPlacements
- * @param root0.offsetDistance
- * @param root0.offsetSkidding
- * @param root0.arrowEl
- * @param root0.type
- * @param component
- * @param root0.referenceEl.referenceEl
- * @param root0.referenceEl.floatingEl
- * @param root0.referenceEl.overlayPositioning
- * @param root0.referenceEl.placement
- * @param root0.referenceEl.flipDisabled
- * @param root0.referenceEl.flipPlacements
- * @param root0.referenceEl.offsetDistance
- * @param root0.referenceEl.offsetSkidding
- * @param root0.referenceEl.arrowEl
- * @param root0.referenceEl.type
- * @param component.referenceEl
- * @param component.floatingEl
- * @param component.overlayPositioning
- * @param component.placement
- * @param component.flipDisabled
- * @param component.flipPlacements
- * @param component.offsetDistance
- * @param component.offsetSkidding
- * @param component.arrowEl
- * @param component.type
- */
-async function positionFloatingUI(component, { referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
-  if (!referenceEl || !floatingEl) {
-    return null;
-  }
-  await floatingUIBrowserCheck;
-  const { x, y, placement: effectivePlacement, strategy: position, middlewareData } = await computePosition(referenceEl, floatingEl, {
-    strategy: overlayPositioning,
-    placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
-      ? undefined
-      : getEffectivePlacement(floatingEl, placement),
-    middleware: getMiddleware({
-      placement,
-      flipDisabled,
-      flipPlacements,
-      offsetDistance,
-      offsetSkidding,
-      arrowEl,
-      type
-    })
-  });
-  if (arrowEl && middlewareData.arrow) {
-    const { x, y } = middlewareData.arrow;
-    const side = effectivePlacement.split("-")[0];
-    const alignment = x != null ? "left" : "top";
-    const transform = ARROW_CSS_TRANSFORM[side];
-    const reset = { left: "", top: "", bottom: "", right: "" };
-    if ("floatingLayout" in component) {
-      component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical";
-    }
-    Object.assign(arrowEl.style, {
-      ...reset,
-      [alignment]: `${alignment == "left" ? x : y}px`,
-      [side]: "100%",
-      transform
-    });
-  }
-  const referenceHidden = middlewareData.hide?.referenceHidden;
-  const visibility = referenceHidden ? "hidden" : null;
-  const pointerEvents = visibility ? "none" : null;
-  floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
-  const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
-  Object.assign(floatingEl.style, {
-    visibility,
-    pointerEvents,
-    position,
-    top: "0",
-    left: "0",
-    transform
-  });
-}
 /**
  * Exported for testing purposes only
  *
  * @internal
  */
 const cleanupMap = new WeakMap();
+const componentToDebouncedRepositionMap = new WeakMap();
 /**
  * Helper to set up floating element interactions on connectedCallback.
  *
@@ -1808,11 +1858,10 @@ function disconnectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
     return;
   }
-  const cleanup = cleanupMap.get(component);
-  if (cleanup) {
-    cleanup();
-  }
+  cleanupMap.get(component)?.();
   cleanupMap.delete(component);
+  componentToDebouncedRepositionMap.get(component)?.cancel();
+  componentToDebouncedRepositionMap.delete(component);
 }
 const visiblePointerSize = 4;
 /**