@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.97

package/dist/cjs/{floating-ui-99430551.js → floating-ui-b48c8256.js}

@@ -1,11 +1,12 @@
 /*!
  * 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-beta.95
+ * v1.0.0-beta.97
  */
 'use strict';
 
-const dom = require('./dom-df1903f9.js');
+const dom = require('./dom-2ec8c9ed.js');
+const debounce = require('./debounce-2c8b61fb.js');
 
 function getSide(placement) {
   return placement.split('-')[0];
@@ -895,9 +896,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));
@@ -909,8 +911,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
@@ -920,6 +925,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;
@@ -1058,7 +1066,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 {
@@ -1202,7 +1210,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;
   }
@@ -1253,6 +1261,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;
@@ -1286,15 +1310,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
 
@@ -1361,12 +1395,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, {
@@ -1435,6 +1468,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 Promise.resolve().then(function () { return require('./nonChromiumPlatformUtils-95812e02.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",
@@ -1515,9 +1587,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.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
@@ -1529,12 +1632,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"
@@ -1560,7 +1665,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,
@@ -1571,6 +1676,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.
@@ -1584,11 +1694,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.
@@ -1601,6 +1715,7 @@ function disconnectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
     return;
   }
+  getTransitionTarget(floatingEl).removeEventListener("transitionend", handleTransitionElTransitionEnd);
   const cleanup = cleanupMap.get(component);
   if (cleanup) {
     cleanup();
@@ -1614,6 +1729,42 @@ 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 dom.closestElementCrossShadowBoundary(floatingTransitionEl, `[${placementDataAttribute}]`);
+}
 
 exports.FloatingCSS = FloatingCSS;
 exports.connectFloatingUI = connectFloatingUI;
@@ -1621,5 +1772,6 @@ exports.defaultMenuPlacement = defaultMenuPlacement;
 exports.defaultOffsetDistance = defaultOffsetDistance;
 exports.disconnectFloatingUI = disconnectFloatingUI;
 exports.filterComputedPlacements = filterComputedPlacements;
-exports.positionFloatingUI = positionFloatingUI;
-exports.repositionDebounceTimeout = repositionDebounceTimeout;
+exports.rectToClientRect = rectToClientRect;
+exports.reposition = reposition;
+exports.updateAfterClose = updateAfterClose;

package/dist/cjs/{form-53eb189e.js → form-1d831023.js}

@@ -1,12 +1,12 @@
 /*!
  * 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-beta.95
+ * v1.0.0-beta.97
  */
 'use strict';
 
-const dom = require('./dom-df1903f9.js');
-const index = require('./index-bbc26bc6.js');
+const dom = require('./dom-2ec8c9ed.js');
+const index = require('./index-a0010f96.js');
 
 /**
  * Exported for testing purposes.

package/dist/cjs/{guid-9ba07df0.js → guid-f4f03a7a.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-beta.95
+ * v1.0.0-beta.97
  */
 'use strict';