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

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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

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

@@ -101,7 +101,8 @@
   padding: 1rem;
 }
 
-:host([dismissed]), :host([dismissed]) .container {
+:host([dismissed]), 
+:host([dismissed]) .container {
   display: none;
 }
 
@@ -147,7 +148,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -187,9 +189,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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   header: "header",

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

@@ -139,7 +139,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -164,10 +165,8 @@ h4.heading, h5.heading {
 
 .container {
   position: relative;
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   overflow: hidden;
+  outline-color: transparent;
   min-height: 150px;
 }
 .container:focus {
@@ -181,9 +180,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);
@@ -231,28 +228,20 @@ h4.heading, h5.heading {
 @keyframes tip-advance {
   0% {
     opacity: 0;
-  }
-  0% {
     transform: translate3d(50px, 0, 0) scale(0.99);
   }
   100% {
     opacity: 1;
-  }
-  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes tip-retreat {
   0% {
     opacity: 0;
-  }
-  0% {
     transform: translate3d(-50px, 0, 0) scale(0.99);
   }
   100% {
     opacity: 1;
-  }
-  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
 }

package/dist/collection/components/tip-manager/tip-manager.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.81
+ * v1.0.0-beta.84
  */
 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";
 /**
@@ -26,6 +26,7 @@ export class TipManager {
     this.hideTipManager = () => {
       this.closed = true;
       this.calciteTipManagerToggle.emit();
+      this.calciteTipManagerClose.emit();
     };
     this.previousClicked = () => {
       this.previousTip();
@@ -153,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 },
@@ -315,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": {
@@ -323,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,161 @@
+/*!
+ * 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.84
+ */
+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) => {
+      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);
+    };
+    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,12 +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.81
+ * v1.0.0-beta.84
  */
 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

@@ -123,6 +123,11 @@
   opacity: 0;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .arrow,
 .arrow::before {
   position: absolute;
@@ -158,9 +163,7 @@
 
 .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);
   padding-top: 0.75rem;
@@ -171,9 +174,9 @@
   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;
+  text-align: start;
 }
 
 .calcite-popper-anim {