@esri/calcite-components 1.0.0-beta.79 → 1.0.0-beta.82

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

@@ -1,16 +1,17 @@
 /*!
  * 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.82
  */
 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 children - A slot for adding nested `calcite-tree` elements.
+ * @slot children - A slot for adding nested calcite-tree elements.
  */
 export class TreeItem {
   constructor() {
@@ -19,13 +20,13 @@ export class TreeItem {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Is the item currently selected */
+    /** Selected state of the item. */
     this.selected = false;
-    /** True if the item is in an expanded state */
+    /** Expanded state of the item. */
     this.expanded = false;
-    /** @internal Is the parent of this item expanded? */
+    /** @internal Expanded state of the parent. */
     this.parentExpanded = false;
-    /** @internal What level of depth is this item at? */
+    /** @internal Level of depth of the item. */
     this.depth = -1;
     /** @internal Does this tree item have a tree inside it? */
     this.hasChildren = null;
@@ -133,7 +134,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
@@ -228,7 +229,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the item currently selected"
+        "text": "Selected state of the item."
       },
       "attribute": "selected",
       "reflect": true,
@@ -246,7 +247,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "True if the item is in an expanded state"
+        "text": "Expanded state of the item."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -265,7 +266,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Is the parent of this item expanded?"
+            "text": "Expanded state of the parent."
           }],
         "text": ""
       },
@@ -286,7 +287,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "What level of depth is this item at?"
+            "text": "Level of depth of the item."
           }],
         "text": ""
       },
@@ -328,7 +329,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Draw lines (set on parent)"
+            "text": "Draws lines (set on parent)."
           }],
         "text": ""
       },
@@ -351,9 +352,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
@@ -376,7 +377,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Scale of the parent tree, defaults to m"
+            "text": "Scale of the parent tree."
           }],
         "text": ""
       },
@@ -396,7 +397,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
+            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected."
           }],
         "text": ""
       },
@@ -421,7 +422,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Tree selection-mode (set on parent)"
+            "text": "Tree selection-mode (set on parent)."
           }],
         "text": ""
       },

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

@@ -1,6 +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.82
  */
 export const CSS = {
   container: "container",

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

@@ -1,6 +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.82
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
@@ -10,8 +11,8 @@ 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() {
@@ -21,15 +22,15 @@ export class ValueList {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     * When true, prevents user interaction. This state shows list items grayed out and with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, the items will be sortable via drag and drop.
+     * When true, list items 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 list that can be used by end users to filter list items.
      */
     this.filterEnabled = false;
     /**
@@ -37,14 +38,14 @@ export class ValueList {
      */
     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 list items at a time.
+     * When false, only a single list item can be selected at a time,
+     * and selecting a new list item will deselect any other selected list items.
      */
     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 list items via the keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -221,7 +222,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, prevents user interaction. This state shows list items grayed out and with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -239,7 +240,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the items will be sortable via drag and drop."
+        "text": "When true, list items are sortable via a draggable button."
       },
       "attribute": "drag-enabled",
       "reflect": true,
@@ -257,7 +258,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 list that can be used by end users to filter list items."
       },
       "attribute": "filter-enabled",
       "reflect": true,
@@ -275,7 +276,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
@@ -327,7 +328,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 list items at a time.\nWhen false, only a single list item can be selected at a time,\nand selecting a new list item will deselect any other selected list items."
       },
       "attribute": "multiple",
       "reflect": true,
@@ -345,7 +346,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 list items via the keyboard."
       },
       "attribute": "selection-follows-focus",
       "reflect": false,
@@ -364,7 +365,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>",
@@ -386,7 +387,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[]",

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

@@ -1,6 +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.82
  */
 export const ICONS = {
   drag: "drag"

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

@@ -1,6 +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.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -8,7 +9,7 @@ import { guid } from "../../utils/guid";
 import { CSS } from "../pick-list-item/resources";
 import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -18,11 +19,11 @@ import { updateHostInteraction } from "../../utils/interactive";
 export class ValueListItem {
   constructor() {
     /**
-     * When true, the item cannot be clicked and is visually muted
+     * When true, the list item cannot be clicked and is visually muted.
      */
     this.disabled = false;
     /**
-     * @internal When false, the item cannot be deselected by user interaction.
+     * @internal When false, the list item cannot be deselected by user interaction.
      */
     this.disableDeselect = false;
     /**
@@ -30,7 +31,7 @@ export class ValueListItem {
      */
     this.nonInteractive = false;
     /**
-     * @internal - stores the activated state of the drag handle.
+     * @internal - Stores the activated state of the drag handle.
      */
     this.handleActivated = false;
     /**
@@ -39,11 +40,11 @@ export class ValueListItem {
      */
     this.icon = null;
     /**
-     * Set this to true to display a remove action that removes the item from the list.
+     * When true, adds an action to remove the list item.
      */
     this.removable = false;
     /**
-     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     * When true, preselects the list item. Toggles when an item is checked/unchecked.
      */
     this.selected = false;
     this.pickListItem = null;
@@ -86,13 +87,13 @@ export class ValueListItem {
   //
   // --------------------------------------------------------------------------
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
    */
   async toggleSelected(coerce) {
     this.pickListItem.toggleSelected(coerce);
   }
-  /** Sets focus on the component. */
+  /** Set focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
@@ -119,7 +120,7 @@ export class ValueListItem {
   renderHandle() {
     const { icon } = this;
     if (icon === ICON_TYPES.grip) {
-      return (h("span", { "aria-pressed": this.handleActivated.toString(), class: {
+      return (h("span", { "aria-pressed": toAriaBoolean(this.handleActivated), class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" },
@@ -154,7 +155,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for this item. Will appear below the label text."
+        "text": "An optional description for the list item that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -171,7 +172,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the item cannot be clicked and is visually muted"
+        "text": "When true, the list item cannot be clicked and is visually muted."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -190,7 +191,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When false, the item cannot be deselected by user interaction."
+            "text": "When false, the list item cannot be deselected by user interaction."
           }],
         "text": ""
       },
@@ -229,7 +230,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "- stores the activated state of the drag handle."
+            "text": "- Stores the activated state of the drag handle."
           }],
         "text": ""
       },
@@ -275,7 +276,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for this item. Appears next to the icon."
+        "text": "The main label for the list item. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -296,7 +297,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
+        "text": "Provides additional metadata to a list item. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -311,7 +312,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set this to true to display a remove action that removes the item from the list."
+        "text": "When true, adds an action to remove the list item."
       },
       "attribute": "removable",
       "reflect": true,
@@ -329,7 +330,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
+        "text": "When true, preselects the list item. Toggles when an item is checked/unchecked."
       },
       "attribute": "selected",
       "reflect": true,
@@ -347,7 +348,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The item's associated value."
+        "text": "The list item's associated value."
       },
       "attribute": "value",
       "reflect": false
@@ -361,7 +362,7 @@ export class ValueListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the remove button is pressed."
+        "text": "Emits when the remove button is pressed."
       },
       "complexType": {
         "original": "void",
@@ -385,7 +386,7 @@ export class ValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+        "text": "Toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
         "tags": []
       }
     },
@@ -401,7 +402,7 @@ export class ValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Sets focus on the component.",
+        "text": "Set focus on the component.",
         "tags": []
       }
     }

package/dist/collection/utils/array.js

@@ -1,6 +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.82
  */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.js

@@ -1,6 +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.82
  */
 import { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";

package/dist/collection/utils/date.js

@@ -1,6 +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.82
  */
 /**
  * Check if date is within a min and max

package/dist/collection/utils/dom.js

@@ -1,6 +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.82
  */
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
@@ -84,7 +85,13 @@ export function queryElementRoots(element, { selector, id }) {
     }
     const rootNode = getRootNode(el);
     const found = id
-      ? rootNode.getElementById(id)
+      ? "getElementById" in rootNode
+        ? /*
+          Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
+          https://github.com/Esri/calcite-components/pull/4280
+           */
+          rootNode.getElementById(id)
+        : null
       : selector
         ? rootNode.querySelector(selector)
         : null;
@@ -169,3 +176,13 @@ export function intersects(rect1, rect2) {
     rect2.top > rect1.bottom ||
     rect2.bottom < rect1.top);
 }
+/**
+ * This helper makes sure that boolean aria attributes are properly converted to a string.
+ *
+ * It should only be used for aria attributes that require a string value of "true" or "false".
+ *
+ * @returns {string} The string conversion of a boolean value ("true" | "false").
+ */
+export function toAriaBoolean(value) {
+  return (!!value).toString();
+}

package/dist/collection/utils/filter.js

@@ -1,6 +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.82
  */
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
@@ -17,7 +18,7 @@ export const filter = (data, value) => {
     }
     let found = false;
     forIn(input, (val) => {
-      if (typeof val === "function") {
+      if (typeof val === "function" || val == null /* intentional == to catch undefined */) {
         return;
       }
       if (Array.isArray(val) || (typeof val === "object" && val !== null)) {

package/dist/collection/utils/form.js

@@ -1,6 +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.82
  */
 import { closestElementCrossShadowBoundary } from "./dom";
 import { h } from "@stencil/core";
@@ -29,6 +30,20 @@ function hasRegisteredFormComponentParent(form, formComponentEl) {
   }));
   return hasRegisteredFormComponentParent;
 }
+/**
+ * Helper to submit a form.
+ */
+export function submitForm(component) {
+  var _a;
+  (_a = component.formEl) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+}
+/**
+ * Helper to reset a form.
+ */
+export function resetForm(component) {
+  var _a;
+  (_a = component.formEl) === null || _a === void 0 ? void 0 : _a.reset();
+}
 /**
  * Helper to set up form interactions on connectedCallback.
  */
@@ -45,6 +60,7 @@ export function connectForm(component) {
   }
   const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);
   form.addEventListener("reset", boundOnFormReset);
+  onFormResetMap.set(component.el, boundOnFormReset);
   formComponentSet.add(el);
 }
 function onFormReset() {

package/dist/collection/utils/globalAttributes.js

@@ -1,6 +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.82
  */
 import { createObserver } from "./observers";
 const allowedGlobalAttributes = ["lang"];

package/dist/collection/utils/guid.js

@@ -1,6 +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.82
  */
 function gen(counts) {
   return counts

package/dist/collection/utils/interactive.js

@@ -1,6 +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.82
  */
 function noopClick() {
   /** noop **/

package/dist/collection/utils/key.js

@@ -1,6 +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.82
  */
 export function isActivationKey(key) {
   return key === "Enter" || key === " ";