npm - @esri/calcite-components - Versions diffs - 1.3.0-next.9 → 1.3.0 - Mend

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

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 (1094) hide show

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

@@ -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.9
+ * v1.3.0
  */
-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 CHANGED Viewed

@@ -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.9
+ * v1.3.0
  */
 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 ADDED Viewed

@@ -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;
+}