@esri/calcite-components 1.3.0-next.0 → 1.3.0-next.10

package/dist/collection/components/chip/chip.js

@@ -1,57 +1,68 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.0
+ * v1.3.0-next.10
  */
-import { Build, h } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
+import { toAriaBoolean } from "../../utils/dom";
+import { CSS, SLOTS, ICONS } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
-import { guid } from "../../utils/guid";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { updateHostInteraction } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
-import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
-import { CSS, ICONS, SLOTS } from "./resources";
+import { isActivationKey } from "../../utils/key";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
  */
 export class Chip {
   constructor() {
+    this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.closeClickHandler = (event) => {
-      event.preventDefault();
+    this.close = () => {
       this.calciteChipClose.emit();
+      this.selected = false;
       this.closed = true;
     };
+    this.closeButtonKeyDownHandler = (event) => {
+      if (isActivationKey(event.key)) {
+        event.preventDefault();
+        this.close();
+      }
+    };
     this.handleSlotImageChange = (event) => {
       this.hasImage = slotChangeHasAssignedElement(event);
     };
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    /** watches for changing text content */
-    this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
-    this.guid = guid();
+    this.handleEmittingEvent = () => {
+      if (this.interactive) {
+        this.calciteChipSelect.emit();
+      }
+    };
+    this.disabled = false;
     this.appearance = "solid";
     this.kind = "neutral";
     this.closable = false;
     this.icon = undefined;
     this.iconFlipRtl = false;
     this.scale = "m";
+    this.label = undefined;
     this.value = undefined;
     this.closed = false;
+    this.selectionMode = "none";
+    this.selected = false;
     this.messageOverrides = undefined;
     this.messages = undefined;
+    this.interactive = false;
     this.defaultMessages = undefined;
     this.effectiveLocale = undefined;
-    this.hasContent = false;
+    this.hasText = false;
     this.hasImage = false;
   }
   onMessagesChange() {
@@ -66,6 +77,7 @@ export class Chip {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    this.parentGroupEl = this.el.parentElement;
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
@@ -74,6 +86,9 @@ export class Chip {
   componentDidLoad() {
     setComponentLoaded(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
     disconnectLocalized(this);
@@ -83,7 +98,35 @@ export class Chip {
     setUpLoadableComponent(this);
     if (Build.isBrowser) {
       await setUpMessages(this);
-      this.updateHasContent();
+      this.updateHasText();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(event) {
+    if (event.target === this.el) {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          this.handleEmittingEvent();
+          event.preventDefault();
+          break;
+        case "ArrowRight":
+        case "ArrowLeft":
+        case "Home":
+        case "End":
+          this.calciteInternalChipKeyEvent.emit(event);
+          event.preventDefault();
+          break;
+      }
+    }
+  }
+  clickHandler() {
+    if (!this.interactive && this.closable) {
+      this.closeButtonEl.focus();
     }
   }
   //--------------------------------------------------------------------------
@@ -91,17 +134,18 @@ export class Chip {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** When `closable` is `true`, sets focus on the component's "close" button (the first focusable item). */
+  /** Sets focus on the component. */
   async setFocus() {
     await componentLoaded(this);
-    this.closeButton?.focus();
+    if (!this.disabled && this.interactive) {
+      this.containerEl?.focus();
+    }
+    else if (!this.disabled && this.closable) {
+      this.closeButtonEl?.focus();
+    }
   }
-  updateHasContent() {
-    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
-    this.hasContent =
-      this.el.childNodes.length > 0 && this.el.childNodes[0]?.nodeName === "#text"
-        ? this.el.textContent?.trim().length > 0
-        : slottedContent;
+  updateHasText() {
+    this.hasText = this.el.textContent.trim().length > 0;
   }
   setupTextContentObserver() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -112,18 +156,51 @@ export class Chip {
   //
   //--------------------------------------------------------------------------
   renderChipImage() {
-    return (h("div", { class: CSS.imageContainer, key: "image" }, h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
+    return (h("div", { class: CSS.imageContainer }, h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
   }
-  render() {
-    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: this.scale === "l" ? "m" : "s" }));
-    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.closeClickHandler,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.closeButton = el) }, h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: this.scale === "l" ? "m" : "s" })));
+  renderSelectionIcon() {
+    const icon = this.selectionMode === "multiple" && this.selected
+      ? ICONS.checked
+      : this.selectionMode === "multiple"
+        ? ICONS.unchecked
+        : this.selected
+          ? ICONS.checkedSingle
+          : undefined;
     return (h("div", { class: {
+        [CSS.selectIcon]: true,
+        [CSS.selectIconActive]: this.selectionMode === "multiple" || this.selected
+      } }, h("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" })));
+  }
+  renderCloseButton() {
+    return (h("button", { "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, tabIndex: this.disabled ? -1 : 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "l" ? "m" : "s" })));
+  }
+  renderIcon() {
+    return (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: this.scale === "l" ? "m" : "s" }));
+  }
+  render() {
+    const disableInteraction = this.disabled || (!this.disabled && !this.interactive);
+    return (h(Host, null, h("div", { "aria-checked": this.interactive ? toAriaBoolean(this.selected) : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(this.disabled) : undefined, "aria-label": this.label, "aria-labelledby": this.parentGroupEl.label, class: {
         [CSS.container]: true,
-        [CSS.contentSlotted]: this.hasContent,
-        [CSS.imageSlotted]: this.hasImage
-      } }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.closable ? closeButton : null));
+        [CSS.textSlotted]: this.hasText,
+        [CSS.imageSlotted]: this.hasImage,
+        [CSS.selectable]: this.selectionMode !== "none",
+        [CSS.multiple]: this.selectionMode === "multiple",
+        [CSS.closable]: this.closable,
+        [CSS.nonInteractive]: !this.interactive,
+        [CSS.isCircle]: !this.closable &&
+          !this.hasText &&
+          (!this.icon || !this.hasImage) &&
+          (this.selectionMode === "none" ||
+            (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected))
+      }, onClick: this.handleEmittingEvent, role: this.selectionMode === "multiple" && this.interactive
+        ? "checkbox"
+        : this.interactive
+          ? "radio"
+          : undefined, tabIndex: disableInteraction ? -1 : 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.containerEl = el) }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), h("span", { class: CSS.title }, h("slot", null)), this.closable && this.renderCloseButton())));
   }
   static get is() { return "calcite-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -140,6 +217,24 @@ export class Chip {
   static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "appearance": {
         "type": "string",
         "mutable": false,
@@ -268,6 +363,23 @@ export class Chip {
         "reflect": true,
         "defaultValue": "\"m\""
       },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
       "value": {
         "type": "any",
         "mutable": false,
@@ -303,6 +415,53 @@ export class Chip {
         "reflect": true,
         "defaultValue": "false"
       },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>",
+          "resolved": "\"multiple\" | \"none\" | \"single\" | \"single-persist\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "This internal property, managed by a containing `calcite-chip-group`, is\nconditionally set based on the `selectionMode` of the parent"
+        },
+        "attribute": "selection-mode",
+        "reflect": false,
+        "defaultValue": "\"none\""
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the component is selected."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "messageOverrides": {
         "type": "unknown",
         "mutable": true,
@@ -348,6 +507,27 @@ export class Chip {
             }],
           "text": "Made into a prop for testing purposes only"
         }
+      },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.\nThis is set to `true` by a parent Chip Group component."
+        },
+        "attribute": "interactive",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -355,7 +535,7 @@ export class Chip {
     return {
       "defaultMessages": {},
       "effectiveLocale": {},
-      "hasContent": {},
+      "hasText": {},
       "hasImage": {}
     };
   }
@@ -368,13 +548,50 @@ export class Chip {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires when the close button is clicked."
+          "text": "Fires when the component's close button is selected."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteChipSelect",
+        "name": "calciteChipSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the selected state of the component changes."
         },
         "complexType": {
           "original": "void",
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "calciteInternalChipKeyEvent",
+        "name": "calciteInternalChipKeyEvent",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KeyboardEvent",
+          "resolved": "KeyboardEvent",
+          "references": {
+            "KeyboardEvent": {
+              "location": "global"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -391,7 +608,7 @@ export class Chip {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "When `closable` is `true`, sets focus on the component's \"close\" button (the first focusable item).",
+          "text": "Sets focus on the component.",
           "tags": []
         }
       }
@@ -407,4 +624,19 @@ export class Chip {
         "methodName": "effectiveLocaleChange"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,21 +1,30 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   title: "title",
   close: "close",
   imageContainer: "image-container",
   chipIcon: "chip-icon",
-  closeIcon: "close-icon",
-  contentSlotted: "content--slotted",
+  textSlotted: "text--slotted",
   container: "container",
-  imageSlotted: "image--slotted"
+  imageSlotted: "image--slotted",
+  closable: "closable",
+  multiple: "multiple",
+  selectable: "selectable",
+  selectIcon: "select-icon",
+  selectIconActive: "select-icon--active",
+  nonInteractive: "non-interactive",
+  isCircle: "is-circle"
 };
 export const SLOTS = {
   image: "image"
 };
 export const ICONS = {
-  close: "x"
+  close: "x",
+  unchecked: "circle",
+  checkedSingle: "circle-f",
+  checked: "check-circle-f"
 };

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

@@ -0,0 +1,127 @@
+/* mixins & extensions */
+@keyframes in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes in-down {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, -5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-scale {
+  0% {
+    opacity: 0;
+    transform: scale3D(0.95, 0.95, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3D(1, 1, 1);
+  }
+}
+:root {
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
+}
+
+.calcite-animate {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
+/* helper to properly scale internal durations */
+/**
+* Currently only used in Checkbox.
+*/
+:root {
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) {
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
+:host {
+  display: flex;
+}
+
+.container {
+  display: flex;
+  inline-size: 100%;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+::slotted(calcite-chip) {
+  flex: none;
+}
+
+:host([scale=s]) .container {
+  gap: 0.25rem;
+}
+
+:host([scale=l]) .container {
+  gap: 0.75rem;
+}
+
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}