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

package/dist/collection/components/value-list-item/value-list-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.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -9,42 +9,43 @@ 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";
 /**
- * @slot actions-end - A slot for adding actions or content to the end side of the item.
- * @slot actions-start - A slot for adding actions or content to the start side of the item.
+ * @slot actions-end - A slot for adding actions or content to the end side of the component.
+ * @slot actions-start - A slot for adding actions or content to the start side of the component.
  */
 export class ValueListItem {
   constructor() {
     /**
-     * When true, the item cannot be clicked and is visually muted
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * @internal When false, the item cannot be deselected by user interaction.
+     * @internal
      */
     this.disableDeselect = false;
     /**
-     * When true, prevents the content of the list item from user interaction.
+     * When true, prevents the content of the component from user interaction.
      */
     this.nonInteractive = false;
     /**
-     * @internal - stores the activated state of the drag handle.
+     * @internal
      */
     this.handleActivated = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     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 component.
      */
     this.removable = false;
     /**
-     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     * When true, the component is selected.
      */
     this.selected = false;
     this.pickListItem = null;
@@ -87,13 +88,15 @@ 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.
+   *
+   * @param coerce
    */
   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();
@@ -120,7 +123,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" },
@@ -155,7 +158,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for this item. Will appear below the label text."
+        "text": "A description for the component that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -172,7 +175,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the item cannot be clicked and is visually muted"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -191,7 +194,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When false, the item cannot be deselected by user interaction."
+            "text": undefined
           }],
         "text": ""
       },
@@ -211,7 +214,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents the content of the list item from user interaction."
+        "text": "When true, prevents the content of the component from user interaction."
       },
       "attribute": "non-interactive",
       "reflect": true,
@@ -230,7 +233,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "- stores the activated state of the drag handle."
+            "text": undefined
           }],
         "text": ""
       },
@@ -276,7 +279,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for this item. Appears next to the icon."
+        "text": "Label and accessible name for the component. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -297,7 +300,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 the component. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -312,7 +315,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 component."
       },
       "attribute": "removable",
       "reflect": true,
@@ -330,7 +333,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, the component is selected."
       },
       "attribute": "selected",
       "reflect": true,
@@ -348,7 +351,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The item's associated value."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -362,7 +365,7 @@ export class ValueListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the remove button is pressed."
+        "text": "Fires when the remove button is pressed."
       },
       "complexType": {
         "original": "void",
@@ -375,7 +378,10 @@ export class ValueListItem {
       "complexType": {
         "signature": "(coerce?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "coerce"
+              }],
             "text": ""
           }],
         "references": {
@@ -386,8 +392,11 @@ 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.",
-        "tags": []
+        "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": [{
+            "name": "param",
+            "text": "coerce"
+          }]
       }
     },
     "setFocus": {
@@ -402,7 +411,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,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 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.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
  */
 import { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";
@@ -10,6 +10,8 @@ let mutationObserver;
 const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
+ *
+ * @param component
  */
 export function connectConditionalSlotComponent(component) {
   if (!mutationObserver) {
@@ -19,6 +21,8 @@ export function connectConditionalSlotComponent(component) {
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
+ *
+ * @param component
  */
 export function disconnectConditionalSlotComponent(component) {
   observed.delete(component.el);

package/dist/collection/utils/date.js

@@ -1,10 +1,14 @@
 /*!
  * 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
  */
 /**
  * Check if date is within a min and max
+ *
+ * @param date
+ * @param min
+ * @param max
  */
 export function inRange(date, min, max) {
   const time = date.getTime();
@@ -15,6 +19,10 @@ export function inRange(date, min, max) {
 /**
  * Ensures date is within range,
  * returns min or max if out of bounds
+ *
+ * @param date
+ * @param min
+ * @param max
  */
 export function dateFromRange(date, min, max) {
   if (!(date instanceof Date)) {
@@ -34,6 +42,8 @@ export function dateFromRange(date, min, max) {
 /**
  * Parse an iso8601 string (YYYY-mm-dd) into a valid date.
  * TODO: handle time when time of day UI is added
+ *
+ * @param iso8601
  */
 export function dateFromISO(iso8601) {
   if (iso8601 instanceof Date) {
@@ -52,6 +62,8 @@ export function dateFromISO(iso8601) {
 }
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
+ *
+ * @param date
  */
 export function dateToISO(date) {
   if (typeof date === "string") {
@@ -64,6 +76,9 @@ export function dateToISO(date) {
 }
 /**
  * Check if two dates are the same day, month, year
+ *
+ * @param d1
+ * @param d2
  */
 export function sameDate(d1, d2) {
   return (d1 instanceof Date &&
@@ -74,6 +89,8 @@ export function sameDate(d1, d2) {
 }
 /**
  * Get a date one month in the past
+ *
+ * @param date
  */
 export function prevMonth(date) {
   const month = date.getMonth();
@@ -87,6 +104,8 @@ export function prevMonth(date) {
 }
 /**
  * Get a date one month in the future
+ *
+ * @param date
  */
 export function nextMonth(date) {
   const month = date.getMonth();
@@ -100,6 +119,9 @@ export function nextMonth(date) {
 }
 /**
  * Translate a number into a given locals numeral system
+ *
+ * @param num
+ * @param localeData
  */
 export function localizeNumber(num, localeData) {
   return String(num)
@@ -109,6 +131,9 @@ export function localizeNumber(num, localeData) {
 }
 /**
  * Calculate actual number from localized string
+ *
+ * @param str
+ * @param localeData
  */
 export function parseNumber(str, localeData) {
   const numerals = "0123456789";
@@ -121,6 +146,9 @@ export function parseNumber(str, localeData) {
 /**
  * Parse numeric units for day, month, and year from a localized string
  * month starts at 0 (can pass to date constructor)
+ *
+ * @param str
+ * @param localeData
  */
 export function parseDateString(str, localeData) {
   const { separator, unitOrder } = localeData;
@@ -134,6 +162,8 @@ export function parseDateString(str, localeData) {
 }
 /**
  * Convert eastern arbic numerals
+ *
+ * @param str
  */
 export function replaceArabicNumerals(str = "") {
   return str
@@ -142,6 +172,8 @@ export function replaceArabicNumerals(str = "") {
 }
 /**
  * Based on the unitOrder string, find order of month, day, and year for locale
+ *
+ * @param unitOrder
  */
 export function getOrder(unitOrder) {
   const signifiers = ["d", "m", "y"];
@@ -150,6 +182,9 @@ export function getOrder(unitOrder) {
 }
 /**
  * Get number of days between two dates
+ *
+ * @param date1
+ * @param date2
  */
 export function getDaysDiff(date1, date2) {
   const ts1 = date1.getTime();

package/dist/collection/utils/dom.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
  */
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
@@ -10,6 +10,7 @@ import { guid } from "./guid";
  *
  * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  *
+ * @param el
  * @returns {string} The element's ID.
  */
 export function ensureId(el) {
@@ -42,35 +43,15 @@ export function getRootNode(el) {
 export function getHost(root) {
   return root.host || null;
 }
-/**
- * This helper queries an element's rootNodes and any ancestor rootNodes.
- *
- * @returns {Element[]} The elements.
- */
-export function queryElementsRoots(element, selector) {
-  // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
-  // Based on: https://stackoverflow.com/q/54520554/194216
-  function queryFromAll(el, allResults) {
-    if (!el) {
-      return allResults;
-    }
-    if (el.assignedSlot) {
-      el = el.assignedSlot;
-    }
-    const rootNode = getRootNode(el);
-    const results = Array.from(rootNode.querySelectorAll(selector));
-    const uniqueResults = results.filter((result) => !allResults.includes(result));
-    allResults = [...allResults, ...uniqueResults];
-    const host = getHost(rootNode);
-    return host ? queryFromAll(host, allResults) : allResults;
-  }
-  return queryFromAll(element, []);
-}
 /**
  * This helper queries an element's rootNode and any ancestor rootNodes.
  *
  * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  *
+ * @param element
+ * @param root0
+ * @param root0.selector
+ * @param root0.id
  * @returns {Element} The element.
  */
 export function queryElementRoots(element, { selector, id }) {
@@ -176,3 +157,14 @@ 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".
+ *
+ * @param value
+ * @returns {string} The string conversion of a boolean value ("true" | "false").
+ */
+export function toAriaBoolean(value) {
+  return Boolean(value).toString();
+}

package/dist/collection/utils/filter.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
  */
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
@@ -12,13 +12,13 @@ export const filter = (data, value) => {
     The data argument should be an array of objects`);
   }
   const find = (input, RE) => {
-    var _a;
-    if ((_a = input) === null || _a === void 0 ? void 0 : _a.constant) {
+    var _a, _b;
+    if (((_a = input) === null || _a === void 0 ? void 0 : _a.constant) || ((_b = input) === null || _b === void 0 ? void 0 : _b.filterDisabled)) {
       return true;
     }
     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,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
  */
 import { closestElementCrossShadowBoundary } from "./dom";
 import { h } from "@stencil/core";
@@ -30,8 +30,31 @@ function hasRegisteredFormComponentParent(form, formComponentEl) {
   }));
   return hasRegisteredFormComponentParent;
 }
+/**
+ * Helper to submit a form.
+ *
+ * @param component
+ */
+export function submitForm(component) {
+  const { formEl } = component;
+  if (!formEl) {
+    return;
+  }
+  "requestSubmit" in formEl ? formEl.requestSubmit() : formEl.submit();
+}
+/**
+ * Helper to reset a form.
+ *
+ * @param component
+ */
+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.
+ *
+ * @param component
  */
 export function connectForm(component) {
   const { el, value } = component;
@@ -46,6 +69,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() {
@@ -57,6 +81,8 @@ function onFormReset() {
 }
 /**
  * Helper to tear down form interactions on disconnectedCallback.
+ *
+ * @param component
  */
 export function disconnectForm(component) {
   const { el, formEl } = component;
@@ -73,6 +99,9 @@ export function disconnectForm(component) {
  * Helper for setting the default value on initialization after connectedCallback.
  *
  * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ *
+ * @param component
+ * @param value
  */
 export function afterConnectDefaultValueSet(component, value) {
   component.defaultValue = value;
@@ -81,6 +110,8 @@ export function afterConnectDefaultValueSet(component, value) {
  * Helper for maintaining a form-associated's hidden input in sync with the component.
  *
  * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198
+ *
+ * @param component
  */
 function syncHiddenFormInput(component) {
   const { el, formEl, name, value } = component;
@@ -165,6 +196,9 @@ function defaultSyncHiddenFormInput(component, input, value) {
  * }
  *
  * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ *
+ * @param root0
+ * @param root0.component
  */
 export const HiddenFormInputSlot = ({ component }) => {
   syncHiddenFormInput(component);

package/dist/collection/utils/globalAttributes.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
  */
 import { createObserver } from "./observers";
 const allowedGlobalAttributes = ["lang"];
@@ -33,6 +33,9 @@ function processMutations(mutations) {
  *   const lang = this.inheritedAttributes['lang'] ?? 'en';
  *   return <div>My lang is {lang}</div>;
  * }
+ *
+ * @param component
+ * @param attributeFilter
  */
 export function watchGlobalAttributes(component, attributeFilter) {
   const { el } = component;
@@ -46,6 +49,8 @@ export function watchGlobalAttributes(component, attributeFilter) {
 }
 /**
  * Helper remove listening for changes to inherited attributes.
+ *
+ * @param component
  */
 export function unwatchGlobalAttributes(component) {
   elementToComponentAndObserverOptionsMap.delete(component.el);

package/dist/collection/utils/guid.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
  */
 function gen(counts) {
   return counts

package/dist/collection/utils/interactive.js

@@ -1,10 +1,10 @@
 /*!
  * 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
  */
 function noopClick() {
-  /** noop **/
+  /** noop */
 }
 /**
  * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
@@ -13,8 +13,11 @@ function noopClick() {
  *
  * **Notes**
  *
- * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
- * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
+ * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ *
+ * @param component
+ * @param hostIsTabbable
  */
 export function updateHostInteraction(component, hostIsTabbable = false) {
   if (component.disabled) {

package/dist/collection/utils/key.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 function isActivationKey(key) {
   return key === "Enter" || key === " ";