npm - @esri/calcite-components - Versions diffs - 1.0.0-next.548 → 1.0.0-next.550 - Mend

@esri/calcite-components 1.0.0-next.548 → 1.0.0-next.550

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (842) hide show

package/dist/collection/components/color-picker/color-picker.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -1516,7 +1516,7 @@ export class ColorPicker {
       "method": "calciteColorPickerChange",
       "name": "calciteColorPickerChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1531,7 +1531,7 @@ export class ColorPicker {
       "method": "calciteColorPickerInput",
       "name": "calciteColorPickerInput",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/color-picker/interfaces.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export {};

package/dist/collection/components/color-picker/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-picker/utils.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -317,7 +317,7 @@ export class ColorPickerHexInput {
       "method": "calciteColorPickerHexInputChange",
       "name": "calciteColorPickerHexInputChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/color-picker-hex-input/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
@@ -15,6 +15,7 @@ import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInp
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
+import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -89,7 +90,7 @@ export class Combobox {
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -208,16 +209,6 @@ export class Combobox {
       this.open = false;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
     this.setMaxScrollerHeight = async () => {
       const { listContainerEl, open, referenceEl } = this;
       if (!listContainerEl || !open) {
@@ -267,10 +258,11 @@ export class Combobox {
       this.floatingEl = el;
       connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
-    this.setListContainerEl = (el) => {
+    this.setContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
-      this.listContainerEl.addEventListener("transitionstart", this.transitionStartHandler);
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -452,6 +444,7 @@ export class Combobox {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     connectLabel(this);
     connectForm(this);
+    connectOpenCloseComponent(this);
     this.reposition();
     this.setFilteredPlacements();
     if (this.active) {
@@ -476,13 +469,13 @@ export class Combobox {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    (_c = this.listContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;
@@ -773,7 +766,7 @@ export class Combobox {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderFloatingUIContainer() {
-    const { active, setFloatingEl, setListContainerEl, open } = this;
+    const { active, setFloatingEl, setContainerEl, open } = this;
     const classes = {
       "list-container": true,
       [FloatingCSS.animation]: true,
@@ -783,7 +776,7 @@ export class Combobox {
         "floating-ui-container": true,
         "floating-ui-container--active": open || active
       }, ref: setFloatingEl },
-      h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl },
+      h("div", { class: classes, ref: setContainerEl },
         h("ul", { class: { list: true, "list--hide": !(open || active) } },
           h("slot", null)))));
   }
@@ -1154,7 +1147,7 @@ export class Combobox {
       "method": "calciteLookupChange",
       "name": "calciteLookupChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -1176,14 +1169,14 @@ export class Combobox {
       "method": "calciteComboboxChange",
       "name": "calciteComboboxChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
         "text": "Called when the selected item(s) changes."
       },
       "complexType": {
-        "original": "{ selectedItems: HTMLCalciteComboboxItemElement[] }",
+        "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
         "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
         "references": {
           "HTMLCalciteComboboxItemElement": {
@@ -1195,7 +1188,7 @@ export class Combobox {
       "method": "calciteComboboxFilterChange",
       "name": "calciteComboboxFilterChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1214,7 +1207,7 @@ export class Combobox {
       "method": "calciteComboboxChipDismiss",
       "name": "calciteComboboxChipDismiss",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1234,7 +1227,7 @@ export class Combobox {
       "method": "calciteComboboxBeforeClose",
       "name": "calciteComboboxBeforeClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1249,7 +1242,7 @@ export class Combobox {
       "method": "calciteComboboxClose",
       "name": "calciteComboboxClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1264,7 +1257,7 @@ export class Combobox {
       "method": "calciteComboboxBeforeOpen",
       "name": "calciteComboboxBeforeOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1279,7 +1272,7 @@ export class Combobox {
       "method": "calciteComboboxOpen",
       "name": "calciteComboboxOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/combobox/interfaces.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export {};

package/dist/collection/components/combobox/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/utils.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -317,7 +317,7 @@ export class ComboboxItem {
       "method": "calciteComboboxItemChange",
       "name": "calciteComboboxItemChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/combobox-item/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-group/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/date-picker.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
@@ -795,7 +795,7 @@ export class DatePicker {
       "method": "calciteDatePickerChange",
       "name": "calciteDatePickerChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -814,7 +814,7 @@ export class DatePicker {
       "method": "calciteDatePickerRangeChange",
       "name": "calciteDatePickerRangeChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{

package/dist/collection/components/date-picker/interfaces.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export {};

package/dist/collection/components/date-picker/resources.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

package/dist/collection/components/date-picker/utils.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";

package/dist/collection/components/date-picker-day/date-picker-day.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -322,7 +322,7 @@ export class DatePickerDay {
       "method": "calciteDaySelect",
       "name": "calciteDaySelect",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -337,7 +337,7 @@ export class DatePickerDay {
       "method": "calciteInternalDayHover",
       "name": "calciteInternalDayHover",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{

package/dist/collection/components/date-picker-month/date-picker-month.js CHANGED Viewed

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
@@ -491,7 +491,7 @@ export class DatePickerMonth {
       "method": "calciteDatePickerSelect",
       "name": "calciteDatePickerSelect",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -510,7 +510,7 @@ export class DatePickerMonth {
       "method": "calciteInternalDatePickerHover",
       "name": "calciteInternalDatePickerHover",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -532,7 +532,7 @@ export class DatePickerMonth {
       "method": "calciteDatePickerActiveDateChange",
       "name": "calciteDatePickerActiveDateChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -551,7 +551,7 @@ export class DatePickerMonth {
       "method": "calciteInternalDatePickerMouseOut",
       "name": "calciteInternalDatePickerMouseOut",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{

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

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
@@ -388,7 +388,7 @@ export class DatePickerMonthHeader {
       "method": "calciteDatePickerSelect",
       "name": "calciteDatePickerSelect",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

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

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

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

@@ -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-next.548
+ * v1.0.0-next.550
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -9,10 +9,11 @@ import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingU
 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";
 /**
- * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
- * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
+ * @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`.
  */
 export class Dropdown {
   constructor() {
@@ -61,9 +62,9 @@ export class Dropdown {
     this.type = "click";
     this.items = [];
     this.groups = [];
-    this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.openTransitionProp = "visibility";
     this.guid = `calcite-dropdown-${guid()}`;
     this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------
@@ -132,20 +133,11 @@ export class Dropdown {
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
       this.reposition();
     };
-    this.setScrollerEl = (scrollerEl) => {
-      this.resizeObserver.observe(scrollerEl);
-      this.scrollerEl = scrollerEl;
-      this.scrollerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
+    this.setScrollerAndTransitionEl = (el) => {
+      this.resizeObserver.observe(el);
+      this.scrollerEl = el;
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -234,6 +226,7 @@ export class Dropdown {
     if (this.active) {
       this.activeHandler(this.active);
     }
+    connectOpenCloseComponent(this);
   }
   componentDidLoad() {
     this.reposition();
@@ -242,11 +235,11 @@ export class Dropdown {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   render() {
     const { open, guid } = this;
@@ -258,7 +251,7 @@ export class Dropdown {
             ["calcite-dropdown-content"]: true,
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: open
-          }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" },
+          }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" },
           h("div", { hidden: !open },
             h("slot", { onSlotchange: this.updateGroups }))))));
   }
@@ -689,7 +682,7 @@ export class Dropdown {
       "method": "calciteDropdownSelect",
       "name": "calciteDropdownSelect",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -709,7 +702,7 @@ export class Dropdown {
       "method": "calciteDropdownBeforeClose",
       "name": "calciteDropdownBeforeClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -724,7 +717,7 @@ export class Dropdown {
       "method": "calciteDropdownClose",
       "name": "calciteDropdownClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -739,7 +732,7 @@ export class Dropdown {
       "method": "calciteDropdownBeforeOpen",
       "name": "calciteDropdownBeforeOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -754,7 +747,7 @@ export class Dropdown {
       "method": "calciteDropdownOpen",
       "name": "calciteDropdownOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

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

@@ -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-next.548
+ * v1.0.0-next.550
  */
 export {};