@esri/calcite-components 1.0.0-next.291 → 1.0.0-next.295

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

@@ -12,6 +12,7 @@ import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 /**
@@ -32,6 +33,12 @@ export class CalciteCombobox {
     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";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the selection mode
      * - multi: allow any number of selected items (default)
      * - single: only one selection)
@@ -40,6 +47,14 @@ export class CalciteCombobox {
     this.selectionMode = "multi";
     /** Specify the scale of the combobox, defaults to m */
     this.scale = "m";
+    /** The value(s) of the selectedItem(s) */
+    this.value = null;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
     this.selectedItems = [];
@@ -58,6 +73,18 @@ export class CalciteCombobox {
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
     this.activeTransitionProp = "opacity";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getValue = () => {
+      const items = this.selectedItems.map((item) => item === null || item === void 0 ? void 0 : item.value.toString());
+      return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
+    };
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.keydownHandler = (event) => {
       const key = getKey(event.key, getElementDir(this.el));
       switch (key) {
@@ -152,7 +179,10 @@ export class CalciteCombobox {
       }
       this.calciteComboboxChipDismiss.emit(event.detail);
     };
-    this.setFocusClick = () => {
+    this.setFocusClick = (event) => {
+      if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
+        return;
+      }
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
@@ -240,8 +270,9 @@ export class CalciteCombobox {
       }
     };
     this.comboboxFocusHandler = () => {
+      var _a;
       this.active = true;
-      this.textInput.focus();
+      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     };
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
@@ -268,6 +299,21 @@ export class CalciteCombobox {
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
+  valueHandler(value) {
+    if (!this.internalValueChangeFlag) {
+      const items = this.getItems();
+      if (Array.isArray(value)) {
+        items.forEach((item) => (item.selected = value.includes(item.value)));
+      }
+      else if (value) {
+        items.forEach((item) => (item.selected = value === item.value));
+      }
+      else {
+        items.forEach((item) => (item.selected = false));
+      }
+      this.updateItems();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -293,7 +339,7 @@ export class CalciteCombobox {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: ComboboxDefaultPlacement,
@@ -316,13 +362,20 @@ export class CalciteCombobox {
   // --------------------------------------------------------------------------
   connectedCallback() {
     var _a;
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
     connectLabel(this);
+    connectForm(this);
   }
   componentWillLoad() {
     this.updateItems();
   }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.getValue());
+  }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
       this.reposition();
@@ -334,19 +387,17 @@ export class CalciteCombobox {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
+    disconnectForm(this);
+  }
+  selectedItemsHandler() {
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
     this.updateActiveItemIndex(-1);
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  onLabelClick() {
-    this.setFocus();
-  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -394,9 +445,11 @@ export class CalciteCombobox {
   calculateSingleItemHeight(item) {
     let height = item.offsetHeight;
     // if item has children items, don't count their height twice
-    const children = item.querySelectorAll(ComboboxChildSelector);
-    children.forEach((child) => {
-      height -= child.offsetHeight;
+    const children = Array.from(item.querySelectorAll(ComboboxChildSelector));
+    children
+      .map((child) => child === null || child === void 0 ? void 0 : child.offsetHeight)
+      .forEach((offsetHeight) => {
+      height -= offsetHeight;
     });
     return height;
   }
@@ -414,16 +467,17 @@ export class CalciteCombobox {
       this.emitCalciteLookupChange();
       this.emitComboboxChange();
       this.resetText();
-      this.textInput.focus();
       this.filterItems("");
     }
     else {
       this.ignoreSelectedEventsFlag = true;
-      this.items.forEach((el) => (el.selected = el === item));
+      this.items.forEach((el) => (el.selected = el === item ? value : false));
       this.ignoreSelectedEventsFlag = false;
       this.selectedItems = this.getSelectedItems();
       this.emitComboboxChange();
-      this.textInput.value = item.textLabel;
+      if (this.textInput) {
+        this.textInput.value = item.textLabel;
+      }
       this.active = false;
       this.updateActiveItemIndex(-1);
       this.resetText();
@@ -480,7 +534,9 @@ export class CalciteCombobox {
     return this.selectionMode === "single" && this.items.some((item) => item.icon);
   }
   resetText() {
-    this.textInput.value = "";
+    if (this.textInput) {
+      this.textInput.value = "";
+    }
     this.text = "";
   }
   getItems() {
@@ -568,6 +624,7 @@ export class CalciteCombobox {
     }
   }
   updateActiveItemIndex(index) {
+    var _a;
     this.activeItemIndex = index;
     let activeDescendant = null;
     this.visibleItems.forEach((el, i) => {
@@ -582,7 +639,7 @@ export class CalciteCombobox {
     this.activeDescendant = activeDescendant;
     if (this.activeItemIndex > -1) {
       this.activeChipIndex = -1;
-      this.textInput.focus();
+      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
   isMulti() {
@@ -674,7 +731,8 @@ export class CalciteCombobox {
           this.renderInput()),
         this.renderIconEnd()),
       h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
-      this.renderPopperContainer()));
+      this.renderPopperContainer(),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-combobox"; }
   static get encapsulation() { return "shadow"; }
@@ -773,6 +831,23 @@ export class CalciteCombobox {
       "reflect": false,
       "defaultValue": "0"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the switch input"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "allowCustomValues": {
       "type": "boolean",
       "mutable": false,
@@ -813,6 +888,27 @@ export class CalciteCombobox {
       "reflect": false,
       "defaultValue": "\"absolute\""
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "selectionMode": {
       "type": "string",
       "mutable": false,
@@ -858,6 +954,24 @@ export class CalciteCombobox {
       "attribute": "scale",
       "reflect": true,
       "defaultValue": "\"m\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value(s) of the selectedItem(s)"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {
@@ -882,8 +996,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 +1071,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 +1089,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is closed"
       },
@@ -1027,6 +1141,12 @@ export class CalciteCombobox {
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"
+    }, {
+      "propName": "value",
+      "methodName": "valueHandler"
+    }, {
+      "propName": "selectedItems",
+      "methodName": "selectedItemsHandler"
     }, {
       "propName": "text",
       "methodName": "textHandler"

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

@@ -141,7 +141,9 @@ export class CalciteDatePicker {
      */
     this.reset = () => {
       var _a, _b, _c, _d, _e, _f;
-      if (this.valueAsDate && ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+      if (!Array.isArray(this.valueAsDate) &&
+        this.valueAsDate &&
+        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
         this.activeDate = new Date(this.valueAsDate);
       }
       if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
@@ -210,8 +212,10 @@ export class CalciteDatePicker {
     };
   }
   handleValueAsDate(date) {
-    this.activeDate = date;
-    this.calciteDatePickerChange.emit(date);
+    if (!Array.isArray(date) && date && date !== this.activeDate) {
+      this.activeDate = date;
+      this.calciteDatePickerChange.emit(date);
+    }
   }
   handleRangeChange() {
     const { startAsDate: startDate, endAsDate: endDate } = this;
@@ -224,7 +228,12 @@ export class CalciteDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.value) {
+    if (Array.isArray(this.value)) {
+      this.valueAsDate = this.value.map((v) => dateFromISO(v));
+      this.start = this.value[0];
+      this.end = this.value[1];
+    }
+    else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
     }
     if (this.start) {
@@ -275,8 +284,17 @@ export class CalciteDatePicker {
     const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)));
   }
-  valueWatcher(value) {
-    this.valueAsDate = dateFromISO(value);
+  valueHandler(value) {
+    if (Array.isArray(value)) {
+      this.valueAsDate = value.map((v) => dateFromISO(v));
+      this.start = value[0];
+      this.end = value[1];
+    }
+    else if (value) {
+      this.valueAsDate = dateFromISO(value);
+      this.start = "";
+      this.end = "";
+    }
   }
   startWatcher(start) {
     this.setStartAsDate(dateFromISO(start));
@@ -379,8 +397,8 @@ export class CalciteDatePicker {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string | string[]",
+        "resolved": "string | string[]",
         "references": {}
       },
       "required": false,
@@ -418,8 +436,8 @@ export class CalciteDatePicker {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Date",
-        "resolved": "Date",
+        "original": "Date | Date[]",
+        "resolved": "Date | Date[]",
         "references": {
           "Date": {
             "location": "global"
@@ -448,7 +466,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected start date as full date object"
       }
     },
@@ -467,7 +488,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected end date as full date object"
       }
     },
@@ -555,8 +579,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 +600,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)"
       },
@@ -650,7 +674,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected start date"
       },
       "attribute": "start",
@@ -667,7 +694,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected end date"
       },
       "attribute": "end",
@@ -726,8 +756,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."
       },
@@ -754,7 +784,7 @@ export class CalciteDatePicker {
       "methodName": "handleRangeChange"
     }, {
       "propName": "value",
-      "methodName": "valueWatcher"
+      "methodName": "valueHandler"
     }, {
       "propName": "start",
       "methodName": "startWatcher"

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,26 @@ 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;
     };
@@ -118,6 +131,9 @@ export class CalciteDropdown {
   activeHandler() {
     this.reposition();
   }
+  maxItemsHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -127,20 +143,17 @@ 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() {
@@ -164,13 +177,11 @@ export class CalciteDropdown {
   //--------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, menuEl, placement, scrollerEl, maxScrollerHeight } = this;
-    if (scrollerEl) {
-      scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-    }
+    const { popper, menuEl, placement } = this;
+    this.setMaxScrollerHeight();
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement,
@@ -282,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;
@@ -460,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."
       },
@@ -508,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"
       },
@@ -625,6 +637,9 @@ export class CalciteDropdown {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "maxItems",
+      "methodName": "maxItemsHandler"
     }, {
       "propName": "placement",
       "methodName": "placementHandler"