@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/collection/components/date-picker-month-header/date-picker-month-header.js

@@ -1,11 +1,12 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
 import { Heading } from "../functional/Heading";
+import { BUDDHIST_CALENDAR_YEAR_OFFSET } from "./resources";
 export class DatePickerMonthHeader {
   constructor() {
     //--------------------------------------------------------------------------
@@ -15,9 +16,11 @@ export class DatePickerMonthHeader {
     //--------------------------------------------------------------------------
     /**
      * Increment year on UP/DOWN keys
+     *
+     * @param e
      */
     this.onYearKey = (e) => {
-      const localizedYear = e.target.value;
+      const localizedYear = this.parseCalendarYear(e.target.value);
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
@@ -30,10 +33,15 @@ export class DatePickerMonthHeader {
       }
     };
     this.onYearChange = (event) => {
-      this.setYear({ localizedYear: event.target.value });
+      this.setYear({
+        localizedYear: this.parseCalendarYear(event.target.value)
+      });
     };
     this.onYearInput = (event) => {
-      this.setYear({ localizedYear: event.target.value, commit: false });
+      this.setYear({
+        localizedYear: this.parseCalendarYear(event.target.value),
+        commit: false
+      });
     };
     this.prevMonthClick = (e) => {
       this.handleArrowClick(e, this.prevMonthDate);
@@ -81,7 +89,7 @@ export class DatePickerMonthHeader {
     const activeMonth = this.activeDate.getMonth();
     const { months, unitOrder } = this.localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
-    const localizedYear = localizeNumber(this.activeDate.getFullYear(), this.localeData);
+    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear().toString());
     const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
@@ -109,6 +117,18 @@ export class DatePickerMonthHeader {
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
+  formatCalendarYear(year) {
+    const { localeData } = this;
+    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
+    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
+    return localizeNumber(parseNumber(year, localeData) + yearOffset, localeData);
+  }
+  parseCalendarYear(year) {
+    const { localeData } = this;
+    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
+    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
+    return localizeNumber(parseNumber(year, localeData) - yearOffset, localeData);
+  }
   getInRangeDate({ localizedYear, offset = 0 }) {
     const { min, max, activeDate, localeData } = this;
     const parsedYear = parseNumber(localizedYear, localeData);
@@ -125,16 +145,21 @@ export class DatePickerMonthHeader {
   /**
    * Parse localized year string from input,
    * set to active if in range
+   *
+   * @param root0
+   * @param root0.localizedYear
+   * @param root0.commit
+   * @param root0.offset
    */
   setYear({ localizedYear, commit = true, offset = 0 }) {
-    const { yearInput, activeDate, localeData } = this;
+    const { yearInput, activeDate } = this;
     const inRangeDate = this.getInRangeDate({ localizedYear, offset });
     // if you've supplied a year and it's in range, update active date
     if (inRangeDate) {
       this.calciteDatePickerSelect.emit(inRangeDate);
     }
     if (commit) {
-      yearInput.value = localizeNumber((inRangeDate || activeDate).getFullYear(), localeData);
+      yearInput.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear().toString());
     }
   }
   static get is() { return "calcite-date-picker-month-header"; }

package/dist/collection/components/date-picker-month-header/resources.js

@@ -0,0 +1,6 @@
+/*!
+ * 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.84
+ */
+export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

package/dist/collection/components/dropdown/dropdown.css

@@ -140,7 +140,8 @@
   transform: translate(0);
 }
 
-:host([active]) .calcite-dropdown-wrapper {
+:host([active]) .calcite-dropdown-wrapper,
+:host([open]) .calcite-dropdown-wrapper {
   pointer-events: initial;
   visibility: visible;
 }

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

@@ -1,10 +1,10 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, getSlotted } from "../../utils/dom";
+import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -20,8 +20,14 @@ export class Dropdown {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Opens or closes the dropdown */
+    /**
+     * Opens or closes the dropdown
+     *
+     * @deprecated use open instead.
+     */
     this.active = false;
+    /** When true, opens the dropdown */
+    this.open = false;
     /**
      allow the dropdown to remain open after a selection is made
      if the selection-mode of the selected item's containing group is "none", the dropdown will always close
@@ -32,12 +38,13 @@ export class Dropdown {
     /**
      specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
      this value does not include groupTitles passed to calcite-dropdown-group
-    */
+     */
     this.maxItems = 0;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the dropdown will be positioned relative to the button.
+     *
      * @default "bottom-leading"
      */
     this.placement = defaultMenuPlacement;
@@ -51,12 +58,11 @@ export class Dropdown {
     this.selectedItems = [];
     /** specify whether the dropdown is opened by hover or click of a trigger element */
     this.type = "click";
-    /** specify the width of dropdown, defaults to m */
-    this.width = "m";
     this.items = [];
+    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
-    this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -68,15 +74,49 @@ export class Dropdown {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    this.updateTriggers = (event) => {
+      this.triggers = event.target.assignedElements({
+        flatten: true
+      });
+      this.reposition();
+    };
     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.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
-      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };
+    this.updateGroups = (event) => {
+      const groups = event.target
+        .assignedElements({ flatten: true })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+      this.groups = groups;
+      this.updateItems();
+    };
+    this.resizeObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        const { target } = entry;
+        if (target === this.referenceEl) {
+          this.setDropdownWidth();
+        }
+        else if (target === this.scrollerEl) {
+          this.setMaxScrollerHeight();
+        }
+      });
+    };
+    this.setDropdownWidth = () => {
+      const { referenceEl, scrollerEl } = this;
+      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
+      if (!referenceElWidth || !scrollerEl) {
+        return;
+      }
+      scrollerEl.style.minWidth = `${referenceElWidth}px`;
+    };
     this.setMaxScrollerHeight = () => {
-      const { active, scrollerEl } = this;
-      if (!scrollerEl || !active) {
+      const { active, scrollerEl, open } = this;
+      const isOpen = !(active || open);
+      if (!scrollerEl || isOpen) {
         return;
       }
       this.reposition();
@@ -87,14 +127,23 @@ export class Dropdown {
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
       this.scrollerEl = scrollerEl;
+      this.scrollerEl.addEventListener("transitionrun", this.transitionRunHandler);
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.calciteDropdownOpen.emit() : this.calciteDropdownClose.emit();
+        this.open || this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      }
+    };
+    this.transitionRunHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active || this.open
+          ? this.emitOpenCloseEvent("beforeOpen")
+          : this.emitOpenCloseEvent("beforeClose");
       }
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
+      this.resizeObserver.observe(el);
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -105,7 +154,7 @@ export class Dropdown {
         return;
       }
       const key = e.key;
-      if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
+      if ((this.open || this.active) && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
       }
@@ -128,7 +177,8 @@ export class Dropdown {
     };
     this.openCalciteDropdown = () => {
       this.active = !this.active;
-      if (this.active) {
+      this.open = !this.open;
+      if (this.active || this.open) {
         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
       }
     };
@@ -139,10 +189,12 @@ export class Dropdown {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   handleDisabledChange(value) {
     if (!value) {
       this.active = false;
+      this.open = false;
     }
   }
   flipPlacementsHandler() {
@@ -163,7 +215,6 @@ export class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-    this.updateItems();
     this.setFilteredPlacements();
   }
   componentDidLoad() {
@@ -177,20 +228,23 @@ export class Dropdown {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
+    if (this.scrollerEl) {
+      this.scrollerEl.removeEventListener("transitionrun", this.transitionRunHandler);
+    }
   }
   render() {
-    const { active } = this;
+    const { active, open } = this;
     return (h(Host, null,
       h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
-        h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
-      h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
+        h("slot", { "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
+      h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
-            [PopperCSS.animationActive]: active
+            [PopperCSS.animationActive]: active || open
           }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
-          h("div", { hidden: !this.active },
-            h("slot", null))))));
+          h("div", { hidden: !(open || active) },
+            h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -211,19 +265,22 @@ export class Dropdown {
       : this.createPopper();
   }
   closeCalciteDropdownOnClick(e) {
-    if (!this.active || e.composedPath().includes(this.el)) {
+    const isOpen = !(this.open || this.active);
+    if (isOpen || e.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
   }
-  closeCalciteDropdownOnEvent() {
+  closeCalciteDropdownOnEvent(e) {
     this.closeCalciteDropdown();
+    e.stopPropagation();
   }
   closeCalciteDropdownOnOpenEvent(e) {
     if (e.composedPath().includes(this.el)) {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   mouseEnterHandler() {
     if (this.type === "hover") {
@@ -235,7 +292,7 @@ export class Dropdown {
       this.closeCalciteDropdown();
     }
   }
-  calciteDropdownItemKeyEvent(e) {
+  calciteInternalDropdownItemKeyEvent(e) {
     const { keyboardEvent } = e.detail;
     // handle edge
     const target = keyboardEvent.target;
@@ -280,6 +337,20 @@ export class Dropdown {
       event.detail.requestedDropdownGroup.selectionMode === "none") {
       this.closeCalciteDropdown();
     }
+    event.stopPropagation();
+  }
+  emitOpenCloseEvent(componentVisibilityState) {
+    const payload = {
+      el: this.el
+    };
+    const emitComponentState = {
+      beforeOpen: () => this.calciteDropdownBeforeOpen.emit(payload),
+      open: () => this.calciteDropdownOpen.emit(payload),
+      beforeClose: () => this.calciteDropdownBeforeClose.emit(payload),
+      close: () => this.calciteDropdownClose.emit(payload)
+    };
+    (emitComponentState[componentVisibilityState] ||
+      emitComponentState["The component state is unknown."])();
   }
   getModifiers() {
     const flipModifier = {
@@ -291,7 +362,7 @@ export class Dropdown {
     };
     const eventListenerModifier = {
       name: "eventListeners",
-      enabled: this.active
+      enabled: this.open || this.active
     };
     return [flipModifier, eventListenerModifier];
   }
@@ -315,16 +386,14 @@ export class Dropdown {
     this.popper = null;
   }
   updateSelectedItems() {
-    const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
-    this.selectedItems = items.filter((item) => item.active);
+    this.selectedItems = this.items.filter((item) => item.active);
   }
   getMaxScrollerHeight() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    groups.forEach((group) => {
+    this.groups.forEach((group) => {
       if (maxItems > 0 && itemsToProcess < maxItems) {
         Array.from(group.children).forEach((item, index) => {
           if (index === 0) {
@@ -344,6 +413,7 @@ export class Dropdown {
   }
   closeCalciteDropdown(focusTrigger = true) {
     this.active = false;
+    this.open = false;
     if (focusTrigger) {
       focusElement(this.triggers[0]);
     }
@@ -398,13 +468,34 @@ export class Dropdown {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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,
@@ -606,14 +697,13 @@ export class Dropdown {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "specify the width of dropdown, defaults to m"
+        "text": "specify the width of dropdown"
       },
       "attribute": "width",
-      "reflect": true,
-      "defaultValue": "\"m\""
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -624,13 +714,32 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown item has been selected or deselected *"
+        "text": "fires when a dropdown item has been selected or deselected"
       },
       "complexType": {
         "original": "void",
         "resolved": "void",
         "references": {}
       }
+    }, {
+      "method": "calciteDropdownBeforeOpen",
+      "name": "calciteDropdownBeforeOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
+      }
     }, {
       "method": "calciteDropdownOpen",
       "name": "calciteDropdownOpen",
@@ -639,12 +748,35 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown has been opened *"
+        "text": ""
       },
       "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteDropdownBeforeClose",
+      "name": "calciteDropdownBeforeClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteDropdownClose",
@@ -654,12 +786,16 @@ export class Dropdown {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fires when a dropdown has been closed *"
+        "text": ""
       },
       "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        "original": "{ el: HTMLCalciteDropdownElement }",
+        "resolved": "{ el: HTMLCalciteDropdownElement; }",
+        "references": {
+          "HTMLCalciteDropdownElement": {
+            "location": "global"
+          }
+        }
       }
     }]; }
   static get methods() { return {
@@ -684,6 +820,9 @@ export class Dropdown {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "activeHandler"
     }, {
       "propName": "disabled",
       "methodName": "handleDisabledChange"
@@ -704,7 +843,7 @@ export class Dropdown {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteDropdownCloseRequest",
+      "name": "calciteInternalDropdownCloseRequest",
       "method": "closeCalciteDropdownOnEvent",
       "target": undefined,
       "capture": false,
@@ -728,13 +867,13 @@ export class Dropdown {
       "capture": false,
       "passive": true
     }, {
-      "name": "calciteDropdownItemKeyEvent",
-      "method": "calciteDropdownItemKeyEvent",
+      "name": "calciteInternalDropdownItemKeyEvent",
+      "method": "calciteInternalDropdownItemKeyEvent",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteDropdownItemSelect",
+      "name": "calciteInternalDropdownItemSelect",
       "method": "handleItemSelect",
       "target": undefined,
       "capture": false,

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

@@ -1,6 +1,6 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 export {};

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

@@ -1,8 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };
+export const CSS = {
+  calciteDropdownContent: "calcite-dropdown-content"
+};

package/dist/collection/components/dropdown-group/dropdown-group.css

@@ -82,6 +82,10 @@
   display: block;
 }
 
+.container {
+  text-align: start;
+}
+
 .container--s {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;

package/dist/collection/components/dropdown-group/dropdown-group.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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
@@ -11,8 +11,10 @@ import { CSS } from "./resources";
  */
 export class DropdownGroup {
   constructor() {
-    /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
-     none (no active items), defaults to single */
+    /**
+      specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
+     none (no active items), defaults to single
+     */
     this.selectionMode = "single";
   }
   //--------------------------------------------------------------------------
@@ -46,7 +48,7 @@ export class DropdownGroup {
   updateActiveItemOnChange(event) {
     this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
     this.requestedDropdownItem = event.detail.requestedDropdownItem;
-    this.calciteDropdownItemChange.emit({
+    this.calciteInternalDropdownItemChange.emit({
       requestedDropdownGroup: this.requestedDropdownGroup,
       requestedDropdownItem: this.requestedDropdownItem
     });
@@ -132,8 +134,8 @@ export class DropdownGroup {
     }
   }; }
   static get events() { return [{
-      "method": "calciteDropdownItemChange",
-      "name": "calciteDropdownItemChange",
+      "method": "calciteInternalDropdownItemChange",
+      "name": "calciteInternalDropdownItemChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -152,7 +154,7 @@ export class DropdownGroup {
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "calciteDropdownItemSelect",
+      "name": "calciteInternalDropdownItemSelect",
       "method": "updateActiveItemOnChange",
       "target": undefined,
       "capture": false,