@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/collection/components/tree-item/tree-item.js

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
-import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
+import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding content to the item.
+ * @slot - A slot for adding the component's content.
  * @slot children - A slot for adding nested `calcite-tree` elements.
  */
 export class TreeItem {
@@ -20,15 +20,21 @@ export class TreeItem {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Is the item currently selected */
+    /** When true, the component is selected. */
     this.selected = false;
-    /** True if the item is in an expanded state */
+    /** When true, the component is expanded. */
     this.expanded = false;
-    /** @internal Is the parent of this item expanded? */
+    /**
+     * @internal
+     */
     this.parentExpanded = false;
-    /** @internal What level of depth is this item at? */
+    /**
+     * @internal
+     */
     this.depth = -1;
-    /** @internal Does this tree item have a tree inside it? */
+    /**
+     * @internal
+     */
     this.hasChildren = null;
     this.iconClickHandler = (event) => {
       event.stopPropagation();
@@ -134,7 +140,7 @@ export class TreeItem {
         [CSS_UTILITY.rtl]: rtl
       }, icon: selectedIcon, scale: "s" })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
-    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
+    return (h(Host, { "aria-expanded": this.hasChildren ? toAriaBoolean(this.expanded) : undefined, "aria-hidden": toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
       h("div", { class: {
           [CSS.nodeContainer]: true,
           [CSS_UTILITY.rtl]: rtl
@@ -161,7 +167,7 @@ export class TreeItem {
       const target = link.target === "" ? "_self" : link.target;
       window.open(link.href, target);
     }
-    this.calciteTreeItemSelect.emit({
+    this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
       forceToggle: false
     });
@@ -170,7 +176,7 @@ export class TreeItem {
     let root;
     switch (e.key) {
       case " ":
-        this.calciteTreeItemSelect.emit({
+        this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
@@ -184,7 +190,7 @@ export class TreeItem {
           this.selected = true;
         }
         else {
-          this.calciteTreeItemSelect.emit({
+          this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false
           });
@@ -194,7 +200,7 @@ export class TreeItem {
       case "Home":
         root = this.el.closest("calcite-tree:not([child])");
         const firstNode = root.querySelector("calcite-tree-item");
-        firstNode.focus();
+        firstNode === null || firstNode === void 0 ? void 0 : firstNode.focus();
         break;
       case "End":
         root = this.el.closest("calcite-tree:not([child])");
@@ -204,7 +210,7 @@ export class TreeItem {
           currentNode = currentTree.children[root.children.length - 1];
           currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
         }
-        currentNode.focus();
+        currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
         break;
     }
   }
@@ -229,7 +235,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the item currently selected"
+        "text": "When true, the component is selected."
       },
       "attribute": "selected",
       "reflect": true,
@@ -247,7 +253,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "True if the item is in an expanded state"
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -266,7 +272,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Is the parent of this item expanded?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -287,7 +293,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "What level of depth is this item at?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -308,7 +314,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Does this tree item have a tree inside it?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -329,7 +335,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Draw lines (set on parent)"
+            "text": undefined
           }],
         "text": ""
       },
@@ -352,9 +358,9 @@ export class TreeItem {
             "text": undefined
           }, {
             "name": "deprecated",
-            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes"
+            "text": "Use \"ancestors\" selection-mode on parent for checkbox input."
           }],
-        "text": "Display checkboxes (set on parent)"
+        "text": "Displays checkboxes (set on parent)."
       },
       "attribute": "input-enabled",
       "reflect": false
@@ -377,7 +383,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Scale of the parent tree, defaults to m"
+            "text": undefined
           }],
         "text": ""
       },
@@ -397,9 +403,9 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
+            "text": undefined
           }],
-        "text": ""
+        "text": "In ancestor selection mode, show as indeterminate when only some children are selected."
       },
       "attribute": "indeterminate",
       "reflect": true
@@ -422,7 +428,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Tree selection-mode (set on parent)"
+            "text": undefined
           }],
         "text": ""
       },
@@ -431,8 +437,8 @@ export class TreeItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteTreeItemSelect",
-      "name": "calciteTreeItemSelect",
+      "method": "calciteInternalTreeItemSelect",
+      "name": "calciteInternalTreeItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/value-list/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.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/value-list/value-list.js

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
+import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
- * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
+ * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
+ * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
 export class ValueList {
   constructor() {
@@ -22,30 +22,30 @@ export class ValueList {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, the items will be sortable via drag and drop.
+     * When true, `calcite-value-list-item`s are sortable via a draggable button.
      */
     this.dragEnabled = false;
     /**
-     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     * When true, an input appears at the top of the component that can be used by end users to filter list items.
      */
     this.filterEnabled = false;
     /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
     /**
-     * Multiple Works similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple items at a time.
-     * When false, only a single item can be selected at a time
-     * and selecting a new item will deselect any other selected items.
+     * Similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple `calcite-value-list-item`s at a time.
+     * When false, only a single `calcite-value-list-item` can be selected at a time,
+     * and a new selection will deselect previous selections.
      */
     this.multiple = false;
     /**
-     * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+     * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -96,7 +96,7 @@ export class ValueList {
       }
       this.items = this.getItems();
       this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handleElement.focus());
+      requestAnimationFrame(() => handleElement === null || handleElement === void 0 ? void 0 : handleElement.focus());
       item.handleActivated = true;
     };
   }
@@ -128,12 +128,13 @@ export class ValueList {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   // --------------------------------------------------------------------------
   //
@@ -182,7 +183,11 @@ export class ValueList {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -222,7 +227,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -240,7 +245,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the items will be sortable via drag and drop."
+        "text": "When true, `calcite-value-list-item`s are sortable via a draggable button."
       },
       "attribute": "drag-enabled",
       "reflect": true,
@@ -258,7 +263,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
+        "text": "When true, an input appears at the top of the component that can be used by end users to filter list items."
       },
       "attribute": "filter-enabled",
       "reflect": true,
@@ -276,7 +281,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Placeholder text for the filter input field."
+        "text": "Placeholder text for the filter's input field."
       },
       "attribute": "filter-placeholder",
       "reflect": true
@@ -293,7 +298,7 @@ export class ValueList {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        "text": "The component's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
       },
       "attribute": "group",
       "reflect": false
@@ -310,7 +315,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+        "text": "When true, a busy indicator is displayed."
       },
       "attribute": "loading",
       "reflect": true,
@@ -328,7 +333,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Multiple Works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items."
+        "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-value-list-item`s at a time.\nWhen false, only a single `calcite-value-list-item` can be selected at a time,\nand a new selection will deselect previous selections."
       },
       "attribute": "multiple",
       "reflect": true,
@@ -346,7 +351,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true and single-selection is enabled, the selection will change when navigating items via the keyboard."
+        "text": "When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard."
       },
       "attribute": "selection-follows-focus",
       "reflect": false,
@@ -365,7 +370,7 @@ export class ValueList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when any of the item selections have changed."
+        "text": "Emits when any of the list item selections have changed."
       },
       "complexType": {
         "original": "Map<string, HTMLCalciteValueListItemElement>",
@@ -387,7 +392,7 @@ export class ValueList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the order of the list has changed."
+        "text": "Emits when the order of the list has changed."
       },
       "complexType": {
         "original": "any[]",
@@ -422,7 +427,10 @@ export class ValueList {
       "complexType": {
         "signature": "(focusId?: ListFocusId) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -438,7 +446,10 @@ export class ValueList {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }
@@ -462,14 +473,14 @@ export class ValueList {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemPropsChange",
-      "method": "calciteListItemPropsChangeHandler",
+      "name": "calciteInternalListItemPropsChange",
+      "method": "calciteInternalListItemPropsChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemValueChange",
-      "method": "calciteListItemValueChangeHandler",
+      "name": "calciteInternalListItemValueChange",
+      "method": "calciteInternalListItemValueChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/value-list-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.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const ICONS = {
   drag: "drag"

package/dist/collection/components/value-list-item/value-list-item.css

@@ -103,7 +103,8 @@ calcite-pick-list-item {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host([active]), :host([selected]) {
+:host([active]), 
+:host([selected]) {
   --tw-shadow: 0 0 0 1px var(--calcite-ui-brand);
   --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -122,9 +123,7 @@ calcite-pick-list-item {
   padding-right: 0.25rem;
   color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);