@esri/calcite-components 1.4.0-next.9 → 1.4.0

package/dist/collection/components/combobox/assets/combobox/t9n/messages_lt.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Pašalinti raktažodį"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_lv.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Noņemt atslēgvārdu"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_nl.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Tag verwijderen"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_no.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Fjern tagg"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_pl.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Usuń znacznik"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_pt-BR.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Remover tag"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_pt-PT.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Remover etiqueta"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_ro.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Eliminare etichetă"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_ru.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Удалить тег"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_sk.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Odstrániť štítok"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_sl.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Odstrani oznako"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_sr.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Ukloni oznaku"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_sv.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Ta bort tagg"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_th.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "ลบแท็ก"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_tr.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Etiketi kaldır"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_uk.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Вилучити тег"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_vi.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Xóa thẻ"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_zh-CN.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "移除标签"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_zh-HK.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "移除標記"
 }

package/dist/collection/components/combobox/assets/combobox/t9n/messages_zh-TW.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "移除標記"
 }

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

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -115,12 +143,61 @@
   opacity: 1;
 }
 
+:host([scale=s]) .x-button {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+:host([scale=m]) .x-button {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+
+:host([scale=l]) .x-button {
+  inline-size: 2rem;
+  block-size: 2rem;
+}
+
+.x-button {
+  margin: 0px;
+  display: flex;
+  cursor: pointer;
+  -webkit-appearance: none;
+          appearance: none;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  border-width: 2px;
+  background-color: transparent;
+  color: var(--calcite-ui-text-3);
+  outline-color: transparent;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
+  border-radius: 50%;
+  border-color: transparent;
+  background-color: var(--calcite-ui-foreground-2);
+}
+.x-button:active, .x-button:hover {
+  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-ui-foreground-3);
+}
+.x-button:active {
+  border-style: solid;
+  border-color: var(--calcite-ui-brand);
+}
+.x-button calcite-icon {
+  color: inherit;
+}
+
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   --calcite-combobox-item-spacing-unit-l: 0.5rem;
   --calcite-combobox-item-spacing-unit-s: 0.25rem;
   --calcite-combobox-input-height: 1.5rem;
 }
+:host([scale=s]) .x-button {
+  margin-inline-end: 0.5rem;
+}
 
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
@@ -128,6 +205,9 @@
   --calcite-combobox-item-spacing-unit-s: 0.5rem;
   --calcite-combobox-input-height: 2rem;
 }
+:host([scale=m]) .x-button {
+  margin-inline-end: 0.75rem;
+}
 
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
@@ -135,6 +215,9 @@
   --calcite-combobox-item-spacing-unit-s: 0.75rem;
   --calcite-combobox-input-height: 2.75rem;
 }
+:host([scale=l]) .x-button {
+  margin-inline-end: 1rem;
+}
 
 .wrapper {
   display: flex;
@@ -268,7 +351,7 @@
 }
 
 .floating-ui-container {
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
   display: block;
   position: absolute;
   z-index: var(--calcite-floating-ui-z-index);
@@ -281,7 +364,7 @@
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
-  z-index: 1;
+  z-index: var(--calcite-app-z-index);
   border-radius: 0.25rem;
 }
 .floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim {

package/dist/collection/components/combobox/combobox.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.4.0-next.9
+ * v1.4.0
  */
 import { h, Host } from "@stencil/core";
 import { debounce } from "lodash-es";
@@ -17,8 +17,9 @@ import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
+import { XButton, CSS as XButtonCSS } from "../functional/XButton";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -44,11 +45,6 @@ export class Combobox {
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
     this.openTransitionProp = "opacity";
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -62,7 +58,7 @@ export class Combobox {
     this.onLabelClick = () => {
       this.setFocus();
     };
-    this.keydownHandler = (event) => {
+    this.keyDownHandler = (event) => {
       const { key } = event;
       switch (key) {
         case "Tab":
@@ -87,17 +83,22 @@ export class Combobox {
           break;
         case "ArrowUp":
           event.preventDefault();
-          this.shiftActiveItemIndex(-1);
+          if (this.open) {
+            this.shiftActiveItemIndex(-1);
+          }
           if (!this.comboboxInViewport()) {
             this.el.scrollIntoView();
           }
           break;
         case "ArrowDown":
           event.preventDefault();
-          if (!this.open) {
+          if (this.open) {
+            this.shiftActiveItemIndex(1);
+          }
+          else {
             this.open = true;
+            this.ensureRecentSelectedItemIsActive();
           }
-          this.shiftActiveItemIndex(1);
           if (!this.comboboxInViewport()) {
             this.el.scrollIntoView();
           }
@@ -132,6 +133,9 @@ export class Combobox {
           }
           break;
         case "Escape":
+          if (!this.clearDisabled && !this.open) {
+            this.clearValue();
+          }
           this.open = false;
           event.preventDefault();
           break;
@@ -195,14 +199,19 @@ export class Combobox {
       this.calciteComboboxChipClose.emit();
     };
     this.clickHandler = (event) => {
-      if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
+      const composedPath = event.composedPath();
+      if (composedPath.some((node) => node.tagName === "CALCITE-CHIP")) {
         this.open = false;
-        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (composedPath.some((node) => node.classList?.contains(XButtonCSS.button))) {
+        this.clearValue();
+        event.preventDefault();
         return;
       }
       this.open = !this.open;
-      this.updateActiveItemIndex(0);
-      this.setFocus();
+      this.ensureRecentSelectedItemIsActive();
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
@@ -311,6 +320,7 @@ export class Combobox {
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
     };
+    this.clearDisabled = false;
     this.open = false;
     this.disabled = false;
     this.form = undefined;
@@ -489,6 +499,23 @@ export class Combobox {
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  clearValue() {
+    this.ignoreSelectedEventsFlag = true;
+    this.items.forEach((el) => (el.selected = false));
+    this.ignoreSelectedEventsFlag = false;
+    this.selectedItems = [];
+    this.emitComboboxChange();
+    this.open = false;
+    this.updateActiveItemIndex(-1);
+    this.resetText();
+    this.filterItems("");
+    this.setFocus();
+  }
   comboboxInViewport() {
     const bounding = this.el.getBoundingClientRect();
     return (bounding.top >= 0 &&
@@ -497,6 +524,7 @@ export class Combobox {
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
   }
   onBeforeOpen() {
+    this.scrollToActiveItem();
     this.calciteComboboxBeforeOpen.emit();
   }
   onOpen() {
@@ -508,6 +536,11 @@ export class Combobox {
   onClose() {
     this.calciteComboboxClose.emit();
   }
+  ensureRecentSelectedItemIsActive() {
+    const { selectedItems } = this;
+    const targetIndex = selectedItems.length === 0 ? 0 : this.items.indexOf(selectedItems[selectedItems.length - 1]);
+    this.updateActiveItemIndex(targetIndex);
+  }
   getMaxScrollerHeight() {
     const items = this.getCombinedItems().filter((item) => !item.hidden);
     const { maxItems } = this;
@@ -768,7 +801,7 @@ export class Combobox {
   renderFloatingUIContainer() {
     const { setFloatingEl, setContainerEl, open } = this;
     const classes = {
-      "list-container": true,
+      [CSS.listContainer]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: open
     };
@@ -798,13 +831,14 @@ export class Combobox {
   render() {
     const { guid, label, open } = this;
     const single = this.selectionMode === "single";
+    const isClearable = !this.clearDisabled && this.value?.length > 0;
     return (h(Host, { onClick: this.comboboxFocusHandler }, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
         "wrapper--active": open
-      }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, role: "combobox",
+      }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setReferenceEl }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
+      ref: this.setReferenceEl }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-combobox"; }
   static get encapsulation() { return "shadow"; }
@@ -821,6 +855,24 @@ export class Combobox {
   static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
+      "clearDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the value-clearing will be disabled."
+        },
+        "attribute": "clear-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -1131,7 +1183,7 @@ export class Combobox {
         "mutable": true,
         "complexType": {
           "original": "ComboboxMessages",
-          "resolved": "{ removeTag: string; }",
+          "resolved": "{ clear: string; removeTag: string; }",
           "references": {
             "ComboboxMessages": {
               "location": "import",
@@ -1154,7 +1206,7 @@ export class Combobox {
         "mutable": true,
         "complexType": {
           "original": "Partial<ComboboxMessages>",
-          "resolved": "{ removeTag?: string; }",
+          "resolved": "{ clear?: string; removeTag?: string; }",
           "references": {
             "Partial": {
               "location": "global"

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

@@ -1,13 +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.4.0-next.9
+ * v1.4.0
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 export const CSS = {
-  labelActive: "label--active",
-  labelSelected: "label--selected",
   listContainer: "list-container"
 };

package/dist/collection/components/combobox/utils.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.4.0-next.9
+ * v1.4.0
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

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

@@ -28,6 +28,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -64,6 +84,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -79,7 +107,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/combobox-item/combobox-item.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.4.0-next.9
+ * v1.4.0
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -56,11 +56,12 @@ export class ComboboxItem {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
-  toggleSelected(coerce) {
-    if (this.disabled) {
+  toggleSelected() {
+    const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single";
+    if (this.disabled || (isSingleSelect && this.selected)) {
       return;
     }
-    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+    this.selected = !this.selected;
   }
   // --------------------------------------------------------------------------
   //

package/dist/collection/components/combobox-item/resources.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.4.0-next.9
+ * v1.4.0
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/combobox-item-group/combobox-item-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.4.0-next.9
+ * v1.4.0
  */
 import { h } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

package/dist/collection/components/combobox-item-group/resources.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.4.0-next.9
+ * v1.4.0
  */
 export const CSS = {
   list: "list",