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

package/dist/components/floating-ui.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-beta.97
+ * v1.0.0-beta.99
  */
-import { c as getElementDir, o as closestElementCrossShadowBoundary } from './dom.js';
+import { c as getElementDir, q as closestElementCrossShadowBoundary } from './dom.js';
 import { Build } from '@stencil/core/internal/client/index.js';
 import { d as debounce } from './debounce.js';
 
@@ -101,6 +101,7 @@ const computePosition$1 = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
+  const validMiddleware = middleware.filter(Boolean);
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
 
   let rects = await platform.getElementRects({
@@ -116,11 +117,11 @@ const computePosition$1 = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
 
-  for (let i = 0; i < middleware.length; i++) {
+  for (let i = 0; i < validMiddleware.length; i++) {
     const {
       name,
       fn
-    } = middleware[i];
+    } = validMiddleware[i];
     const {
       x: nextX,
       y: nextY,
@@ -251,19 +252,29 @@ async function detectOverflow(middlewareArguments, options) {
     rootBoundary,
     strategy
   }));
+  const rect = elementContext === 'floating' ? { ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    rect: elementContext === 'floating' ? { ...rects.floating,
-      x,
-      y
-    } : rects.reference,
-    offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
+    rect,
+    offsetParent,
     strategy
-  }) : rects[elementContext]);
+  }) : rect);
+
   return {
-    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
-    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
-    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
-    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
 
@@ -838,20 +849,10 @@ const shift = function (options) {
   };
 };
 
-function isWindow(value) {
-  return value && value.document && value.location && value.alert && value.setInterval;
-}
 function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
-
-  if (!isWindow(node)) {
-    const ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
+  var _node$ownerDocument;
 
-  return node;
+  return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 
 function getComputedStyle(element) {
@@ -859,14 +860,20 @@ function getComputedStyle(element) {
 }
 
 function getNodeName(node) {
-  return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
+  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
 }
 
+let uaString;
 function getUAString() {
+  if (uaString) {
+    return uaString;
+  }
+
   const uaData = navigator.userAgentData;
 
-  if (uaData != null && uaData.brands) {
-    return uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
+  if (uaData && Array.isArray(uaData.brands)) {
+    uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
+    return uaString;
   }
 
   return navigator.userAgent;
@@ -906,11 +913,12 @@ function isTableElement(element) {
 function isContainingBlock(element) {
   // TODO: Try and use feature detection here instead
   const isFirefox = /firefox/i.test(getUAString());
-  const css = getComputedStyle(element); // This is non-exhaustive but covers the most common CSS properties that
+  const css = getComputedStyle(element);
+  const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter; // 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' || 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
+  return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || 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;
@@ -928,11 +936,37 @@ function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
 
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
+const FALLBACK_SCALE = {
+  x: 1,
+  y: 1
+};
+function getScale(element) {
+  const domElement = !isElement(element) && element.contextElement ? element.contextElement : isElement(element) ? element : null;
+
+  if (!domElement) {
+    return FALLBACK_SCALE;
+  }
+
+  const rect = domElement.getBoundingClientRect();
+  const css = getComputedStyle(domElement);
+  let x = rect.width / parseFloat(css.width);
+  let y = rect.height / parseFloat(css.height); // 0, NaN, or Infinity should always fallback to 1.
 
-function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+
+  return {
+    x,
+    y
+  };
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
   var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
 
   if (includeScale === void 0) {
@@ -944,20 +978,24 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   }
 
   const clientRect = element.getBoundingClientRect();
-  let scaleX = 1;
-  let scaleY = 1;
+  let scale = FALLBACK_SCALE;
 
-  if (includeScale && isHTMLElement(element)) {
-    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
-    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
   }
 
   const win = isElement(element) ? getWindow(element) : window;
   const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-  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;
+  const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scale.x;
+  const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scale.y;
+  const width = clientRect.width / scale.x;
+  const height = clientRect.height / scale.y;
   return {
     width,
     height,
@@ -994,16 +1032,10 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
 }
 
-function isScaled(element) {
-  const rect = getBoundingClientRect(element);
-  return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight;
-}
-
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat)
-  isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
+  const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
   let scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1040,14 +1072,12 @@ function getParentNode(node) {
     return node;
   }
 
-  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
-    // @ts-ignore
-    node.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-    node.parentNode || ( // DOM Element detected
-    isShadowRoot(node) ? node.host : null) || // ShadowRoot detected
-    getDocumentElement(node) // fallback
-
-  );
+  const result = // Step into the shadow DOM of the parent of a slotted node
+  node.assignedSlot || // DOM Element detected
+  node.parentNode || ( // ShadowRoot detected
+  isShadowRoot(node) ? node.host : null) || // Fallback
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
 }
 
 function getTrueOffsetParent(element) {
@@ -1061,16 +1091,11 @@ function getTrueOffsetParent(element) {
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
 
-  if (isShadowRoot(currentNode)) {
-    currentNode = currentNode.host;
-  }
-
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
     } else {
-      const parent = currentNode.parentNode;
-      currentNode = isShadowRoot(parent) ? parent.host : parent;
+      currentNode = getParentNode(currentNode);
     }
   }
 
@@ -1126,6 +1151,10 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
+  let scale = {
+    x: 1,
+    y: 1
+  };
   const offsets = {
     x: 0,
     y: 0
@@ -1137,19 +1166,22 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     }
 
     if (isHTMLElement(offsetParent)) {
-      const offsetRect = getBoundingClientRect(offsetParent, true);
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
-    } // This doesn't appear to be need to be negated.
+    } // This doesn't appear to need to be negated.
     // else if (documentElement) {
     //   offsets.x = getWindowScrollBarX(documentElement);
     // }
 
   }
 
-  return { ...rect,
-    x: rect.x - scroll.scrollLeft + offsets.x,
-    y: rect.y - scroll.scrollTop + offsets.y
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
   };
 }
 
@@ -1181,6 +1213,9 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const min = Math.min;
+const max = Math.max;
+
 // of the `<html>` and `<body>` rect bounds if horizontally scrollable
 
 function getDocumentRect(element) {
@@ -1231,103 +1266,84 @@ function getOverflowAncestors(node, list) {
   const scrollableAncestor = getNearestOverflowAncestor(node);
   const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
   const win = getWindow(scrollableAncestor);
-  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(target));
-}
-
-function contains(parent, child) {
-  const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
-
-  if (parent.contains(child)) {
-    return true;
-  } // then fallback to custom implementation with Shadow DOM support
-  else if (rootNode && isShadowRoot(rootNode)) {
-    let next = child;
-
-    do {
-      // use `===` replace node.isSameNode()
-      if (next && parent === next) {
-        return true;
-      } // @ts-ignore: need a better way to handle this...
-
-
-      next = next.parentNode || next.host;
-    } while (next);
-  }
-
-  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;
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
   }
 
-  return currentNode;
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
 }
 
+// Returns the inner client rect, subtracting scrollbars if present
 function getInnerBoundingClientRect(element, strategy) {
-  const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
+  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 width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
   return {
-    top,
-    left,
-    x: left,
-    y: top,
-    right: left + element.clientWidth,
-    bottom: top + element.clientHeight,
-    width: element.clientWidth,
-    height: element.clientHeight
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y,
+    width,
+    height
   };
 }
 
-function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
-  if (clippingParent === 'viewport') {
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  if (clippingAncestor === 'viewport') {
     return rectToClientRect(getViewportRect(element, strategy));
   }
 
-  if (isElement(clippingParent)) {
-    return getInnerBoundingClientRect(clippingParent, strategy);
+  if (isElement(clippingAncestor)) {
+    return getInnerBoundingClientRect(clippingAncestor, strategy);
   }
 
   return rectToClientRect(getDocumentRect(getDocumentElement(element)));
-} // A "clipping ancestor" is an overflowable container with the characteristic of
-// clipping (or hiding) overflowing elements with a position different from
-// `initial`
+} // A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
 
 
-function getClippingAncestors(element) {
-  const clippingAncestors = getOverflowAncestors(element);
-  const nearestEscapableParent = getNearestParentCapableOfEscapingClipping(element, clippingAncestors);
-  let clipperElement = null;
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
 
-  if (nearestEscapableParent && isHTMLElement(nearestEscapableParent)) {
-    const offsetParent = getOffsetParent(nearestEscapableParent);
-
-    if (isOverflowElement(nearestEscapableParent)) {
-      clipperElement = nearestEscapableParent;
-    } else if (isHTMLElement(offsetParent)) {
-      clipperElement = offsetParent;
-    }
+  if (cachedResult) {
+    return cachedResult;
   }
 
-  if (!isElement(clipperElement)) {
-    return [];
-  } // @ts-ignore isElement check ensures we return Array<Element>
+  let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle(currentNode);
+    const containingBlock = isContainingBlock(currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
+
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration
+      currentContainingBlockComputedStyle = computedStyle;
+    }
 
+    currentNode = getParentNode(currentNode);
+  }
 
-  return clippingAncestors.filter(clippingAncestors => clipperElement && isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
+  cache.set(element, result);
+  return result;
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping ancestors
 
@@ -1339,8 +1355,8 @@ function getClippingRect(_ref) {
     rootBoundary,
     strategy
   } = _ref;
-  const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
-  const clippingAncestors = [...mainClippingAncestors, rootBoundary];
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
     const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
@@ -1365,20 +1381,26 @@ const platform = {
   getDimensions,
   getOffsetParent,
   getDocumentElement,
-  getElementRects: _ref => {
+  getScale,
+
+  async getElementRects(_ref) {
     let {
       reference,
       floating,
       strategy
     } = _ref;
+    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+    const getDimensionsFn = this.getDimensions;
     return {
-      reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy),
-      floating: { ...getDimensions(floating),
+      reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
+      floating: {
         x: 0,
-        y: 0
+        y: 0,
+        ...(await getDimensionsFn(floating))
       }
     };
   },
+
   getClientRects: element => Array.from(element.getClientRects()),
   isRTL: element => getComputedStyle(element).direction === 'rtl'
 };
@@ -1399,7 +1421,7 @@ function autoUpdate(reference, floating, update, options) {
     animationFrame = false
   } = options;
   const ancestorScroll = _ancestorScroll && !animationFrame;
-  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
+  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
       passive: true
@@ -1418,6 +1440,11 @@ function autoUpdate(reference, floating, update, options) {
       initialUpdate = false;
     });
     isElement(reference) && !animationFrame && observer.observe(reference);
+
+    if (!isElement(reference) && reference.contextElement && !animationFrame) {
+      observer.observe(reference.contextElement);
+    }
+
     observer.observe(floating);
   }
 
@@ -1462,10 +1489,22 @@ function autoUpdate(reference, floating, update, options) {
  * strategy.
  */
 
-const computePosition = (reference, floating, options) => computePosition$1(reference, floating, {
-  platform,
-  ...options
-});
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = { ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, { ...mergedOptions,
+    platform: platformWithCache
+  });
+};
 
 /**
  * This module helps users provide custom configuration for component internals.
@@ -1488,7 +1527,7 @@ const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers();
 async function patchFloatingUiForNonChromiumBrowsers() {
   function getUAString() {
     const uaData = navigator.userAgentData;
-    if (uaData === null || uaData === void 0 ? void 0 : uaData.brands) {
+    if (uaData?.brands) {
       return uaData.brands.map((item) => `${item.brand}/${item.version}`).join(" ");
     }
     return navigator.userAgent;
@@ -1503,6 +1542,9 @@ async function patchFloatingUiForNonChromiumBrowsers() {
     platform.getElementRects = getElementRects;
   }
 }
+/**
+ * Exported for testing purposes only
+ */
 const placementDataAttribute = "data-placement";
 /**
  * Exported for testing purposes only
@@ -1527,7 +1569,7 @@ const FloatingCSS = {
   animation: "calcite-floating-ui-anim",
   animationActive: "calcite-floating-ui-anim--active"
 };
-function getMiddleware({ placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
+function getMiddleware({ placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
   const defaultMiddleware = [shift(), hide()];
   if (type === "menu") {
     return [
@@ -1548,7 +1590,7 @@ function getMiddleware({ placement, disableFlip, flipPlacements, offsetDistance,
     if (placement === "auto" || placement === "auto-start" || placement === "auto-end") {
       middleware.push(autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null }));
     }
-    else if (!disableFlip) {
+    else if (!flipDisabled) {
       middleware.push(flip(flipPlacements ? { fallbackPlacements: flipPlacements } : {}));
     }
     if (arrowEl) {
@@ -1570,22 +1612,12 @@ function filterComputedPlacements(placements, el) {
   }
   return filteredPlacements;
 }
-/*
-In floating-ui, "*-start" and "*-end" are already flipped in RTL.
-There is no need for our "*-leading" and "*-trailing" values anymore.
-https://github.com/floating-ui/floating-ui/issues/1530
-https://github.com/floating-ui/floating-ui/issues/1563
-*/
 function getEffectivePlacement(floatingEl, placement) {
   const placements = ["left", "right"];
   if (getElementDir(floatingEl) === "rtl") {
     placements.reverse();
   }
-  return placement
-    .replace(/-leading/gi, "-start")
-    .replace(/-trailing/gi, "-end")
-    .replace(/leading/gi, placements[0])
-    .replace(/trailing/gi, placements[1]);
+  return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]);
 }
 /**
  * Convenience function to manage `reposition` calls for FloatingUIComponents that use `positionFloatingUI.
@@ -1598,7 +1630,7 @@ function getEffectivePlacement(floatingEl, placement) {
  * @param options.floatingEl
  * @param options.overlayPositioning
  * @param options.placement
- * @param options.disableFlip
+ * @param options.flipDisabled
  * @param options.flipPlacements
  * @param options.offsetDistance
  * @param options.offsetSkidding
@@ -1626,7 +1658,7 @@ const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeo
  * @param root0.floatingEl
  * @param root0.overlayPositioning
  * @param root0.placement
- * @param root0.disableFlip
+ * @param root0.flipDisabled
  * @param root0.flipPlacements
  * @param root0.offsetDistance
  * @param root0.offsetSkidding
@@ -1634,8 +1666,7 @@ const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeo
  * @param root0.type
  * @param root0.includeArrow
  */
-async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, includeArrow = false, arrowEl, type }) {
-  var _a;
+async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, includeArrow = false, arrowEl, type }) {
   if (!referenceEl || !floatingEl || (includeArrow && !arrowEl)) {
     return null;
   }
@@ -1647,7 +1678,7 @@ async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning
       : getEffectivePlacement(floatingEl, placement),
     middleware: getMiddleware({
       placement,
-      disableFlip,
+      flipDisabled,
       flipPlacements,
       offsetDistance,
       offsetSkidding,
@@ -1655,14 +1686,14 @@ async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning
       type
     })
   });
-  if (middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.arrow) {
+  if (middlewareData?.arrow) {
     const { x: arrowX, y: arrowY } = middlewareData.arrow;
     Object.assign(arrowEl.style, {
       left: arrowX != null ? `${arrowX}px` : "",
       top: arrowY != null ? `${arrowY}px` : ""
     });
   }
-  const referenceHidden = (_a = middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+  const referenceHidden = middlewareData?.hide?.referenceHidden;
   const visibility = referenceHidden ? "hidden" : null;
   const pointerEvents = visibility ? "none" : null;
   floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
@@ -1696,9 +1727,13 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
   disconnectFloatingUI(component, referenceEl, floatingEl);
   const position = component.overlayPositioning;
   // ensure position matches for initial positioning
-  floatingEl.style.position = position;
+  Object.assign(floatingEl.style, {
+    visibility: "hidden",
+    pointerEvents: "none",
+    position
+  });
   if (position === "absolute") {
-    moveOffScreen(floatingEl);
+    resetPosition(floatingEl);
   }
   const runAutoUpdate = Build.isBrowser
     ? autoUpdate
@@ -1759,14 +1794,15 @@ function handleTransitionElTransitionEnd(event) {
   event.propertyName === "opacity" &&
     floatingTransitionEl.classList.contains(FloatingCSS.animation)) {
     const floatingEl = getFloatingElFromTransitionTarget(floatingTransitionEl);
-    moveOffScreen(floatingEl);
+    resetPosition(floatingEl);
     getTransitionTarget(floatingEl).removeEventListener("transitionend", handleTransitionElTransitionEnd);
   }
 }
-function moveOffScreen(floatingEl) {
+function resetPosition(floatingEl) {
+  // resets position to better match https://floating-ui.com/docs/computePosition#initial-layout
   floatingEl.style.transform = "";
-  floatingEl.style.top = "-99999px";
-  floatingEl.style.left = "-99999px";
+  floatingEl.style.top = "0";
+  floatingEl.style.left = "0";
 }
 function getFloatingElFromTransitionTarget(floatingTransitionEl) {
   return closestElementCrossShadowBoundary(floatingTransitionEl, `[${placementDataAttribute}]`);