@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.96

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

@@ -1,15 +1,14 @@
 /*!
  * 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.95
+ * v1.0.0-beta.96
  */
-import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { CSS, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, repositionDebounceTimeout } from "../../utils/floating-ui";
+import { connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, reposition, FloatingCSS, updateAfterClose } from "../../utils/floating-ui";
 import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import TooltipManager from "./TooltipManager";
-import { debounce } from "lodash-es";
 const manager = new TooltipManager();
 /**
  * @slot - A slot for adding text.
@@ -34,13 +33,15 @@ export class Tooltip {
      */
     this.offsetSkidding = 0;
     /**
-     * When true, the component is open.
+     * When `true`, the component is open.
      */
     this.open = false;
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
@@ -57,7 +58,6 @@ export class Tooltip {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setUpReferenceElement = (warn = true) => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
@@ -96,19 +96,24 @@ export class Tooltip {
     };
   }
   offsetDistanceOffsetHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   offsetSkiddingHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
-  openHandler() {
-    this.debouncedReposition();
+  openHandler(value) {
+    if (value) {
+      this.reposition(true);
+    }
+    else {
+      updateAfterClose(this.el);
+    }
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   placementHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
@@ -125,7 +130,7 @@ export class Tooltip {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
-    this.debouncedReposition();
+    this.reposition(true);
     this.hasLoaded = true;
   }
   disconnectedCallback() {
@@ -137,19 +142,24 @@ export class Tooltip {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { el, effectiveReferenceElement, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl: el,
       referenceEl: effectiveReferenceElement,
       overlayPositioning,
       placement,
       offsetDistance,
       offsetSkidding,
+      includeArrow: true,
       arrowEl,
       type: "tooltip"
-    });
+    }, delayed);
   }
   getReferenceElement() {
     const { referenceElement, el } = this;
@@ -166,227 +176,244 @@ export class Tooltip {
     const { effectiveReferenceElement, label, open } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" },
-      h("div", { class: {
-          [FloatingCSS.animation]: true,
-          [FloatingCSS.animationActive]: displayed
-        } },
-        h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) }),
-        h("div", { class: CSS.container },
-          h("slot", null)))));
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { class: {
+        [FloatingCSS.animation]: true,
+        [FloatingCSS.animationActive]: displayed
+      } }, h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { class: CSS.container }, h("slot", null)))));
   }
   static get is() { return "calcite-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["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 component when the `referenceElement` is clicked."
-      },
-      "attribute": "close-on-click",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component."
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "offsetDistance": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "6"
-          }],
-        "text": "Offset the position of the component away from the `referenceElement`."
-      },
-      "attribute": "offset-distance",
-      "reflect": true,
-      "defaultValue": "defaultOffsetDistance"
-    },
-    "offsetSkidding": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Offset the position of the component along the `referenceElement`."
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["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 component when the `referenceElement` is clicked."
+        },
+        "attribute": "close-on-click",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "offset-skidding",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component is open."
+      "offsetDistance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "6"
+            }],
+          "text": "Offset the position of the component away from the `referenceElement`."
+        },
+        "attribute": "offset-distance",
+        "reflect": true,
+        "defaultValue": "defaultOffsetDistance"
       },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "overlayPositioning": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OverlayPositioning",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "OverlayPositioning": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
-          }
-        }
+      "offsetSkidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Offset the position of the component along the `referenceElement`."
+        },
+        "attribute": "offset-skidding",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the component is open."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "overlay-positioning",
-      "reflect": true,
-      "defaultValue": "\"absolute\""
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "LogicalPlacement",
-        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
-        "references": {
-          "LogicalPlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "overlayPositioning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OverlayPositioning",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "OverlayPositioning": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
-          }],
-        "text": "Determines where the component will be positioned relative to the `referenceElement`."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\nThe `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
+        },
+        "attribute": "overlay-positioning",
+        "reflect": true,
+        "defaultValue": "\"absolute\""
       },
-      "attribute": "placement",
-      "reflect": true,
-      "defaultValue": "\"auto\""
-    },
-    "referenceElement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ReferenceElement | string",
-        "resolved": "Element | VirtualElement | string",
-        "references": {
-          "ReferenceElement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LogicalPlacement",
+          "resolved": "Placement | VariationPlacement | AutoPlacement | DeprecatedPlacement",
+          "references": {
+            "LogicalPlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The `referenceElement` to position the component according to its \"placement\" value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
+            }],
+          "text": "Determines where the component will be positioned relative to the `referenceElement`."
+        },
+        "attribute": "placement",
+        "reflect": true,
+        "defaultValue": "\"auto\""
       },
-      "attribute": "reference-element",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "effectiveReferenceElement": {}
-  }; }
-  static get methods() { return {
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "referenceElement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ReferenceElement | string",
+          "resolved": "Element | VirtualElement | string",
+          "references": {
+            "ReferenceElement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The `referenceElement` to position the component according to its `\"placement\"` value.\n\nSetting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`.\n\nHowever, a string ID of the reference element can be used."
+        },
+        "attribute": "reference-element",
+        "reflect": false
       }
-    }
-  }; }
+    };
+  }
+  static get states() {
+    return {
+      "effectiveReferenceElement": {}
+    };
+  }
+  static get methods() {
+    return {
+      "reposition": {
+        "complexType": {
+          "signature": "(delayed?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "delayed"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Updates the position of the component.",
+          "tags": [{
+              "name": "param",
+              "text": "delayed"
+            }]
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "offsetDistance",
-      "methodName": "offsetDistanceOffsetHandler"
-    }, {
-      "propName": "offsetSkidding",
-      "methodName": "offsetSkiddingHandler"
-    }, {
-      "propName": "open",
-      "methodName": "openHandler"
-    }, {
-      "propName": "overlayPositioning",
-      "methodName": "overlayPositioningHandler"
-    }, {
-      "propName": "placement",
-      "methodName": "placementHandler"
-    }, {
-      "propName": "referenceElement",
-      "methodName": "referenceElementHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "offsetDistance",
+        "methodName": "offsetDistanceOffsetHandler"
+      }, {
+        "propName": "offsetSkidding",
+        "methodName": "offsetSkiddingHandler"
+      }, {
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
+        "propName": "overlayPositioning",
+        "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "placement",
+        "methodName": "placementHandler"
+      }, {
+        "propName": "referenceElement",
+        "methodName": "referenceElementHandler"
+      }];
+  }
 }

package/dist/collection/components/tooltip-manager/tooltip-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.95
+ * v1.0.0-beta.96
  */
-import { Component, h, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 /**
- * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ * @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 {
@@ -32,33 +32,39 @@ export class TooltipManager {
   }
   static get is() { return "calcite-tooltip-manager"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip-manager.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tooltip-manager.css"]
-  }; }
-  static get properties() { return {
-    "selector": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "`[data-calcite-tooltip-reference]`"
-          }],
-        "text": "CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip."
-      },
-      "attribute": "selector",
-      "reflect": true,
-      "defaultValue": "\"[data-calcite-tooltip-reference]\""
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip-manager.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip-manager.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "`[data-calcite-tooltip-reference]`"
+            }],
+          "text": "CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip."
+        },
+        "attribute": "selector",
+        "reflect": true,
+        "defaultValue": "\"[data-calcite-tooltip-reference]\""
+      }
+    };
+  }
 }