@esri/calcite-components 1.0.0-next.466 → 1.0.0-next.469

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

@@ -1,11 +1,11 @@
 /*!
  * 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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";
-import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
+import { calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
 import List from "./shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -83,12 +83,13 @@ export class PickList {
   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();
   }
   calciteListFocusOutHandler(event) {
     calciteListFocusOutHandler.call(this, event);
@@ -115,7 +116,11 @@ export class PickList {
   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);
   }
@@ -323,7 +328,10 @@ export class PickList {
       "complexType": {
         "signature": "(focusId?: ListFocusId) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -339,7 +347,10 @@ export class PickList {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }
@@ -357,14 +368,14 @@ export class PickList {
       "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/pick-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-next.466
+ * v1.0.0-next.469
  */
 export const CSS = {
   sticky: "sticky-pos"

package/dist/collection/components/pick-list/shared-list-logic.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-next.466
+ * v1.0.0-next.469
  */
 import { debounce } from "lodash-es";
 import { focusElement, getSlotted } from "../../utils/dom";
@@ -63,8 +63,7 @@ export function calciteListItemChangeHandler(event) {
   this.lastSelectedItem = item;
   this.emitCalciteListChange();
 }
-export function calciteListItemValueChangeHandler(event) {
-  event.stopPropagation();
+export function calciteInternalListItemValueChangeHandler(event) {
   const oldValue = event.detail.oldValue;
   const selectedValues = this.selectedValues;
   if (selectedValues.has(oldValue)) {
@@ -72,6 +71,7 @@ export function calciteListItemValueChangeHandler(event) {
     selectedValues.delete(oldValue);
     selectedValues.set(event.detail.newValue, item);
   }
+  event.stopPropagation();
 }
 // --------------------------------------------------------------------------
 //

package/dist/collection/components/pick-list/shared-list-render.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-next.466
+ * v1.0.0-next.469
  */
 var __rest = (this && this.__rest) || function (s, e) {
   var t = {};

package/dist/collection/components/pick-list-group/pick-list-group.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/pick-list-group/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-next.466
+ * v1.0.0-next.469
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/pick-list-item/pick-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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -24,11 +24,12 @@ export class PickListItem {
      */
     this.disableDeselect = false;
     /**
-     * @internal When true, the item cannot be selected by user interaction.
+     * @internal
      */
     this.nonInteractive = 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;
@@ -42,6 +43,7 @@ export class PickListItem {
     this.selected = false;
     /**
      * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+     *
      * @default "Remove"
      */
     this.intlRemove = TEXT.remove;
@@ -71,13 +73,13 @@ export class PickListItem {
     };
   }
   descriptionWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   labelWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   metadataWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   selectedWatchHandler() {
     this.calciteListItemChange.emit({
@@ -89,7 +91,7 @@ export class PickListItem {
     this.shiftPressed = false;
   }
   valueWatchHandler(newValue, oldValue) {
-    this.calciteListItemValueChange.emit({ oldValue, newValue });
+    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
   }
   // --------------------------------------------------------------------------
   //
@@ -113,6 +115,8 @@ export class PickListItem {
   /**
    * Used to 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.selected = typeof coerce === "boolean" ? coerce : !this.selected;
@@ -239,7 +243,7 @@ export class PickListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When true, the item cannot be selected by user interaction."
+            "text": undefined
           }],
         "text": ""
       },
@@ -419,8 +423,8 @@ export class PickListItem {
         "references": {}
       }
     }, {
-      "method": "calciteListItemPropsChange",
-      "name": "calciteListItemPropsChange",
+      "method": "calciteInternalListItemPropsChange",
+      "name": "calciteInternalListItemPropsChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -437,8 +441,8 @@ export class PickListItem {
         "references": {}
       }
     }, {
-      "method": "calciteListItemValueChange",
-      "name": "calciteListItemValueChange",
+      "method": "calciteInternalListItemValueChange",
+      "name": "calciteInternalListItemValueChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -460,7 +464,10 @@ export class PickListItem {
       "complexType": {
         "signature": "(coerce?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "coerce"
+              }],
             "text": ""
           }],
         "references": {
@@ -472,7 +479,10 @@ export class PickListItem {
       },
       "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": []
+        "tags": [{
+            "name": "param",
+            "text": "coerce"
+          }]
       }
     },
     "setFocus": {

package/dist/collection/components/pick-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-next.466
+ * v1.0.0-next.469
  */
 export const CSS = {
   actions: "actions",

package/dist/collection/components/popover/PopoverManager.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-next.466
+ * v1.0.0-next.469
  */
 import { queryElementsRoots } from "../../utils/dom";
 export default class PopoverManager {
@@ -23,10 +23,10 @@ export default class PopoverManager {
       const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
       return registeredElements.get(registeredElement);
     };
-    this.clickHandler = (event) => {
+    this.togglePopovers = (event) => {
       const composedPath = event.composedPath();
       const popover = this.queryPopover(composedPath);
-      if (popover) {
+      if (popover && !popover.triggerDisabled) {
         popover.toggle();
         return;
       }
@@ -34,6 +34,15 @@ export default class PopoverManager {
         .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
         .forEach((popover) => popover.toggle(false));
     };
+    this.keyHandler = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      this.togglePopovers(event);
+    };
+    this.clickHandler = (event) => {
+      this.togglePopovers(event);
+    };
   }
   // --------------------------------------------------------------------------
   //
@@ -57,8 +66,10 @@ export default class PopoverManager {
   }
   addListeners() {
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("keydown", this.keyHandler, { capture: true });
   }
   removeListeners() {
     document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("keydown", this.keyHandler, { capture: true });
   }
 }

package/dist/collection/components/popover/popover.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
@@ -27,6 +27,7 @@ export class Popover {
     this.autoClose = false;
     /**
      * Display a close button within the Popover.
+     *
      * @deprecated use dismissible instead.
      */
     this.closeButton = false;
@@ -44,6 +45,7 @@ export class Popover {
     this.disablePointer = false;
     /**
      * Offset the position of the popover away from the reference element.
+     *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
@@ -59,10 +61,17 @@ export class Popover {
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the referenceElement.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = defaultPopoverPlacement;
-    /** Text for close button.
+    /**
+     * Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open.
+     */
+    this.triggerDisabled = false;
+    /**
+     * Text for close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.close;
@@ -184,7 +193,11 @@ export class Popover {
       })
       : this.createPopper();
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -195,7 +208,11 @@ export class Popover {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  /** Toggles the popover's open property. */
+  /**
+   * Toggles the popover's open property.
+   *
+   * @param value
+   */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -600,6 +617,24 @@ export class Popover {
       "attribute": "reference-element",
       "reflect": false
     },
+    "triggerDisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open."
+      },
+      "attribute": "trigger-disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "intlClose": {
       "type": "string",
       "mutable": false,
@@ -677,7 +712,10 @@ export class Popover {
       "complexType": {
         "signature": "(focusId?: \"close-button\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -689,14 +727,20 @@ export class Popover {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     },
     "toggle": {
       "complexType": {
         "signature": "(value?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "value"
+              }],
             "text": ""
           }],
         "references": {
@@ -708,7 +752,10 @@ export class Popover {
       },
       "docs": {
         "text": "Toggles the popover's open property.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "value"
+          }]
       }
     }
   }; }

package/dist/collection/components/popover/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-next.466
+ * v1.0.0-next.469
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/popover-manager/popover-manager.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, h, Prop, Element, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -19,6 +19,7 @@ export class PopoverManager {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+     *
      * @default `[data-calcite-popover-reference]`
      */
     this.selector = "[data-calcite-popover-reference]";

package/dist/collection/components/progress/progress.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, h, Prop } from "@stencil/core";
 export class Progress {

package/dist/collection/components/radio-button/radio-button.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -24,6 +24,7 @@ export class RadioButton {
     this.disabled = false;
     /**
      * The focused state of the radio button.
+     *
      * @internal
      */
     this.focused = false;
@@ -31,6 +32,7 @@ export class RadioButton {
     this.hidden = false;
     /**
      * The hovered state of the radio button.
+     *
      * @internal
      */
     this.hovered = false;

package/dist/collection/components/radio-button/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-next.466
+ * v1.0.0-next.469
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/radio-button-group/radio-button-group.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/radio-group/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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-next.466
+ * v1.0.0-next.469
  */
 export {};

package/dist/collection/components/radio-group/radio-group.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -101,9 +101,9 @@ export class RadioGroup {
       h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
-    event.stopPropagation();
     event.preventDefault();
     this.selectItem(event.target);
+    event.stopPropagation();
   }
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
@@ -435,7 +435,7 @@ export class RadioGroup {
       "methodName": "handleSelectedItemChange"
     }]; }
   static get listeners() { return [{
-      "name": "calciteRadioGroupItemChange",
+      "name": "calciteInternalRadioGroupItemChange",
       "method": "handleSelected",
       "target": undefined,
       "capture": false,

package/dist/collection/components/radio-group-item/radio-group-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-next.466
+ * v1.0.0-next.469
  */
 import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -21,7 +21,7 @@ export class RadioGroupItem {
     this.iconPosition = "start";
   }
   handleCheckedChange() {
-    this.calciteRadioGroupItemChange.emit();
+    this.calciteInternalRadioGroupItemChange.emit();
   }
   render() {
     const { checked, value } = this;
@@ -146,8 +146,8 @@ export class RadioGroupItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteRadioGroupItemChange",
-      "name": "calciteRadioGroupItemChange",
+      "method": "calciteInternalRadioGroupItemChange",
+      "name": "calciteInternalRadioGroupItemChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/radio-group-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-next.466
+ * v1.0.0-next.469
  */
 export const SLOTS = {
   input: "input"

package/dist/collection/components/rating/rating.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-next.466
+ * v1.0.0-next.469
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -26,11 +26,15 @@ export class Rating {
     this.disabled = false;
     /** Show average and count data summary chip (if available) */
     this.showChip = false;
-    /** Localized string for "Rating" (used for aria label)
+    /**
+     * Localized string for "Rating" (used for aria label)
+     *
      * @default "Rating"
      */
     this.intlRating = TEXT.rating;
-    /** Localized string for labelling each star, `${num}` in the string will be replaced by the number
+    /**
+     * Localized string for labelling each star, `${num}` in the string will be replaced by the number
+     *
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;

package/dist/collection/components/rating/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-next.466
+ * v1.0.0-next.469
  */
 export const TEXT = {
   rating: "Rating",