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

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

@@ -1,10 +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-beta.82
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { createObserver } from "../../utils/observers";
 /**
@@ -18,13 +19,14 @@ export class TipManager {
     //
     // --------------------------------------------------------------------------
     /**
-     * Alternate text for closing the `calcite-tip-manager`.
+     * Closed state of the `calcite-tip-manager`.
      */
     this.closed = false;
     this.mutationObserver = createObserver("mutation", () => this.setUpTips());
     this.hideTipManager = () => {
       this.closed = true;
       this.calciteTipManagerToggle.emit();
+      this.calciteTipManagerClose.emit();
     };
     this.previousClicked = () => {
       this.previousTip();
@@ -152,7 +154,7 @@ export class TipManager {
     if (total === 0) {
       return null;
     }
-    return (h("section", { "aria-hidden": closed.toString(), class: CSS.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 },
+    return (h("section", { "aria-hidden": toAriaBoolean(closed), class: CSS.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 },
       h("header", { class: CSS.header },
         h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, groupTitle),
         h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel },
@@ -186,7 +188,7 @@ export class TipManager {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Alternate text for closing the `calcite-tip-manager`."
+        "text": "Closed state of the `calcite-tip-manager`."
       },
       "attribute": "closed",
       "reflect": true,
@@ -314,7 +316,10 @@ export class TipManager {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use calciteTipManagerClose instead."
+          }],
         "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
       },
       "complexType": {
@@ -322,6 +327,21 @@ export class TipManager {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "calciteTipManagerClose",
+      "name": "calciteTipManagerClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the `calcite-tip-manager` has been closed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "nextTip": {

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

@@ -0,0 +1,157 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.82
+ */
+import { TOOLTIP_DELAY_MS } from "./resources";
+export default class TooltipManager {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.registeredElements = new WeakMap();
+    this.hoverTimeouts = new WeakMap();
+    this.registeredElementCount = 0;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.queryTooltip = (composedPath) => {
+      const { registeredElements } = this;
+      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+      return registeredElements.get(registeredElement);
+    };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
+        const { activeTooltipEl } = this;
+        if (activeTooltipEl) {
+          this.clearHoverTimeout(activeTooltipEl);
+          this.toggleTooltip(activeTooltipEl, false);
+        }
+      }
+    };
+    this.mouseEnterShow = (event) => {
+      this.hoverEvent(event, true);
+    };
+    this.mouseLeaveHide = (event) => {
+      this.hoverEvent(event, false);
+    };
+    this.clickHandler = (event) => {
+      this.clickedTooltip = this.queryTooltip(event.composedPath());
+    };
+    this.focusShow = (event) => {
+      this.focusEvent(event, true);
+    };
+    this.blurHide = (event) => {
+      this.focusEvent(event, false);
+    };
+    this.hoverToggle = (tooltip, value) => {
+      const { hoverTimeouts } = this;
+      hoverTimeouts.delete(tooltip);
+      if (value) {
+        this.closeExistingTooltip();
+      }
+      this.toggleTooltip(tooltip, value);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  registerElement(referenceEl, tooltip) {
+    this.registeredElementCount++;
+    this.registeredElements.set(referenceEl, tooltip);
+    if (this.registeredElementCount === 1) {
+      this.addListeners();
+    }
+  }
+  unregisterElement(referenceEl) {
+    if (this.registeredElements.delete(referenceEl)) {
+      this.registeredElementCount--;
+    }
+    if (this.registeredElementCount === 0) {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    document.addEventListener("keydown", this.keyDownHandler);
+    document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
+    document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("focusin", this.focusShow), { capture: true };
+    document.addEventListener("focusout", this.blurHide, { capture: true });
+  }
+  removeListeners() {
+    document.removeEventListener("keydown", this.keyDownHandler);
+    document.removeEventListener("mouseover", this.mouseEnterShow, { capture: true });
+    document.removeEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("focusin", this.focusShow, { capture: true });
+    document.removeEventListener("focusout", this.blurHide, { capture: true });
+  }
+  clearHoverTimeout(tooltip) {
+    const { hoverTimeouts } = this;
+    if (hoverTimeouts.has(tooltip)) {
+      window.clearTimeout(hoverTimeouts.get(tooltip));
+      hoverTimeouts.delete(tooltip);
+    }
+  }
+  closeExistingTooltip() {
+    const { activeTooltipEl } = this;
+    if (activeTooltipEl) {
+      this.toggleTooltip(activeTooltipEl, false);
+    }
+  }
+  focusTooltip(tooltip, value) {
+    this.closeExistingTooltip();
+    if (value) {
+      this.clearHoverTimeout(tooltip);
+    }
+    this.toggleTooltip(tooltip, value);
+  }
+  toggleTooltip(tooltip, value) {
+    tooltip.open = value;
+    if (value) {
+      this.activeTooltipEl = tooltip;
+    }
+  }
+  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);
+  }
+  activeTooltipHover(event) {
+    const { activeTooltipEl, hoverTimeouts } = this;
+    const { type } = event;
+    if (!activeTooltipEl) {
+      return;
+    }
+    if (type === "mouseover" && event.composedPath().includes(activeTooltipEl)) {
+      this.clearHoverTimeout(activeTooltipEl);
+    }
+    else if (type === "mouseout" && !hoverTimeouts.has(activeTooltipEl)) {
+      this.hoverTooltip(activeTooltipEl, false);
+    }
+  }
+  hoverEvent(event, value) {
+    const tooltip = this.queryTooltip(event.composedPath());
+    this.activeTooltipHover(event);
+    if (!tooltip) {
+      return;
+    }
+    this.hoverTooltip(tooltip, value);
+  }
+  focusEvent(event, value) {
+    const tooltip = this.queryTooltip(event.composedPath());
+    if (!tooltip || tooltip === this.clickedTooltip) {
+      this.clickedTooltip = null;
+      return;
+    }
+    this.focusTooltip(tooltip, value);
+  }
+}

package/dist/collection/components/tooltip/resources.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-beta.82
  */
 export const CSS = {
   container: "container",
   arrow: "arrow"
 };
 export const TOOLTIP_DELAY_MS = 500;
-export const TOOLTIP_REFERENCE = "data-calcite-tooltip-reference";
 export const ARIA_DESCRIBED_BY = "aria-describedby";

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

@@ -118,7 +118,7 @@
   transform: translate(0);
 }
 
-:host([data-popper-placement][data-popper-escaped]), :host([data-popper-placement][data-popper-reference-hidden]) {
+:host([data-popper-placement][data-popper-reference-hidden]) {
   pointer-events: none;
   opacity: 0;
 }
@@ -161,6 +161,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
   padding-top: 0.75rem;
@@ -171,7 +172,6 @@
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  overflow: hidden;
   max-width: 20rem;
   max-height: 20rem;
 }

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

@@ -1,12 +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.82
  */
 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.
  */
@@ -59,22 +62,16 @@ export class Tooltip {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(TOOLTIP_REFERENCE, id);
       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;
+      manager.unregisterElement(effectiveReferenceElement);
     };
   }
   offsetDistanceOffsetHandler() {
@@ -181,7 +178,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

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.82
  */
-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
@@ -20,93 +19,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 = `[${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 +29,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 +57,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.82
  */
 export var TreeSelectionMode;
 (function (TreeSelectionMode) {

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

@@ -1,12 +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
  */
 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() {
@@ -15,15 +16,15 @@ 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
+     * @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)
      */
@@ -264,7 +265,7 @@ export class Tree {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display indentation guide lines"
+        "text": "Display indentation guide lines."
       },
       "attribute": "lines",
       "reflect": true,
@@ -283,7 +284,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 +305,7 @@ export class Tree {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "If this tree is nested within another tree, set to false"
+            "text": "If this tree is nested within another tree, set to false."
           }],
         "text": ""
       },
@@ -328,7 +329,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 +358,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 +376,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",

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.82
  */
 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.82
  */
 export const CSS = {
   checkboxLabel: "checkbox-label",