@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

package/dist/collection/components/calcite-color-picker/calcite-color-picker.js

@@ -850,8 +850,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Internal prop for advanced use-cases."
       },
@@ -874,8 +874,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"auto\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"auto\""
           }],
         "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
       },
@@ -949,8 +949,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"B\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"B\""
           }],
         "text": "Label used for the blue channel"
       },
@@ -970,8 +970,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Blue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Blue\""
           }],
         "text": "Label used for the blue channel description"
       },
@@ -991,8 +991,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Delete color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Delete color\""
           }],
         "text": "Label used for the delete color button."
       },
@@ -1012,8 +1012,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"G\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"G\""
           }],
         "text": "Label used for the green channel"
       },
@@ -1033,8 +1033,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Green\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Green\""
           }],
         "text": "Label used for the green channel description"
       },
@@ -1054,8 +1054,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"H\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"H\""
           }],
         "text": "Label used for the hue channel"
       },
@@ -1075,8 +1075,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"HSV\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"HSV\""
           }],
         "text": "Label used for the HSV mode"
       },
@@ -1096,8 +1096,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input"
       },
@@ -1117,8 +1117,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hue\""
           }],
         "text": "Label used for the hue channel description"
       },
@@ -1138,8 +1138,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },
@@ -1159,8 +1159,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"R\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"R\""
           }],
         "text": "Label used for the red channel"
       },
@@ -1180,8 +1180,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Red\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Red\""
           }],
         "text": "Label used for the red channel description"
       },
@@ -1201,8 +1201,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"RGB\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"RGB\""
           }],
         "text": "Label used for the RGB mode"
       },
@@ -1222,8 +1222,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"S\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"S\""
           }],
         "text": "Label used for the saturation channel"
       },
@@ -1243,8 +1243,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saturation\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saturation\""
           }],
         "text": "Label used for the saturation channel description"
       },
@@ -1264,8 +1264,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save color\""
           }],
         "text": "Label used for the save color button."
       },
@@ -1285,8 +1285,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saved\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saved\""
           }],
         "text": "Label used for the saved colors section"
       },
@@ -1306,8 +1306,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"V\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"V\""
           }],
         "text": "Label used for the value channel"
       },
@@ -1327,8 +1327,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Value\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Value\""
           }],
         "text": "Label used for the"
       },
@@ -1393,11 +1393,11 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"#007ac2\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"#007ac2\""
           }, {
-            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)",
-            "name": "see"
+            "name": "see",
+            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)"
           }],
         "text": "The color value.\n\nThis value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
       },

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

@@ -229,8 +229,8 @@ export class CalciteColorPickerHexInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input."
       },
@@ -250,8 +250,8 @@ export class CalciteColorPickerHexInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.js

@@ -82,8 +82,8 @@ export class CalciteColorPickerSwatch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value",
-            "name": "see"
+            "name": "see",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"
           }],
         "text": "The color value."
       },

package/dist/collection/components/calcite-combobox/calcite-combobox.css

@@ -154,6 +154,9 @@
   flex-wrap: wrap;
   align-items: center;
   padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .input {

package/dist/collection/components/calcite-combobox/calcite-combobox.js

@@ -58,14 +58,6 @@ export class CalciteCombobox {
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
     this.activeTransitionProp = "opacity";
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.keydownHandler = (event) => {
       const key = getKey(event.key, getElementDir(this.el));
       switch (key) {
@@ -301,7 +293,7 @@ export class CalciteCombobox {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: ComboboxDefaultPlacement,
@@ -347,6 +339,14 @@ export class CalciteCombobox {
   textHandler() {
     this.updateActiveItemIndex(-1);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -882,8 +882,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteComboboxChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calciteComboboxChange instead"
           }],
         "text": "Called when the selected items set changes"
       },
@@ -957,8 +957,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is opened"
       },
@@ -975,8 +975,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is closed"
       },

package/dist/collection/components/calcite-date-picker/calcite-date-picker.js

@@ -555,8 +555,8 @@ export class CalciteDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Previous month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous month\""
           }],
         "text": "Localized string for \"previous month\" (used for aria label)"
       },
@@ -576,8 +576,8 @@ export class CalciteDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Next month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next month\""
           }],
         "text": "Localized string for \"next month\" (used for aria label)"
       },
@@ -726,8 +726,8 @@ export class CalciteDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.js

@@ -336,8 +336,8 @@ export class CalciteDatePickerDay {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when user hovers over a day"
       },

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

@@ -434,8 +434,8 @@ export class CalciteDatePickerMonth {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "CLDR locale data for current locale"
       }
@@ -484,8 +484,8 @@ export class CalciteDatePickerMonth {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Event emitted when user hovers the date."
       },
@@ -517,8 +517,8 @@ export class CalciteDatePickerMonth {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -8,6 +8,7 @@ import { focusElement, getElementDir } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
 import { DefaultDropdownPlacement, SLOTS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+import { createObserver } from "../../utils/observers";
 /**
  * @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.
@@ -58,14 +59,29 @@ export class CalciteDropdown {
     //
     //--------------------------------------------------------------------------
     this.items = [];
-    /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
-    this.maxScrollerHeight = 0;
     this.activeTransitionProp = "opacity";
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.updateItems = () => {
+      this.updateSelectedItems();
+      this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
+      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
+      this.reposition();
+    };
+    this.setMaxScrollerHeight = () => {
+      const { scrollerEl } = this;
+      if (scrollerEl) {
+        const maxScrollerHeight = this.getMaxScrollerHeight();
+        scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      }
+    };
+    this.setScrollerEl = (scrollerEl) => {
+      this.scrollerEl = scrollerEl;
+    };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active ? this.calciteDropdownOpen.emit() : this.calciteDropdownClose.emit();
@@ -115,6 +131,9 @@ export class CalciteDropdown {
   activeHandler() {
     this.reposition();
   }
+  maxItemsHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -124,24 +143,21 @@ export class CalciteDropdown {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-  }
-  componentWillLoad() {
-    // get initially selected items
-    this.updateSelectedItems();
+    this.updateItems();
   }
   componentDidLoad() {
-    this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
-    this.maxScrollerHeight = this.getMaxScrollerHeight(groups);
-    this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
     this.reposition();
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
   }
   render() {
-    const { active, maxScrollerHeight } = this;
+    const { active } = this;
     const dir = getElementDir(this.el);
     return (h(Host, { tabIndex: this.disabled ? -1 : null },
       h("div", { class: { ["calcite-dropdown-trigger-container"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
@@ -151,9 +167,7 @@ export class CalciteDropdown {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
             [PopperCSS.animationActive]: active
-          }, onTransitionEnd: this.transitionEnd, style: {
-            maxHeight: !active || maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
-          } },
+          }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
           h("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -164,9 +178,10 @@ export class CalciteDropdown {
   /** Updates the position of the component. */
   async reposition() {
     const { popper, menuEl, placement } = this;
+    this.setMaxScrollerHeight();
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement,
@@ -278,7 +293,8 @@ export class CalciteDropdown {
     const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
     this.selectedItems = items.filter((item) => item.active);
   }
-  getMaxScrollerHeight(groups) {
+  getMaxScrollerHeight() {
+    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
@@ -456,8 +472,8 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"bottom-leading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"bottom-leading\""
           }],
         "text": "Determines where the dropdown will be positioned relative to the button."
       },
@@ -504,8 +520,8 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "**read-only** The currently selected items"
       },
@@ -621,6 +637,9 @@ export class CalciteDropdown {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "maxItems",
+      "methodName": "maxItemsHandler"
     }, {
       "propName": "placement",
       "methodName": "placementHandler"

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.js

@@ -139,8 +139,8 @@ export class CalciteDropdownGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },