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

package/dist/collection/components/value-list-item/value-list-item.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.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -11,42 +11,13 @@ import { ICONS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the component.
  * @slot actions-start - A slot for adding actions or content to the start side of the component.
  */
 export class ValueListItem {
   constructor() {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * @internal
-     */
-    this.disableDeselect = false;
-    /**
-     * When `true`, prevents the content of the component from user interaction.
-     */
-    this.nonInteractive = false;
-    /**
-     * @internal
-     */
-    this.handleActivated = false;
-    /**
-     * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
-     *
-     * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
-     */
-    this.icon = null;
-    /**
-     * When `true`, adds an action to remove the component.
-     */
-    this.removable = false;
-    /**
-     * When `true`, the component is selected.
-     */
-    this.selected = false;
     this.pickListItem = null;
     this.guid = `calcite-value-list-item-${guid()}`;
     // --------------------------------------------------------------------------
@@ -57,6 +28,7 @@ export class ValueListItem {
     this.getPickListRef = (el) => (this.pickListItem = el);
     this.handleKeyDown = (event) => {
       if (event.key === " ") {
+        event.preventDefault();
         this.handleActivated = !this.handleActivated;
       }
     };
@@ -66,6 +38,18 @@ export class ValueListItem {
     this.handleSelectChange = (event) => {
       this.selected = event.detail.selected;
     };
+    this.description = undefined;
+    this.disabled = false;
+    this.deselectDisabled = false;
+    this.nonInteractive = false;
+    this.handleActivated = false;
+    this.icon = null;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.metadata = undefined;
+    this.removable = false;
+    this.selected = false;
+    this.value = undefined;
   }
   // --------------------------------------------------------------------------
   //
@@ -78,6 +62,12 @@ export class ValueListItem {
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
   }
@@ -97,8 +87,8 @@ export class ValueListItem {
   }
   /** Set focus on the component. */
   async setFocus() {
-    var _a;
-    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+    await componentLoaded(this);
+    this.pickListItem?.setFocus();
   }
   calciteListItemChangeHandler(event) {
     // adjust item payload from wrapped item before bubbling
@@ -120,16 +110,16 @@ export class ValueListItem {
     return hasActionsStart ? (h("slot", { name: SLOTS.actionsStart, slot: PICK_LIST_SLOTS.actionsStart })) : null;
   }
   renderHandle() {
-    const { icon } = this;
+    const { icon, iconFlipRtl } = this;
     if (icon === ICON_TYPES.grip) {
       return (h("span", { class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
-        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
     }
   }
   render() {
-    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, disableDeselect: this.disableDeselect, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd())));
+    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd())));
   }
   static get is() { return "calcite-value-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -180,7 +170,7 @@ export class ValueListItem {
         "reflect": true,
         "defaultValue": "false"
       },
-      "disableDeselect": {
+      "deselectDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -197,7 +187,7 @@ export class ValueListItem {
             }],
           "text": ""
         },
-        "attribute": "disable-deselect",
+        "attribute": "deselect-disabled",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -266,6 +256,24 @@ export class ValueListItem {
         "reflect": true,
         "defaultValue": "null"
       },
+      "iconFlipRtl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "icon-flip-rtl",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "label": {
         "type": "string",
         "mutable": false,

package/dist/collection/utils/array.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.97
+ * v1.0.0-beta.99
  */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.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.97
+ * v1.0.0-beta.99
  */
 import { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";
@@ -12,6 +12,11 @@ const observerOptions = { childList: true };
  * Helper to set up a conditional slot component on connectedCallback.
  *
  * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
  */
 export function connectConditionalSlotComponent(component) {
   if (!mutationObserver) {
@@ -23,6 +28,11 @@ export function connectConditionalSlotComponent(component) {
  * Helper to tear down a conditional slot component on disconnectedCallback.
  *
  * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
  */
 export function disconnectConditionalSlotComponent(component) {
   observed.delete(component.el);

package/dist/collection/utils/config.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.97
+ * v1.0.0-beta.99
  */
 /**
  * This module helps users provide custom configuration for component internals.

package/dist/collection/utils/date.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.97
+ * v1.0.0-beta.99
  */
 import { numberStringFormatter } from "./locale";
 /**
@@ -12,6 +12,9 @@ import { numberStringFormatter } from "./locale";
  * @param max
  */
 export function inRange(date, min, max) {
+  if (!date) {
+    return;
+  }
   const time = date.getTime();
   const afterMin = !(min instanceof Date) || time >= min.getTime();
   const beforeMax = !(max instanceof Date) || time <= max.getTime();
@@ -65,6 +68,46 @@ export function dateFromISO(iso8601, isEndDate = false) {
   }
   return date;
 }
+/**
+ * Parse a localized date string into a valid Date.
+ * return false if date is invalid, or out of range
+ *
+ * @param value
+ * @param localeData
+ */
+export function dateFromLocalizedString(value, localeData) {
+  if (!localeData) {
+    return null;
+  }
+  const { separator } = localeData;
+  const { day, month, year } = parseDateString(value, localeData);
+  const date = new Date(year, month, day);
+  date.setFullYear(year);
+  const validDay = day > 0;
+  const validMonth = month > -1;
+  const validDate = !isNaN(date.getTime());
+  const validLength = value.split(separator).filter((c) => c).length > 2;
+  const validYear = year.toString().length > 0;
+  if (validDay && validMonth && validDate && validLength && validYear) {
+    return date;
+  }
+  return null;
+}
+/**
+ * Retrieve day, month, and year strings from a localized string
+ *
+ * @param string
+ * @param localeData
+ */
+export function datePartsFromLocalizedString(string, localeData) {
+  const { separator, unitOrder } = localeData;
+  const order = getOrder(unitOrder);
+  const values = string.split(separator).map((part) => numberStringFormatter.delocalize(part));
+  const day = values[order.indexOf("d")];
+  const month = values[order.indexOf("m")];
+  const year = values[order.indexOf("y")];
+  return { day, month, year };
+}
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
  *
@@ -125,18 +168,17 @@ export function nextMonth(date) {
 /**
  * Parse numeric units for day, month, and year from a localized string
  * month starts at 0 (can pass to date constructor)
+ * can return values as number or string
  *
- * @param str
+ * @param string
  * @param localeData
  */
-export function parseDateString(str, localeData) {
-  const { separator, unitOrder } = localeData;
-  const order = getOrder(unitOrder);
-  const values = str.split(separator).map((part) => numberStringFormatter.delocalize(part));
+export function parseDateString(string, localeData) {
+  const { day, month, year } = datePartsFromLocalizedString(string, localeData);
   return {
-    day: parseInt(values[order.indexOf("d")]),
-    month: parseInt(values[order.indexOf("m")]) - 1,
-    year: parseInt(values[order.indexOf("y")])
+    day: parseInt(day),
+    month: parseInt(month) - 1,
+    year: parseInt(year)
   };
 }
 /**

package/dist/collection/utils/dom.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.97
+ * v1.0.0-beta.99
  */
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
@@ -24,7 +24,7 @@ export function nodeListToArray(nodeList) {
 }
 export function getThemeName(el) {
   const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
-  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
+  return closestElWithTheme?.classList.contains("calcite-theme-dark") ? "dark" : "light";
 }
 export function getElementDir(el) {
   const prop = "dir";
@@ -114,7 +114,7 @@ export function containsCrossShadowBoundary(element, maybeDescendant) {
   return !!walkUpAncestry(maybeDescendant, (node) => (node === element ? true : undefined));
 }
 export function isCalciteFocusable(el) {
-  return typeof (el === null || el === void 0 ? void 0 : el.setFocus) === "function";
+  return typeof el?.setFocus === "function";
 }
 export async function focusElement(el) {
   if (!el) {
@@ -133,21 +133,21 @@ export function getSlotted(element, slotName, options) {
       ? slotName.map((name) => `[slot="${name}"]`).join(",")
       : `[slot="${slotName}"]`
     : defaultSlotSelector;
-  if (options === null || options === void 0 ? void 0 : options.all) {
+  if (options?.all) {
     return queryMultiple(element, slotSelector, options);
   }
   return querySingle(element, slotSelector, options);
 }
 function getDirectChildren(el, selector) {
-  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+  return el ? Array.from(el.children || []).filter((child) => child?.matches(selector)) : [];
 }
 function queryMultiple(element, slotSelector, options) {
   let matches = slotSelector === defaultSlotSelector
     ? getDirectChildren(element, defaultSlotSelector)
     : Array.from(element.querySelectorAll(slotSelector));
   matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
-  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
-  const selector = options === null || options === void 0 ? void 0 : options.selector;
+  matches = options?.matches ? matches.filter((el) => el?.matches(options.matches)) : matches;
+  const selector = options?.selector;
   return selector
     ? matches
       .map((item) => Array.from(item.querySelectorAll(selector)))
@@ -159,10 +159,10 @@ function querySingle(element, slotSelector, options) {
   let match = slotSelector === defaultSlotSelector
     ? getDirectChildren(element, defaultSlotSelector)[0] || null
     : element.querySelector(slotSelector);
-  match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
-  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
-  const selector = options === null || options === void 0 ? void 0 : options.selector;
-  return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
+  match = options && options.direct === false ? match : match?.parentElement === element ? match : null;
+  match = options?.matches ? (match?.matches(options.matches) ? match : null) : match;
+  const selector = options?.selector;
+  return selector ? match?.querySelector(selector) : match;
 }
 export function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
@@ -193,6 +193,34 @@ export function intersects(rect1, rect2) {
 export function toAriaBoolean(value) {
   return Boolean(value).toString();
 }
+/**
+ * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned element.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ *
+ * @param event
+ * @returns {boolean} Whether the slot has any assigned elements.
+ */
+export function slotChangeHasAssignedElement(event) {
+  return !!slotChangeGetAssignedElements(event).length;
+}
+/**
+ * This helper returns the assigned elements on a `slot` element from the `onSlotchange` event.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
+ * ```
+ *
+ * @param event
+ * @returns {boolean} Whether the slot has any assigned elements.
+ */
+export function slotChangeGetAssignedElements(event) {
+  return event.target.assignedElements({
+    flatten: true
+  });
+}
 /**
  * This helper returns true if the pointer event fired from the primary button of the device.
  *
@@ -204,3 +232,27 @@ export function toAriaBoolean(value) {
 export function isPrimaryPointerButton(event) {
   return !!(event.isPrimary && event.button === 0);
 }
+export const focusElementInGroup = (elements, currentElement, destination) => {
+  const currentIndex = elements.indexOf(currentElement);
+  const isFirstItem = currentIndex === 0;
+  const isLastItem = currentIndex === elements.length - 1;
+  destination =
+    destination === "previous" && isFirstItem ? "last" : destination === "next" && isLastItem ? "first" : destination;
+  let focusTarget;
+  switch (destination) {
+    case "first":
+      focusTarget = elements[0];
+      break;
+    case "last":
+      focusTarget = elements[elements.length - 1];
+      break;
+    case "next":
+      focusTarget = elements[currentIndex + 1] || elements[0];
+      break;
+    case "previous":
+      focusTarget = elements[currentIndex - 1] || elements[elements.length - 1];
+      break;
+  }
+  focusElement(focusTarget);
+  return focusTarget;
+};

package/dist/collection/utils/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-beta.97
+ * v1.0.0-beta.99
  */
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
@@ -12,7 +12,7 @@ export const filter = (data, value) => {
     The data argument should be an array of objects`);
   }
   const find = (input, RE) => {
-    if ((input === null || input === void 0 ? void 0 : input.constant) || (input === null || input === void 0 ? void 0 : input.filterDisabled)) {
+    if (input?.constant || input?.filterDisabled) {
       return true;
     }
     let found = false;

package/dist/collection/utils/floating-ui/nonChromiumPlatformUtils.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.97
+ * v1.0.0-beta.99
  */
 import { rectToClientRect } from "@floating-ui/core";
 /**

package/dist/collection/utils/floating-ui.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.97
+ * v1.0.0-beta.99
  */
 import { arrow, autoPlacement, autoUpdate, computePosition, flip, hide, offset, platform, shift } from "@floating-ui/dom";
 import { closestElementCrossShadowBoundary, getElementDir } from "./dom";
@@ -12,7 +12,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;
@@ -27,15 +27,20 @@ async function patchFloatingUiForNonChromiumBrowsers() {
     platform.getElementRects = getElementRects;
   }
 }
-const placementDataAttribute = "data-placement";
+/**
+ * Exported for testing purposes only
+ */
+export const placementDataAttribute = "data-placement";
 /**
  * Exported for testing purposes only
  */
 export const repositionDebounceTimeout = 100;
 export const placements = [
+  // auto placements
   "auto",
   "auto-start",
   "auto-end",
+  // placements
   "top",
   "top-start",
   "top-end",
@@ -48,6 +53,7 @@ export const placements = [
   "left",
   "left-start",
   "left-end",
+  // variation placements
   "leading-start",
   "leading",
   "leading-end",
@@ -97,7 +103,7 @@ export 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 [
@@ -118,7 +124,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) {
@@ -140,22 +146,12 @@ export 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
-*/
 export 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.
@@ -168,7 +164,7 @@ export 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
@@ -196,7 +192,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
@@ -204,8 +200,7 @@ const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeo
  * @param root0.type
  * @param root0.includeArrow
  */
-export async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, includeArrow = false, arrowEl, type }) {
-  var _a;
+export async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, includeArrow = false, arrowEl, type }) {
   if (!referenceEl || !floatingEl || (includeArrow && !arrowEl)) {
     return null;
   }
@@ -217,7 +212,7 @@ export async function positionFloatingUI({ referenceEl, floatingEl, overlayPosit
       : getEffectivePlacement(floatingEl, placement),
     middleware: getMiddleware({
       placement,
-      disableFlip,
+      flipDisabled,
       flipPlacements,
       offsetDistance,
       offsetSkidding,
@@ -225,14 +220,14 @@ export async function positionFloatingUI({ referenceEl, floatingEl, overlayPosit
       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);
@@ -266,9 +261,13 @@ export 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
@@ -329,14 +328,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}]`);