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

package/dist/collection/components/dropdown/dropdown.js

@@ -1,18 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
+import { h, Host } from "@stencil/core";
+import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
+import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
-import { debounce } from "lodash-es";
 /**
  * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
@@ -47,7 +46,9 @@ export class Dropdown {
     /**
      * 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"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
@@ -79,7 +80,6 @@ export class Dropdown {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.slotChangeHandler = (event) => {
       this.defaultAssignedElements = event.target.assignedElements({
         flatten: true
@@ -96,14 +96,14 @@ export class Dropdown {
       this.triggers = event.target.assignedElements({
         flatten: true
       });
-      this.debouncedReposition();
+      this.reposition(true);
     };
     this.updateItems = () => {
       this.items = this.groups
         .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.debouncedReposition();
+      this.reposition(true);
     };
     this.updateGroups = (event) => {
       const groups = event.target
@@ -136,10 +136,10 @@ export class Dropdown {
       if (!scrollerEl) {
         return;
       }
-      this.debouncedReposition();
+      this.reposition(true);
       const maxScrollerHeight = this.getMaxScrollerHeight();
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-      this.debouncedReposition();
+      this.reposition(true);
     };
     this.setScrollerAndTransitionEl = (el) => {
       this.resizeObserver.observe(el);
@@ -205,10 +205,18 @@ export class Dropdown {
   }
   openHandler(value) {
     if (!this.disabled) {
-      this.debouncedReposition();
+      if (value) {
+        this.reposition(true);
+      }
+      else {
+        updateAfterClose(this.floatingEl);
+      }
       this.active = value;
       return;
     }
+    if (!value) {
+      updateAfterClose(this.floatingEl);
+    }
     this.open = false;
   }
   handleDisabledChange(value) {
@@ -218,16 +226,16 @@ export class Dropdown {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   placementHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   //--------------------------------------------------------------------------
   //
@@ -238,7 +246,7 @@ export class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
     if (this.open) {
       this.openHandler(this.open);
     }
@@ -248,7 +256,7 @@ export class Dropdown {
     connectOpenCloseComponent(this);
   }
   componentDidLoad() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -262,36 +270,35 @@ export class Dropdown {
   }
   render() {
     const { open, guid } = this;
-    return (h(Host, null,
-      h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
-        h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
-      h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl },
-        h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
-            ["calcite-dropdown-content"]: true,
-            [FloatingCSS.animation]: true,
-            [FloatingCSS.animationActive]: open
-          }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" },
-          h("slot", { onSlotchange: this.updateGroups })))));
+    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
+        ["calcite-dropdown-content"]: true,
+        [FloatingCSS.animation]: true,
+        [FloatingCSS.animationActive]: open
+      }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { onSlotchange: this.updateGroups })))));
   }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
       type: "menu"
-    });
+    }, delayed);
   }
   closeCalciteDropdownOnClick(event) {
-    if (!this.open || event.composedPath().includes(this.el)) {
+    if (!isPrimaryPointerButton(event) || !this.open || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
@@ -441,425 +448,448 @@ export class Dropdown {
   }
   static get is() { return "calcite-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dropdown.css"]
-  }; }
-  static get properties() { return {
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use open instead."
-          }],
-        "text": "Opens or closes the dropdown"
-      },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, opens the dropdown"
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disableCloseOnSelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "allow the dropdown to remain open after a selection is made\nif the selection-mode of the selected item's containing group is \"none\", the dropdown will always close"
-      },
-      "attribute": "disable-close-on-select",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "is the dropdown disabled"
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use open instead."
+            }],
+          "text": "Opens or closes the dropdown"
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "flipPlacements": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "EffectivePlacement[]",
-        "resolved": "Placement[]",
-        "references": {
-          "EffectivePlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
-          }
-        }
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, opens the dropdown"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the available placements that can be used when a flip occurs."
-      }
-    },
-    "maxItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "disableCloseOnSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "allow the dropdown to remain open after a selection is made\nif the selection-mode of the selected item's containing group is \"none\", the dropdown will always close"
+        },
+        "attribute": "disable-close-on-select",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "is the dropdown disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "max-items",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "overlayPositioning": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OverlayPositioning",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "OverlayPositioning": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "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": "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\"."
+      "maxItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group"
+        },
+        "attribute": "max-items",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "overlay-positioning",
-      "reflect": true,
-      "defaultValue": "\"absolute\""
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MenuPlacement",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
-        "references": {
-          "MenuPlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "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": "default",
-            "text": "\"bottom-start\""
-          }],
-        "text": "Determines where the dropdown will be positioned relative to the button."
+        },
+        "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\"` 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\""
       },
-      "attribute": "placement",
-      "reflect": true,
-      "defaultValue": "defaultMenuPlacement"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "MenuPlacement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
+          "references": {
+            "MenuPlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the scale of dropdown, defaults to m"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"bottom-start\""
+            }],
+          "text": "Determines where the dropdown will be positioned relative to the button."
+        },
+        "attribute": "placement",
+        "reflect": true,
+        "defaultValue": "defaultMenuPlacement"
       },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "selectedItems": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "HTMLCalciteDropdownItemElement[]",
-        "resolved": "HTMLCalciteDropdownItemElement[]",
-        "references": {
-          "HTMLCalciteDropdownItemElement": {
-            "location": "global"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "readonly",
-            "text": undefined
-          }],
-        "text": "**read-only** The currently selected items"
-      },
-      "defaultValue": "[]"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"hover\" | \"click\"",
-        "resolved": "\"click\" | \"hover\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify whether the dropdown is opened by hover or click of a trigger element"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the scale of dropdown, defaults to m"
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "\"click\""
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "selectedItems": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteDropdownItemElement[]",
+          "resolved": "HTMLCalciteDropdownItemElement[]",
+          "references": {
+            "HTMLCalciteDropdownItemElement": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "specify the width of dropdown"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "**read-only** The currently selected items"
+        },
+        "defaultValue": "[]"
       },
-      "attribute": "width",
-      "reflect": true
-    }
-  }; }
-  static get events() { return [{
-      "method": "calciteDropdownSelect",
-      "name": "calciteDropdownSelect",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "fires when a dropdown item has been selected or deselected"
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"hover\" | \"click\"",
+          "resolved": "\"click\" | \"hover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify whether the dropdown is opened by hover or click of a trigger element"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"click\""
       },
-      "complexType": {
-        "original": "Selection",
-        "resolved": "Selection",
-        "references": {
-          "Selection": {
-            "location": "import",
-            "path": "./interfaces"
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      }
-    }, {
-      "method": "calciteDropdownBeforeClose",
-      "name": "calciteDropdownBeforeClose",
-      "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": "calciteDropdownClose",
-      "name": "calciteDropdownClose",
-      "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": "calciteDropdownBeforeOpen",
-      "name": "calciteDropdownBeforeOpen",
-      "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": "calciteDropdownOpen",
-      "name": "calciteDropdownOpen",
-      "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": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "specify the width of dropdown"
+        },
+        "attribute": "width",
+        "reflect": true
       }
-    }]; }
-  static get methods() { return {
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteDropdownSelect",
+        "name": "calciteDropdownSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "fires when a dropdown item has been selected or deselected"
+        },
+        "complexType": {
+          "original": "Selection",
+          "resolved": "Selection",
+          "references": {
+            "Selection": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
+        }
+      }, {
+        "method": "calciteDropdownBeforeClose",
+        "name": "calciteDropdownBeforeClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is requested to be closed and before the closing transition begins."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteDropdownClose",
+        "name": "calciteDropdownClose",
+        "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": "calciteDropdownBeforeOpen",
+        "name": "calciteDropdownBeforeOpen",
+        "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": "calciteDropdownOpen",
+        "name": "calciteDropdownOpen",
+        "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"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "active",
-      "methodName": "activeHandler"
-    }, {
-      "propName": "open",
-      "methodName": "openHandler"
-    }, {
-      "propName": "disabled",
-      "methodName": "handleDisabledChange"
-    }, {
-      "propName": "flipPlacements",
-      "methodName": "flipPlacementsHandler"
-    }, {
-      "propName": "maxItems",
-      "methodName": "maxItemsHandler"
-    }, {
-      "propName": "overlayPositioning",
-      "methodName": "overlayPositioningHandler"
-    }, {
-      "propName": "placement",
-      "methodName": "placementHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "pointerdown",
-      "method": "closeCalciteDropdownOnClick",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "calciteInternalDropdownCloseRequest",
-      "method": "closeCalciteDropdownOnEvent",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "calciteDropdownOpen",
-      "method": "closeCalciteDropdownOnOpenEvent",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseenter",
-      "method": "mouseEnterHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseleave",
-      "method": "mouseLeaveHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "calciteInternalDropdownItemKeyEvent",
-      "method": "calciteInternalDropdownItemKeyEvent",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "calciteInternalDropdownItemSelect",
-      "method": "handleItemSelect",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "activeHandler"
+      }, {
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }, {
+        "propName": "flipPlacements",
+        "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "maxItems",
+        "methodName": "maxItemsHandler"
+      }, {
+        "propName": "overlayPositioning",
+        "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "placement",
+        "methodName": "placementHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "pointerdown",
+        "method": "closeCalciteDropdownOnClick",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "calciteInternalDropdownCloseRequest",
+        "method": "closeCalciteDropdownOnEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteDropdownOpen",
+        "method": "closeCalciteDropdownOnOpenEvent",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerenter",
+        "method": "mouseEnterHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "pointerleave",
+        "method": "mouseLeaveHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "calciteInternalDropdownItemKeyEvent",
+        "method": "calciteInternalDropdownItemKeyEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteInternalDropdownItemSelect",
+        "method": "handleItemSelect",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }