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

package/dist/components/dropdown.js

@@ -1,23 +1,22 @@
 /*!
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean, i as isPrimaryPointerButton, f as focusElement } from './dom.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS, p as positionFloatingUI, r as repositionDebounceTimeout } from './floating-ui.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, u as updateAfterClose, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
 import { g as guid } from './guid.js';
 import { i as isActivationKey } from './key.js';
-import { d as debounce } from './debounce.js';
 
 const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };
 
-const dropdownCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-flex;flex:0 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;transform:scale(0);visibility:hidden;pointer-events:none;inline-size:0;block-size:0;overflow:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:flex;flex:1 1 auto}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
+const dropdownCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-flex;flex:0 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;visibility:hidden;pointer-events:none;inline-size:0;block-size:0;overflow:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:flex;flex:1 1 auto}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -91,7 +90,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.slotChangeHandler = (event) => {
       this.defaultAssignedElements = event.target.assignedElements({
         flatten: true
@@ -108,14 +106,14 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.triggers = event.target.assignedElements({
         flatten: true
       });
-      this.debouncedReposition();
+      this.reposition(true);
     };
     this.updateItems = () => {
       this.items = this.groups
         .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.debouncedReposition();
+      this.reposition(true);
     };
     this.updateGroups = (event) => {
       const groups = event.target
@@ -148,10 +146,10 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (!scrollerEl) {
         return;
       }
-      this.debouncedReposition();
+      this.reposition(true);
       const maxScrollerHeight = this.getMaxScrollerHeight();
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-      this.debouncedReposition();
+      this.reposition(true);
     };
     this.setScrollerAndTransitionEl = (el) => {
       this.resizeObserver.observe(el);
@@ -217,10 +215,18 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   openHandler(value) {
     if (!this.disabled) {
-      this.debouncedReposition();
+      if (value) {
+        this.reposition(true);
+      }
+      else {
+        updateAfterClose(this.floatingEl);
+      }
       this.active = value;
       return;
     }
+    if (!value) {
+      updateAfterClose(this.floatingEl);
+    }
     this.open = false;
   }
   handleDisabledChange(value) {
@@ -230,16 +236,16 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   placementHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   //--------------------------------------------------------------------------
   //
@@ -250,7 +256,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
     if (this.open) {
       this.openHandler(this.open);
     }
@@ -260,7 +266,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     connectOpenCloseComponent(this);
   }
   componentDidLoad() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -285,17 +291,21 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
       type: "menu"
-    });
+    }, delayed);
   }
   closeCalciteDropdownOnClick(event) {
     if (!isPrimaryPointerButton(event) || !this.open || event.composedPath().includes(this.el)) {

package/dist/components/filter.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { f as focusElement } from './dom.js';

package/dist/components/filter2.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
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';
 

package/dist/components/floating-ui.js

@@ -1,9 +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 { c as getElementDir } from './dom.js';
+import { c as getElementDir, o as closestElementCrossShadowBoundary } from './dom.js';
+import { Build } from '@stencil/core/internal/client/index.js';
+import { d as debounce } from './debounce.js';
 
 function getSide(placement) {
   return placement.split('-')[0];
@@ -893,9 +895,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 +910,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 +924,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 +1065,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 +1209,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 +1260,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 +1309,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 +1394,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 +1467,46 @@ 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 (Build.isBrowser &&
+    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.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 +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(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 +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"
@@ -1558,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,
@@ -1569,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.
@@ -1582,11 +1694,21 @@ 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 = Build.isBrowser
+    ? autoUpdate
+    : (_refEl, _floatingEl, updateCallback) => {
+      updateCallback();
+      return () => {
+        /* noop */
+      };
+    };
+  cleanupMap.set(component, runAutoUpdate(referenceEl, floatingEl, () => component.reposition()));
 }
 /**
  * Helper to tear down floating element interactions on disconnectedCallback.
@@ -1599,6 +1721,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 +1735,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/components/form.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
  */
 import { o as closestElementCrossShadowBoundary } from './dom.js';
 import { h } from '@stencil/core/internal/client/index.js';

package/dist/components/graph.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
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/guid.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/components/handle.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/icon.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
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/index.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
  */
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client/index.js';
 import { d as darkTheme, a as autoTheme } from './dom.js';

package/dist/components/input.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { T as TEXT$1, b as getSlotted, i as isPrimaryPointerButton, s as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';

package/dist/components/interactive.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/components/interfaces.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/components/interfaces2.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 TreeSelectionMode;
 (function (TreeSelectionMode) {

package/dist/components/key.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/components/label.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label2.js';

package/dist/components/label2.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
  */
 import { q as queryElementRoots, o as closestElementCrossShadowBoundary } from './dom.js';
 

package/dist/components/link.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
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, C as CSS_UTILITY, f as focusElement } from './dom.js';