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

package/dist/collection/components/tooltip/tooltip.js

@@ -1,34 +1,46 @@
 /*!
  * 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.83
  */
 import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
-import { CSS, TOOLTIP_REFERENCE, ARIA_DESCRIBED_BY } from "./resources";
+import { CSS, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
-import { queryElementRoots } from "../../utils/dom";
+import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import TooltipManager from "./TooltipManager";
+const manager = new TooltipManager();
 /**
  * @slot - A slot for adding text.
  */
 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";
@@ -59,22 +71,20 @@ export class Tooltip {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(TOOLTIP_REFERENCE, id);
-      effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      }
+      manager.registerElement(effectiveReferenceElement, this.el);
     };
     this.removeReferences = () => {
       const { effectiveReferenceElement } = this;
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(TOOLTIP_REFERENCE);
-      effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
-    };
-    this.show = () => {
-      this.open = true;
-    };
-    this.hide = () => {
-      this.open = false;
+      if ("removeAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
+      }
+      manager.unregisterElement(effectiveReferenceElement);
     };
   }
   offsetDistanceOffsetHandler() {
@@ -181,7 +191,7 @@ export class Tooltip {
     const { effectiveReferenceElement, label, open } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" },
       h("div", { class: {
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
@@ -199,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,
@@ -211,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
@@ -231,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,
@@ -249,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,
@@ -267,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,
@@ -290,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,
@@ -316,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,
@@ -326,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"
           }
         }
       },
@@ -338,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,16 +1,15 @@
 /*!
  * 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.83
  */
-import { Component, h, Listen, Prop, Element } from "@stencil/core";
-import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../tooltip/resources";
-import { queryElementRoots } from "../../utils/dom";
+import { Component, h, Prop } from "@stencil/core";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ * @deprecated No longer required for tooltip usage.
  */
 export class TooltipManager {
   constructor() {
-    this.hoverTimeouts = new WeakMap();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -18,95 +17,10 @@ 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 = `[${TOOLTIP_REFERENCE}]`;
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.queryTooltip = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, TOOLTIP_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(TOOLTIP_REFERENCE);
-      return queryElementRoots(el, { id });
-    };
-    this.clearHoverTimeout = (tooltip) => {
-      const { hoverTimeouts } = this;
-      if (hoverTimeouts.has(tooltip)) {
-        window.clearTimeout(hoverTimeouts.get(tooltip));
-        hoverTimeouts.delete(tooltip);
-      }
-    };
-    this.closeExistingTooltip = () => {
-      const { tooltipEl } = this;
-      if (tooltipEl) {
-        this.toggleTooltip(tooltipEl, false);
-      }
-    };
-    this.focusTooltip = ({ tooltip, value }) => {
-      this.closeExistingTooltip();
-      if (value) {
-        this.clearHoverTimeout(tooltip);
-      }
-      this.toggleTooltip(tooltip, value);
-    };
-    this.toggleTooltip = (tooltip, value) => {
-      tooltip.open = value;
-      if (value) {
-        this.tooltipEl = tooltip;
-      }
-    };
-    this.hoverToggle = ({ tooltip, value }) => {
-      const { hoverTimeouts } = this;
-      hoverTimeouts.delete(tooltip);
-      if (value) {
-        this.closeExistingTooltip();
-      }
-      this.toggleTooltip(tooltip, value);
-    };
-    this.hoverTooltip = ({ tooltip, value }) => {
-      this.clearHoverTimeout(tooltip);
-      const { hoverTimeouts } = this;
-      const timeoutId = window.setTimeout(() => this.hoverToggle({ tooltip, value }), TOOLTIP_DELAY_MS || 0);
-      hoverTimeouts.set(tooltip, timeoutId);
-    };
-    this.activeTooltipHover = (event) => {
-      const { tooltipEl, hoverTimeouts } = this;
-      const { type } = event;
-      if (!tooltipEl) {
-        return;
-      }
-      if (type === "mouseover" && event.composedPath().includes(tooltipEl)) {
-        this.clearHoverTimeout(tooltipEl);
-      }
-      else if (type === "mouseout" && !hoverTimeouts.has(tooltipEl)) {
-        this.hoverTooltip({ tooltip: tooltipEl, value: false });
-      }
-    };
-    this.hoverEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.composedPath());
-      this.activeTooltipHover(event);
-      if (!tooltip) {
-        return;
-      }
-      this.hoverTooltip({ tooltip, value });
-    };
-    this.focusEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.composedPath());
-      if (!tooltip || tooltip === this.clickedTooltip) {
-        this.clickedTooltip = null;
-        return;
-      }
-      this.focusTooltip({ tooltip, value });
-    };
+    this.selector = "[data-calcite-tooltip-reference]";
   }
   // --------------------------------------------------------------------------
   //
@@ -116,39 +30,6 @@ export class TooltipManager {
   render() {
     return h("slot", null);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyUpHandler(event) {
-    if (event.key === "Escape") {
-      const { tooltipEl } = this;
-      if (tooltipEl) {
-        this.clearHoverTimeout(tooltipEl);
-        this.toggleTooltip(tooltipEl, false);
-      }
-    }
-  }
-  mouseEnterShow(event) {
-    this.hoverEvent(event, true);
-  }
-  mouseLeaveHide(event) {
-    this.hoverEvent(event, false);
-  }
-  clickHandler(event) {
-    const clickedTooltip = this.queryTooltip(event.composedPath());
-    this.clickedTooltip = clickedTooltip;
-    if (clickedTooltip) {
-      this.toggleTooltip(clickedTooltip, false);
-    }
-  }
-  focusShow(event) {
-    this.focusEvent(event, true);
-  }
-  blurHide(event) {
-    this.focusEvent(event, false);
-  }
   static get is() { return "calcite-tooltip-manager"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -177,45 +58,7 @@ export class TooltipManager {
       },
       "attribute": "selector",
       "reflect": false,
-      "defaultValue": "`[${TOOLTIP_REFERENCE}]`"
+      "defaultValue": "\"[data-calcite-tooltip-reference]\""
     }
   }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "keyup",
-      "method": "keyUpHandler",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseover",
-      "method": "mouseEnterShow",
-      "target": undefined,
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "mouseout",
-      "method": "mouseLeaveHide",
-      "target": undefined,
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "focusShow",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "blur",
-      "method": "blurHide",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
 }

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

package/dist/collection/components/tree/tree.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.83
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, nodeListToArray } from "../../utils/dom";
@@ -15,15 +16,19 @@ export class Tree {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Display indentation guide lines */
+    /** Display indentation guide lines. */
     this.lines = false;
-    /** Display input
-     * @deprecated use "ancestors" selection-mode for checkbox input
+    /**
+     * Display input
+     *
+     * @deprecated Use "ancestors" selection-mode for checkbox input.
      */
     this.inputEnabled = false;
-    /** Specify the scale of the tree, defaults to m */
+    /** Specify the scale of the tree. */
     this.scale = "m";
-    /** Customize how tree selection works (single, multi, children, multi-children, ancestors)
+    /**
+     * Customize how tree selection works.
+     *
      * @default "single"
      * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
      */
@@ -144,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;
@@ -264,7 +270,7 @@ export class Tree {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display indentation guide lines"
+        "text": "Display indentation guide lines."
       },
       "attribute": "lines",
       "reflect": true,
@@ -283,7 +289,7 @@ export class Tree {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use \"ancestors\" selection-mode for checkbox input"
+            "text": "Use \"ancestors\" selection-mode for checkbox input."
           }],
         "text": "Display input"
       },
@@ -304,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": ""
       },
@@ -328,7 +334,7 @@ export class Tree {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specify the scale of the tree, defaults to m"
+        "text": "Specify the scale of the tree."
       },
       "attribute": "scale",
       "reflect": true,
@@ -357,7 +363,7 @@ export class Tree {
             "name": "see",
             "text": "[TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)"
           }],
-        "text": "Customize how tree selection works (single, multi, children, multi-children, ancestors)"
+        "text": "Customize how tree selection works."
       },
       "attribute": "selection-mode",
       "reflect": true,
@@ -375,7 +381,7 @@ export class Tree {
             "name": "see",
             "text": "[TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)"
           }],
-        "text": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property."
+        "text": "Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's \"detail\" property."
       },
       "complexType": {
         "original": "TreeSelectDetail",
@@ -408,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,5 +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.83
  */
 export {};

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

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

@@ -87,6 +87,11 @@
   outline-offset: 2px;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -138,10 +143,7 @@
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   height: 96%;
   content: "";
   background-color: var(--calcite-ui-border-2);
@@ -170,9 +172,7 @@
 }
 
 :host {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) {
@@ -216,10 +216,7 @@
 }
 .node-container .checkmark, .node-container .bullet-point {
   opacity: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   color: var(--calcite-ui-border-1);
 }
 
@@ -267,10 +264,7 @@
   position: relative;
   align-self: center;
   color: var(--calcite-ui-text-3);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   flex: 0 0 auto;
   transform: rotate(0deg);
 }