@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

package/dist/collection/components/popover/popover.js

@@ -1,17 +1,16 @@
 /*!
  * 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.94
+ * v1.0.0-beta.96
  */
-import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
+import { forceUpdate, Host, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
+import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { Heading } from "../functional/Heading";
 import PopoverManager from "./PopoverManager";
-import { debounce } from "lodash-es";
 const manager = new PopoverManager();
 /**
  * @slot - A slot for adding custom content.
@@ -24,49 +23,51 @@ export class Popover {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
+     * When `true`, clicking outside of the component automatically closes open `calcite-popover`s.
      */
     this.autoClose = false;
     /**
-     * When true, a close button is added to the component.
+     * When `true`, a close button is added to the component.
      *
      * @deprecated use dismissible instead.
      */
     this.closeButton = false;
     /**
-     * When true, a close button is added to the component.
+     * When `true`, a close button is added to the component.
      *
-     * @deprecated use closable instead
+     * @deprecated use `closable` instead.
      */
     this.dismissible = false;
-    /** When true, display a close button within the Popover */
+    /** When `true`, display a close button within the component. */
     this.closable = false;
     /**
-     * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
+     * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
      */
     this.disableFlip = false;
     /**
-     * When true, removes the caret pointer.
+     * When `true`, removes the caret pointer.
      */
     this.disablePointer = false;
     /**
-     * Offsets the position of the popover away from the `referenceElement`.
+     * Offsets the position of the component away from the `referenceElement`.
      *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offsets the position of the popover along the `referenceElement`.
+     * Offsets the position of the component along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * When true, displays and positions the component.
+     * When `true`, displays and positions the component.
      */
     this.open = false;
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
@@ -77,7 +78,9 @@ export class Popover {
      */
     this.placement = defaultPopoverPlacement;
     /**
-     * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
+     * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.
+     *
+     * This property can be set to `true` to manage when the component is open.
      */
     this.triggerDisabled = false;
     /**
@@ -94,7 +97,6 @@ export class Popover {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
       connectOpenCloseComponent(this);
@@ -157,7 +159,7 @@ export class Popover {
     };
     this.storeArrowEl = (el) => {
       this.arrowEl = el;
-      this.debouncedReposition();
+      this.reposition(true);
     };
   }
   handleDismissible(value) {
@@ -168,27 +170,32 @@ export class Popover {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   offsetDistanceOffsetHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   offsetSkiddingHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
-  openHandler() {
-    this.debouncedReposition();
+  openHandler(value) {
+    if (value) {
+      this.reposition(true);
+    }
+    else {
+      updateAfterClose(this.el);
+    }
     this.setExpandedAttr();
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   placementHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   // --------------------------------------------------------------------------
   //
@@ -211,7 +218,7 @@ export class Popover {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
-    this.debouncedReposition();
+    this.reposition();
     this.hasLoaded = true;
   }
   disconnectedCallback() {
@@ -224,10 +231,14 @@ export class Popover {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { el, effectiveReferenceElement, placement, overlayPositioning, disableFlip, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl: el,
       referenceEl: effectiveReferenceElement,
       overlayPositioning,
@@ -236,9 +247,10 @@ export class Popover {
       flipPlacements: filteredFlipPlacements,
       offsetDistance,
       offsetSkidding,
+      includeArrow: !this.disablePointer,
       arrowEl,
       type: "popover"
-    });
+    }, delayed);
   }
   /**
    * Sets focus on the component.
@@ -288,563 +300,575 @@ export class Popover {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { closeButton, intlClose, heading, closable } = this;
-    return closable || closeButton ? (h("div", { class: CSS.closeButtonContainer },
-      h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: heading ? "s" : "m", text: intlClose },
-        h("calcite-icon", { icon: "x", scale: heading ? "s" : "m" })))) : null;
+    return closable || closeButton ? (h("div", { class: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: heading ? "s" : "m", text: intlClose }, h("calcite-icon", { icon: "x", scale: heading ? "s" : "m" })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
     const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading)) : null;
-    return headingNode ? (h("div", { class: CSS.header },
-      headingNode,
-      this.renderCloseButton())) : null;
+    return headingNode ? (h("div", { class: CSS.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
     const { effectiveReferenceElement, heading, label, open, disablePointer } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? h("div", { class: CSS.arrow, ref: this.storeArrowEl }) : null;
-    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
-      h("div", { class: {
-          [FloatingCSS.animation]: true,
-          [FloatingCSS.animationActive]: displayed
-        }, ref: this.setTransitionEl },
-        arrowNode,
-        h("div", { class: {
-            [CSS.hasHeader]: !!heading,
-            [CSS.container]: true
-          } },
-          this.renderHeader(),
-          h("div", { class: CSS.content },
-            h("slot", null)),
-          !heading ? this.renderCloseButton() : null))));
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
+        [FloatingCSS.animation]: true,
+        [FloatingCSS.animationActive]: displayed
+      }, ref: this.setTransitionEl }, arrowNode, h("div", { class: {
+        [CSS.hasHeader]: !!heading,
+        [CSS.container]: true
+      } }, this.renderHeader(), h("div", { class: CSS.content }, h("slot", null)), !heading ? this.renderCloseButton() : null))));
   }
   static get is() { return "calcite-popover"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["popover.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["popover.css"]
-  }; }
-  static get properties() { return {
-    "autoClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true and clicking outside of the component, automatically closes open `calcite-popover`s."
-      },
-      "attribute": "auto-close",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "closeButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use dismissible instead."
-          }],
-        "text": "When true, a close button is added to the component."
-      },
-      "attribute": "close-button",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "dismissible": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use closable instead"
-          }],
-        "text": "When true, a close button is added to the component."
-      },
-      "attribute": "dismissible",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "closable": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, display a close button within the Popover"
-      },
-      "attribute": "closable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disableFlip": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, prevents flipping the component's placement when overlapping its `referenceElement`."
-      },
-      "attribute": "disable-flip",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disablePointer": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, removes the caret pointer."
-      },
-      "attribute": "disable-pointer",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "flipPlacements": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "EffectivePlacement[]",
-        "resolved": "Placement[]",
-        "references": {
-          "EffectivePlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the available placements that can be used when a flip occurs."
-      }
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The component header text."
-      },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "headingLevel": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "HeadingLevel",
-        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-        "references": {
-          "HeadingLevel": {
-            "location": "import",
-            "path": "../functional/Heading"
+  static get originalStyleUrls() {
+    return {
+      "$": ["popover.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["popover.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, clicking outside of the component automatically closes open `calcite-popover`s."
+        },
+        "attribute": "auto-close",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "closeButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use dismissible instead."
+            }],
+          "text": "When `true`, a close button is added to the component."
+        },
+        "attribute": "close-button",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "dismissible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `closable` instead."
+            }],
+          "text": "When `true`, a close button is added to the component."
+        },
+        "attribute": "dismissible",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "closable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, display a close button within the component."
+        },
+        "attribute": "closable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disableFlip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, prevents flipping the component's placement when overlapping its `referenceElement`."
+        },
+        "attribute": "disable-flip",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disablePointer": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, removes the caret pointer."
+        },
+        "attribute": "disable-pointer",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "flipPlacements": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EffectivePlacement[]",
+          "resolved": "Placement[]",
+          "references": {
+            "EffectivePlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the available placements that can be used when a flip occurs."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the number at which section headings should start."
-      },
-      "attribute": "heading-level",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component."
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "offsetDistance": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "6"
-          }],
-        "text": "Offsets the position of the popover away from the `referenceElement`."
-      },
-      "attribute": "offset-distance",
-      "reflect": true,
-      "defaultValue": "defaultOffsetDistance"
-    },
-    "offsetSkidding": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Offsets the position of the popover along the `referenceElement`."
-      },
-      "attribute": "offset-skidding",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, displays and positions the component."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "overlayPositioning": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OverlayPositioning",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "OverlayPositioning": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The component header text."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "headingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "HeadingLevel",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "HeadingLevel": {
+              "location": "import",
+              "path": "../functional/Heading"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
-      },
-      "attribute": "overlay-positioning",
-      "reflect": true,
-      "defaultValue": "\"absolute\""
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "LogicalPlacement",
-        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
-        "references": {
-          "LogicalPlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the number at which section headings should start."
+        },
+        "attribute": "heading-level",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "offsetDistance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "6"
+            }],
+          "text": "Offsets the position of the component away from the `referenceElement`."
+        },
+        "attribute": "offset-distance",
+        "reflect": true,
+        "defaultValue": "defaultOffsetDistance"
+      },
+      "offsetSkidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Offsets the position of the component along the `referenceElement`."
+        },
+        "attribute": "offset-skidding",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, displays and positions the component."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "overlayPositioning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OverlayPositioning",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "OverlayPositioning": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
-          }],
-        "text": "Determines where the component will be positioned relative to the `referenceElement`."
-      },
-      "attribute": "placement",
-      "reflect": true,
-      "defaultValue": "defaultPopoverPlacement"
-    },
-    "referenceElement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ReferenceElement | string",
-        "resolved": "Element | VirtualElement | string",
-        "references": {
-          "ReferenceElement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
+        },
+        "attribute": "overlay-positioning",
+        "reflect": true,
+        "defaultValue": "\"absolute\""
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LogicalPlacement",
+          "resolved": "Placement | VariationPlacement | AutoPlacement | DeprecatedPlacement",
+          "references": {
+            "LogicalPlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The `referenceElement` used to position the component according to its \"placement\" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used."
-      },
-      "attribute": "reference-element",
-      "reflect": false
-    },
-    "triggerDisabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to \"true\" to manage when a popover is open."
-      },
-      "attribute": "trigger-disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "intlClose": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Close\""
-          }],
-        "text": "Accessible name for the component's close button."
-      },
-      "attribute": "intl-close",
-      "reflect": false,
-      "defaultValue": "TEXT.close"
-    }
-  }; }
-  static get states() { return {
-    "effectiveReferenceElement": {}
-  }; }
-  static get events() { return [{
-      "method": "calcitePopoverBeforeClose",
-      "name": "calcitePopoverBeforeClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is requested to be closed and before the closing transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calcitePopoverClose",
-      "name": "calcitePopoverClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is closed and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calcitePopoverBeforeOpen",
-      "name": "calcitePopoverBeforeOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calcitePopoverOpen",
-      "name": "calcitePopoverOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is open and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
+            }],
+          "text": "Determines where the component will be positioned relative to the `referenceElement`."
+        },
+        "attribute": "placement",
+        "reflect": true,
+        "defaultValue": "defaultPopoverPlacement"
+      },
+      "referenceElement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ReferenceElement | string",
+          "resolved": "Element | VirtualElement | string",
+          "references": {
+            "ReferenceElement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used."
+        },
+        "attribute": "reference-element",
+        "reflect": false
+      },
+      "triggerDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.\n\nThis property can be set to `true` to manage when the component is open."
+        },
+        "attribute": "trigger-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "intlClose": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Close\""
+            }],
+          "text": "Accessible name for the component's close button."
+        },
+        "attribute": "intl-close",
+        "reflect": false,
+        "defaultValue": "TEXT.close"
       }
-    },
-    "setFocus": {
-      "complexType": {
-        "signature": "(focusId?: \"close-button\") => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "focusId"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "effectiveReferenceElement": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calcitePopoverBeforeClose",
+        "name": "calcitePopoverBeforeClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is requested to be closed and before the closing transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calcitePopoverClose",
+        "name": "calcitePopoverClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is closed and animation is complete."
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calcitePopoverBeforeOpen",
+        "name": "calcitePopoverBeforeOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calcitePopoverOpen",
+        "name": "calcitePopoverOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is open and animation is complete."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reposition": {
+        "complexType": {
+          "signature": "(delayed?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "delayed"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Updates the position of the component.",
+          "tags": [{
+              "name": "param",
+              "text": "delayed"
+            }]
+        }
       },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": [{
-            "name": "param",
-            "text": "focusId"
-          }]
-      }
-    },
-    "toggle": {
-      "complexType": {
-        "signature": "(value?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "value"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setFocus": {
+        "complexType": {
+          "signature": "(focusId?: \"close-button\") => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "focusId"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": [{
+              "name": "param",
+              "text": "focusId"
+            }]
+        }
       },
-      "docs": {
-        "text": "Toggles the component's open property.",
-        "tags": [{
-            "name": "param",
-            "text": "value"
-          }]
+      "toggle": {
+        "complexType": {
+          "signature": "(value?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "value"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggles the component's open property.",
+          "tags": [{
+              "name": "param",
+              "text": "value"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "dismissible",
-      "methodName": "handleDismissible"
-    }, {
-      "propName": "closable",
-      "methodName": "handleClosable"
-    }, {
-      "propName": "flipPlacements",
-      "methodName": "flipPlacementsHandler"
-    }, {
-      "propName": "offsetDistance",
-      "methodName": "offsetDistanceOffsetHandler"
-    }, {
-      "propName": "offsetSkidding",
-      "methodName": "offsetSkiddingHandler"
-    }, {
-      "propName": "open",
-      "methodName": "openHandler"
-    }, {
-      "propName": "overlayPositioning",
-      "methodName": "overlayPositioningHandler"
-    }, {
-      "propName": "placement",
-      "methodName": "placementHandler"
-    }, {
-      "propName": "referenceElement",
-      "methodName": "referenceElementHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "dismissible",
+        "methodName": "handleDismissible"
+      }, {
+        "propName": "closable",
+        "methodName": "handleClosable"
+      }, {
+        "propName": "flipPlacements",
+        "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "offsetDistance",
+        "methodName": "offsetDistanceOffsetHandler"
+      }, {
+        "propName": "offsetSkidding",
+        "methodName": "offsetSkiddingHandler"
+      }, {
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
+        "propName": "overlayPositioning",
+        "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "placement",
+        "methodName": "placementHandler"
+      }, {
+        "propName": "referenceElement",
+        "methodName": "referenceElementHandler"
+      }];
+  }
 }