@esri/calcite-components 1.0.0-next.606 → 1.0.0-next.607

package/dist/esm/{floating-ui-b2f9718e.js → floating-ui-d7d7ebf5.js}

@@ -1,9 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
-import { a as getElementDir } from './dom-640caf51.js';
+import { c as closestElementCrossShadowBoundary, a as getElementDir } from './dom-fbef4a17.js';
+import { d as debounce } from './debounce-97857fea.js';
 
 function getSide(placement) {
   return placement.split('-')[0];
@@ -893,9 +894,10 @@ function isOverflowElement(element) {
   const {
     overflow,
     overflowX,
-    overflowY
+    overflowY,
+    display
   } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
@@ -907,8 +909,11 @@ function isContainingBlock(element) {
   // 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' || // @ts-ignore (TS 4.1 compat)
-  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
@@ -918,6 +923,9 @@ function isLayoutViewport() {
   // 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;
@@ -1056,7 +1064,7 @@ 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 {
@@ -1200,7 +1208,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;
   }
@@ -1251,6 +1259,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;
@@ -1284,15 +1308,25 @@ function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
 
 function getClippingAncestors(element) {
   const clippingAncestors = getOverflowAncestors(element);
-  const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle(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
 
@@ -1359,12 +1393,11 @@ function autoUpdate(reference, floating, update, options) {
 
   const {
     ancestorScroll: _ancestorScroll = true,
-    ancestorResize: _ancestorResize = true,
+    ancestorResize = true,
     elementResize = true,
     animationFrame = false
   } = options;
   const ancestorScroll = _ancestorScroll && !animationFrame;
-  const ancestorResize = _ancestorResize && !animationFrame;
   const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
@@ -1433,6 +1466,45 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
   ...options
 });
 
+/**
+ * This module helps users provide custom configuration for component internals.
+ *
+ * @internal
+ */
+const configOverrides = globalThis["calciteComponentsConfig"];
+const config = {
+  /**
+   * We apply a custom fix to improve positioning for non-Chromium browsers.
+   * The fix comes at a performance cost, so provides users a way to opt-out if necessary.
+   *
+   * @internal
+   */
+  floatingUINonChromiumPositioningFix: true,
+  ...configOverrides
+};
+
+const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers();
+async function patchFloatingUiForNonChromiumBrowsers() {
+  function getUAString() {
+    const uaData = navigator.userAgentData;
+    if (uaData === null || uaData === void 0 ? void 0 : uaData.brands) {
+      return uaData.brands.map((item) => `${item.brand}/${item.version}`).join(" ");
+    }
+    return navigator.userAgent;
+  }
+  if (config.floatingUINonChromiumPositioningFix &&
+    // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
+    /firefox|safari/i.test(getUAString())) {
+    const { getClippingRect, getElementRects, getOffsetParent } = await import('./nonChromiumPlatformUtils-9a77a585.js');
+    platform.getClippingRect = getClippingRect;
+    platform.getOffsetParent = getOffsetParent;
+    platform.getElementRects = getElementRects;
+  }
+}
+const placementDataAttribute = "data-placement";
+/**
+ * Exported for testing purposes only
+ */
 const repositionDebounceTimeout = 100;
 const effectivePlacements = [
   "top",
@@ -1513,9 +1585,40 @@ function getEffectivePlacement(floatingEl, placement) {
     .replace(/leading/gi, placements[0])
     .replace(/trailing/gi, placements[1]);
 }
+/**
+ * Convenience function to manage `reposition` calls for FloatingUIComponents that use `positionFloatingUI.
+ *
+ * Note: this is not needed for components that use `calcite-popover`.
+ *
+ * @param component
+ * @param options
+ * @param options.referenceEl
+ * @param options.floatingEl
+ * @param options.overlayPositioning
+ * @param options.placement
+ * @param options.disableFlip
+ * @param options.flipPlacements
+ * @param options.offsetDistance
+ * @param options.offsetSkidding
+ * @param options.arrowEl
+ * @param options.type
+ * @param delayed
+ */
+async function reposition(component, options, delayed = false) {
+  if (!component.open) {
+    return;
+  }
+  return delayed ? debouncedReposition(options) : positionFloatingUI(options);
+}
+const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeout, {
+  leading: true,
+  maxWait: repositionDebounceTimeout
+});
 /**
  * Positions the floating element relative to the reference element.
  *
+ * **Note:** exported for testing purposes only
+ *
  * @param root0
  * @param root0.referenceEl
  * @param root0.floatingEl
@@ -1527,12 +1630,14 @@ function getEffectivePlacement(floatingEl, placement) {
  * @param root0.offsetSkidding
  * @param root0.arrowEl
  * @param root0.type
+ * @param root0.includeArrow
  */
-async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
+async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, includeArrow = false, arrowEl, type }) {
   var _a;
-  if (!referenceEl || !floatingEl) {
+  if (!referenceEl || !floatingEl || (includeArrow && !arrowEl)) {
     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"
@@ -1558,7 +1663,7 @@ async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning
   const referenceHidden = (_a = middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
   const visibility = referenceHidden ? "hidden" : null;
   const pointerEvents = visibility ? "none" : null;
-  floatingEl.setAttribute("data-placement", effectivePlacement);
+  floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
   const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
   Object.assign(floatingEl.style, {
     visibility,
@@ -1569,6 +1674,11 @@ async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning
     transform
   });
 }
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
 const cleanupMap = new WeakMap();
 /**
  * Helper to set up floating element interactions on connectedCallback.
@@ -1582,11 +1692,15 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
     return;
   }
   disconnectFloatingUI(component, referenceEl, floatingEl);
-  cleanupMap.set(component, autoUpdate(referenceEl, floatingEl, () => {
-    if (component.open) {
-      component.reposition();
-    }
-  }));
+  const position = component.overlayPositioning;
+  // ensure position matches for initial positioning
+  floatingEl.style.position = position;
+  if (position === "absolute") {
+    moveOffScreen(floatingEl);
+  }
+  const runAutoUpdate = autoUpdate
+    ;
+  cleanupMap.set(component, runAutoUpdate(referenceEl, floatingEl, () => component.reposition()));
 }
 /**
  * Helper to tear down floating element interactions on disconnectedCallback.
@@ -1599,6 +1713,7 @@ function disconnectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
     return;
   }
+  getTransitionTarget(floatingEl).removeEventListener("transitionend", handleTransitionElTransitionEnd);
   const cleanup = cleanupMap.get(component);
   if (cleanup) {
     cleanup();
@@ -1612,5 +1727,41 @@ const visiblePointerSize = 4;
  * @default 6
  */
 const defaultOffsetDistance = Math.ceil(Math.hypot(visiblePointerSize, visiblePointerSize));
+/**
+ * This utils applies floating element styles to avoid affecting layout when closed.
+ *
+ * This should be called when the closing transition will start.
+ *
+ * @param floatingEl
+ */
+function updateAfterClose(floatingEl) {
+  if (!floatingEl || floatingEl.style.position !== "absolute") {
+    return;
+  }
+  getTransitionTarget(floatingEl).addEventListener("transitionend", handleTransitionElTransitionEnd);
+}
+function getTransitionTarget(floatingEl) {
+  // assumes floatingEl w/ shadowRoot is a FloatingUIComponent
+  return floatingEl.shadowRoot || floatingEl;
+}
+function handleTransitionElTransitionEnd(event) {
+  const floatingTransitionEl = event.target;
+  if (
+  // using any prop from floating-ui transition
+  event.propertyName === "opacity" &&
+    floatingTransitionEl.classList.contains(FloatingCSS.animation)) {
+    const floatingEl = getFloatingElFromTransitionTarget(floatingTransitionEl);
+    moveOffScreen(floatingEl);
+    getTransitionTarget(floatingEl).removeEventListener("transitionend", handleTransitionElTransitionEnd);
+  }
+}
+function moveOffScreen(floatingEl) {
+  floatingEl.style.transform = "";
+  floatingEl.style.top = "-99999px";
+  floatingEl.style.left = "-99999px";
+}
+function getFloatingElFromTransitionTarget(floatingTransitionEl) {
+  return closestElementCrossShadowBoundary(floatingTransitionEl, `[${placementDataAttribute}]`);
+}
 
-export { FloatingCSS as F, disconnectFloatingUI as a, defaultOffsetDistance as b, connectFloatingUI as c, defaultMenuPlacement as d, filterComputedPlacements as f, positionFloatingUI as p, repositionDebounceTimeout as r };
+export { FloatingCSS as F, disconnectFloatingUI as a, defaultOffsetDistance as b, connectFloatingUI as c, defaultMenuPlacement as d, rectToClientRect as e, filterComputedPlacements as f, reposition as r, updateAfterClose as u };

package/dist/esm/{form-493b70e6.js → form-6c6f44c9.js}

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
-import { c as closestElementCrossShadowBoundary } from './dom-640caf51.js';
-import { h } from './index-06118eda.js';
+import { c as closestElementCrossShadowBoundary } from './dom-fbef4a17.js';
+import { h } from './index-dd350c9e.js';
 
 /**
  * Exported for testing purposes.

package/dist/esm/{guid-11f68c50.js → guid-46425949.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
 function gen(counts) {
   return counts

package/dist/esm/{index-06118eda.js → index-dd350c9e.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
 const NAMESPACE = 'calcite';
 

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */

package/dist/esm/{interactive-fccdf326.js → interactive-7bb63697.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
 function noopClick() {
   /** noop */

package/dist/esm/{interfaces-d9428b54.js → interfaces-1e4b4247.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
 var StatusIcons;
 (function (StatusIcons) {

package/dist/esm/{key-754bbff1.js → key-9fd0ee2d.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
 function isActivationKey(key) {
   return key === "Enter" || key === " ";

package/dist/esm/{label-57dd65d4.js → label-4476feb8.js}

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
-import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom-640caf51.js';
+import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom-fbef4a17.js';
 
 /**
  * Exported for testing purposes only

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
-import { p as promiseResolve, b as bootstrapLazy } from './index-06118eda.js';
-import { g as globalScripts } from './app-globals-1b919870.js';
-import './resources-64b0963b.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-dd350c9e.js';
+import { g as globalScripts } from './app-globals-a52284f2.js';
+import './resources-f25e2a24.js';
 
 /*
  Stencil Client Patch Esm v2.18.1 | MIT Licensed | https://stenciljs.com

package/dist/esm/{locale-4e463ebf.js → locale-59ce851a.js}

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
-import { n as numberKeys } from './key-754bbff1.js';
-import { c as createObserver } from './observers-74e54f0e.js';
-import { c as closestElementCrossShadowBoundary, b as containsCrossShadowBoundary } from './dom-640caf51.js';
+import { n as numberKeys } from './key-9fd0ee2d.js';
+import { c as createObserver } from './observers-4a45256c.js';
+import { c as closestElementCrossShadowBoundary, b as containsCrossShadowBoundary } from './dom-fbef4a17.js';
 
 // adopted from https://stackoverflow.com/a/66939244
 class BigDecimal {

package/dist/esm/{math-99ba6bfb.js → math-f58b6249.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.606
+ * v1.0.0-next.607
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalPlaces = (value) => {