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

package/dist/collection/components/time-picker/time-picker.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
@@ -18,56 +18,81 @@ export class TimePicker {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** aria-label for the hour input
+    /**
+     * aria-label for the hour input
+     *
      * @default "Hour"
      */
     this.intlHour = TEXT.hour;
-    /** aria-label for the hour down button
+    /**
+     * aria-label for the hour down button
+     *
      * @default "Decrease hour"
      */
     this.intlHourDown = TEXT.hourDown;
-    /** aria-label for the hour up button
+    /**
+     * aria-label for the hour up button
+     *
      * @default "Increase hour"
      */
     this.intlHourUp = TEXT.hourUp;
-    /** aria-label for the meridiem (am/pm) input
+    /**
+     * aria-label for the meridiem (am/pm) input
+     *
      * @default "AM/PM"
      */
     this.intlMeridiem = TEXT.meridiem;
-    /** aria-label for the meridiem (am/pm) down button
+    /**
+     * aria-label for the meridiem (am/pm) down button
+     *
      * @default "Decrease AM/PM"
      */
     this.intlMeridiemDown = TEXT.meridiemDown;
-    /** aria-label for the meridiem (am/pm) up button
+    /**
+     * aria-label for the meridiem (am/pm) up button
+     *
      * @default "Increase AM/PM"
      */
     this.intlMeridiemUp = TEXT.meridiemUp;
-    /** aria-label for the minute input
+    /**
+     * aria-label for the minute input
+     *
      * @default "Minute"
      */
     this.intlMinute = TEXT.minute;
-    /** aria-label for the minute down button
+    /**
+     * aria-label for the minute down button
+     *
      * @default "Decrease minute"
      */
     this.intlMinuteDown = TEXT.minuteDown;
-    /** aria-label for the minute up button
+    /**
+     * aria-label for the minute up button
+     *
      * @default "Increase minute"
      */
     this.intlMinuteUp = TEXT.minuteUp;
-    /** aria-label for the second input
+    /**
+     * aria-label for the second input
+     *
      * @default "Second"
      */
     this.intlSecond = TEXT.second;
-    /** aria-label for the second down button
+    /**
+     * aria-label for the second down button
+     *
      * @default "Decrease second"
      */
     this.intlSecondDown = TEXT.secondDown;
-    /** aria-label for the second up button
+    /**
+     * aria-label for the second up button
+     *
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT.secondUp;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -365,7 +390,7 @@ export class TimePicker {
         this.value = null;
       }
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
     this.setValuePart = (key, value, emit = true) => {
@@ -404,7 +429,7 @@ export class TimePicker {
         ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
         : localizeTimePart(this.meridiem, "meridiem", this.locale);
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
   }
@@ -421,10 +446,10 @@ export class TimePicker {
   //
   //--------------------------------------------------------------------------
   hostBlurHandler() {
-    this.calciteTimePickerBlur.emit();
+    this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
-    this.calciteTimePickerFocus.emit();
+    this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
     const key = event.key;
@@ -480,7 +505,11 @@ export class TimePicker {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param target
+   */
   async setFocus(target) {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -962,8 +991,8 @@ export class TimePicker {
     "showSecond": {}
   }; }
   static get events() { return [{
-      "method": "calciteTimePickerBlur",
-      "name": "calciteTimePickerBlur",
+      "method": "calciteInternalTimePickerBlur",
+      "name": "calciteInternalTimePickerBlur",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -980,8 +1009,8 @@ export class TimePicker {
         "references": {}
       }
     }, {
-      "method": "calciteTimePickerChange",
-      "name": "calciteTimePickerChange",
+      "method": "calciteInternalTimePickerChange",
+      "name": "calciteInternalTimePickerChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -998,8 +1027,8 @@ export class TimePicker {
         "references": {}
       }
     }, {
-      "method": "calciteTimePickerFocus",
-      "name": "calciteTimePickerFocus",
+      "method": "calciteInternalTimePickerFocus",
+      "name": "calciteInternalTimePickerFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -1021,7 +1050,10 @@ export class TimePicker {
       "complexType": {
         "signature": "(target: TimePart) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "target"
+              }],
             "text": ""
           }],
         "references": {
@@ -1037,7 +1069,10 @@ export class TimePicker {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "target"
+          }]
       }
     }
   }; }

package/dist/collection/components/tip/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.82
+ * v1.0.0-beta.83
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.css

@@ -187,9 +187,7 @@ h4.heading, h5.heading {
 }
 
 ::slotted(a) {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   color: var(--calcite-ui-brand);
 }
 

package/dist/collection/components/tip/tip.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";

package/dist/collection/components/tip-group/tip-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-beta.82
+ * v1.0.0-beta.83
  */
 import { Component, Prop, h } from "@stencil/core";
 /**

package/dist/collection/components/tip-manager/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.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.css

@@ -165,9 +165,7 @@ h4.heading, h5.heading {
 .container {
   position: relative;
   overflow: hidden;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   min-height: 150px;
 }
 .container:focus {
@@ -181,9 +179,7 @@ h4.heading, h5.heading {
   align-items: flex-start;
   justify-content: center;
   overflow: auto;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   animation-name: none;
   animation-duration: var(--calcite-animation-timing);
   height: var(--calcite-tip-manager-height);

package/dist/collection/components/tip-manager/tip-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-beta.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";

package/dist/collection/components/tooltip/TooltipManager.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.82
+ * v1.0.0-beta.83
  */
 import { TOOLTIP_DELAY_MS } from "./resources";
 export default class TooltipManager {
@@ -40,7 +40,11 @@ export default class TooltipManager {
       this.hoverEvent(event, false);
     };
     this.clickHandler = (event) => {
-      this.clickedTooltip = this.queryTooltip(event.composedPath());
+      const clickedTooltip = this.queryTooltip(event.composedPath());
+      this.clickedTooltip = clickedTooltip;
+      if (clickedTooltip === null || clickedTooltip === void 0 ? void 0 : clickedTooltip.closeOnClick) {
+        this.toggleTooltip(clickedTooltip, false);
+      }
     };
     this.focusShow = (event) => {
       this.focusEvent(event, true);

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

package/dist/collection/components/tooltip/tooltip.css

@@ -123,6 +123,11 @@
   opacity: 0;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .arrow,
 .arrow::before {
   position: absolute;
@@ -158,9 +163,6 @@
 
 .container {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
   overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
@@ -174,6 +176,7 @@
   color: var(--calcite-ui-text-1);
   max-width: 20rem;
   max-height: 20rem;
+  text-align: start;
 }
 
 .calcite-popper-anim {

package/dist/collection/components/tooltip/tooltip.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_DESCRIBED_BY } from "./resources";
@@ -15,23 +15,32 @@ const manager = new TooltipManager();
  */
 export class Tooltip {
   constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /** Closes the `calcite-tooltip` when the `referenceElement` is clicked. */
+    this.closeOnClick = false;
     /**
-     * Offset the position of the tooltip away from the reference element.
+     * Offset the position of the `calcite-tooltip` away from the `referenceElement`.
+     *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offset the position of the tooltip along the reference element.
+     * Offset the position of the `calcite-tooltip` along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * Display and position the component.
+     * When true, the `calcite-tooltip` is open.
      */
     this.open = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /** Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the "fixed" value. */
     this.overlayPositioning = "absolute";
     /**
-     * Determines where the component will be positioned relative to the referenceElement.
+     * 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 = "auto";
@@ -62,7 +71,9 @@ export class Tooltip {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      }
       manager.registerElement(effectiveReferenceElement, this.el);
     };
     this.removeReferences = () => {
@@ -70,7 +81,9 @@ export class Tooltip {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
+      if ("removeAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
+      }
       manager.unregisterElement(effectiveReferenceElement);
     };
   }
@@ -196,6 +209,24 @@ export class Tooltip {
     "$": ["tooltip.css"]
   }; }
   static get properties() { return {
+    "closeOnClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Closes the `calcite-tooltip` when the `referenceElement` is clicked."
+      },
+      "attribute": "close-on-click",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -208,7 +239,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Accessible name for the `calcite-tooltip`."
       },
       "attribute": "label",
       "reflect": false
@@ -228,7 +259,7 @@ export class Tooltip {
             "name": "default",
             "text": "6"
           }],
-        "text": "Offset the position of the tooltip away from the reference element."
+        "text": "Offset the position of the `calcite-tooltip` away from the `referenceElement`."
       },
       "attribute": "offset-distance",
       "reflect": true,
@@ -246,7 +277,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Offset the position of the tooltip along the reference element."
+        "text": "Offset the position of the `calcite-tooltip` along the `referenceElement`."
       },
       "attribute": "offset-skidding",
       "reflect": true,
@@ -264,7 +295,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display and position the component."
+        "text": "When true, the `calcite-tooltip` is open."
       },
       "attribute": "open",
       "reflect": true,
@@ -287,7 +318,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the \"fixed\" value."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -313,7 +344,7 @@ export class Tooltip {
             "name": "see",
             "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
-        "text": "Determines where the component will be positioned relative to the referenceElement."
+        "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
       "attribute": "placement",
       "reflect": true,
@@ -323,11 +354,12 @@ export class Tooltip {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "HTMLElement | string",
-        "resolved": "HTMLElement | string",
+        "original": "ReferenceElement | string",
+        "resolved": "Element | string | ({ getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; })",
         "references": {
-          "HTMLElement": {
-            "location": "global"
+          "ReferenceElement": {
+            "location": "import",
+            "path": "../../utils/popper"
           }
         }
       },
@@ -335,7 +367,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement."
+        "text": "The `referenceElement` to position `calcite-tooltip` according to its \"placement\" value. Setting to the `HTMLElement` is preferred so `calcite-tooltip` does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used."
       },
       "attribute": "reference-element",
       "reflect": false

package/dist/collection/components/tooltip-manager/tooltip-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-beta.82
+ * v1.0.0-beta.83
  */
 import { Component, h, Prop } from "@stencil/core";
 /**
@@ -17,6 +17,7 @@ export class TooltipManager {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.
+     *
      * @default `[data-calcite-tooltip-reference]`
      */
     this.selector = "[data-calcite-tooltip-reference]";

package/dist/collection/components/tree/interfaces.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.82
+ * v1.0.0-beta.83
  */
 export var TreeSelectionMode;
 (function (TreeSelectionMode) {

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

@@ -1,13 +1,13 @@
 /*!
  * 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
+ * v1.0.0-beta.83
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, nodeListToArray } from "../../utils/dom";
 import { TreeSelectionMode } from "./interfaces";
 /**
- * @slot - A slot for calcite-tree-item elements.
+ * @slot - A slot for `calcite-tree-item` elements.
  */
 export class Tree {
   constructor() {
@@ -18,13 +18,17 @@ export class Tree {
     //--------------------------------------------------------------------------
     /** Display indentation guide lines. */
     this.lines = false;
-    /** Display input
+    /**
+     * Display input
+     *
      * @deprecated Use "ancestors" selection-mode for checkbox input.
      */
     this.inputEnabled = false;
     /** Specify the scale of the tree. */
     this.scale = "m";
-    /** Customize how tree selection works.
+    /**
+     * Customize how tree selection works.
+     *
      * @default "single"
      * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
      */
@@ -145,6 +149,7 @@ export class Tree {
     this.calciteTreeSelect.emit({
       selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
     });
+    e.stopPropagation();
   }
   keyDownHandler(event) {
     var _a;
@@ -305,7 +310,7 @@ export class Tree {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "If this tree is nested within another tree, set to false."
+            "text": undefined
           }],
         "text": ""
       },
@@ -409,7 +414,7 @@ export class Tree {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTreeItemSelect",
+      "name": "calciteInternalTreeItemSelect",
       "method": "onClick",
       "target": undefined,
       "capture": false,

package/dist/collection/components/tree-item/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-beta.82
+ * v1.0.0-beta.83
  */
 export {};

package/dist/collection/components/tree-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.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   checkboxLabel: "checkbox-label",