@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -93,8 +93,7 @@
 }
 
 :host-context(calcite-tip-manager) {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-block: 0.75rem;
 }
 
 :host-context(calcite-tip-manager) ::slotted(calcite-tip) {

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.86
+ * v1.0.0-beta.87
  */
 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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   header: "header",

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -147,11 +147,10 @@ h5.heading {
 
 .header {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
   padding-inline-end: 0px;
   padding-inline-start: 1rem;
 }
@@ -167,7 +166,7 @@ h5.heading {
   position: relative;
   overflow: hidden;
   outline-color: transparent;
-  min-height: 150px;
+  min-block-size: 150px;
 }
 .container:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -175,7 +174,7 @@ h5.heading {
 }
 
 .tip-container {
-  margin-top: 1px;
+  margin-block-start: 1px;
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -183,7 +182,7 @@ h5.heading {
   outline-color: transparent;
   animation-name: none;
   animation-duration: var(--calcite-animation-timing);
-  height: var(--calcite-tip-manager-height);
+  block-size: var(--calcite-tip-manager-height);
 }
 .tip-container:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -193,7 +192,7 @@ h5.heading {
 ::slotted(calcite-tip) {
   border-style: none;
   padding: 0.75rem;
-  max-width: var(--calcite-tip-max-width);
+  max-inline-size: var(--calcite-tip-max-width);
 }
 
 .tip-container--advancing {
@@ -209,17 +208,13 @@ h5.heading {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.5rem;
+  padding-inline: 0px;
+  padding-block: 0.75rem 0.5rem;
 }
 
 .page-position {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+  margin-block: 0px;
+  margin-inline: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }

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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
@@ -34,7 +34,7 @@ export class TipManager {
     this.nextClicked = () => {
       this.nextTip();
     };
-    this.tipManagerKeyUpHandler = (event) => {
+    this.tipManagerKeyDownHandler = (event) => {
       if (event.target !== this.container) {
         return;
       }
@@ -154,7 +154,7 @@ export class TipManager {
     if (total === 0) {
       return null;
     }
-    return (h("section", { "aria-hidden": toAriaBoolean(closed), 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, onKeyDown: this.tipManagerKeyDownHandler, 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 },
@@ -323,8 +323,8 @@ export class TipManager {
         "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -338,8 +338,8 @@ export class TipManager {
         "text": "Emitted when the `calcite-tip-manager` has been closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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.86
+ * v1.0.0-beta.87
  */
 import { TOOLTIP_DELAY_MS } from "./resources";
 export default class TooltipManager {

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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   container: "container",

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,10 +85,10 @@
   transform: scale(0);
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   position: relative;
   z-index: 1;
-  transition: var(--calcite-popper-transition);
+  transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
@@ -96,33 +96,28 @@
   border-radius: 0.25rem;
 }
 
-:host([data-popper-placement^=bottom]) .calcite-popper-anim {
+:host([data-placement^=bottom]) .calcite-floating-ui-anim {
   transform: translateY(-5px);
 }
 
-:host([data-popper-placement^=top]) .calcite-popper-anim {
+:host([data-placement^=top]) .calcite-floating-ui-anim {
   transform: translateY(5px);
 }
 
-:host([data-popper-placement^=left]) .calcite-popper-anim {
+:host([data-placement^=left]) .calcite-floating-ui-anim {
   transform: translateX(5px);
 }
 
-:host([data-popper-placement^=right]) .calcite-popper-anim {
+:host([data-placement^=right]) .calcite-floating-ui-anim {
   transform: translateX(-5px);
 }
 
-:host([data-popper-placement]) .calcite-popper-anim--active {
+:host([data-placement]) .calcite-floating-ui-anim--active {
   opacity: 1;
   visibility: visible;
   transform: translate(0);
 }
 
-:host([data-popper-placement][data-popper-reference-hidden]) {
-  pointer-events: none;
-  opacity: 0;
-}
-
 :host([calcite-hydrated-hidden]) {
   visibility: hidden !important;
   pointer-events: none;
@@ -131,8 +126,8 @@
 .arrow,
 .arrow::before {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  inline-size: 8px;
+  block-size: 8px;
   z-index: -1;
 }
 
@@ -145,20 +140,22 @@
   background: var(--calcite-ui-foreground-1);
 }
 
-:host([data-popper-placement^=top]) .arrow {
-  bottom: -4px;
+:host([data-placement^=top]) .arrow {
+  inset-block-end: -4px;
 }
 
-:host([data-popper-placement^=bottom]) .arrow {
-  top: -4px;
+:host([data-placement^=bottom]) .arrow {
+  inset-block-start: -4px;
 }
 
-:host([data-popper-placement^=left]) .arrow {
-  right: -4px;
+:host([data-placement^=left]) .arrow {
+  direction: ltr;
+  inset-inline-end: -4px;
 }
 
-:host([data-popper-placement^=right]) .arrow {
-  left: -4px;
+:host([data-placement^=right]) .arrow {
+  direction: ltr;
+  inset-inline-start: -4px;
 }
 
 .container {
@@ -166,20 +163,18 @@
   overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  max-width: 20rem;
-  max-height: 20rem;
+  max-inline-size: 20rem;
+  max-block-size: 20rem;
   text-align: start;
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;

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

@@ -1,12 +1,12 @@
 /*!
  * 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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";
-import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance } from "../../utils/floating-ui";
 import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import TooltipManager from "./TooltipManager";
 const manager = new TooltipManager();
@@ -41,7 +41,7 @@ export class Tooltip {
     /**
      * 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)
+     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
      */
     this.placement = "auto";
     this.guid = `calcite-tooltip-${guid()}`;
@@ -53,6 +53,7 @@ export class Tooltip {
     this.setUpReferenceElement = () => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
+      connectFloatingUI(this, this.effectiveReferenceElement, this.el);
       const { el, referenceElement, effectiveReferenceElement } = this;
       if (referenceElement && !effectiveReferenceElement) {
         console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
@@ -60,7 +61,6 @@ export class Tooltip {
         });
       }
       this.addReferences();
-      this.createPopper();
     };
     this.getId = () => {
       return this.el.id || this.guid;
@@ -96,6 +96,9 @@ export class Tooltip {
   openHandler() {
     this.reposition();
   }
+  overlayPositioningHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -107,6 +110,9 @@ export class Tooltip {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
+  }
   componentWillLoad() {
     this.setUpReferenceElement();
   }
@@ -115,7 +121,7 @@ export class Tooltip {
   }
   disconnectedCallback() {
     this.removeReferences();
-    this.destroyPopper();
+    disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
   }
   // --------------------------------------------------------------------------
   //
@@ -124,16 +130,17 @@ export class Tooltip {
   // --------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, el, placement } = this;
-    const modifiers = this.getModifiers();
-    popper
-      ? await updatePopper({
-        el,
-        modifiers,
-        placement,
-        popper
-      })
-      : this.createPopper();
+    const { el, effectiveReferenceElement, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl } = this;
+    return positionFloatingUI({
+      floatingEl: el,
+      referenceEl: effectiveReferenceElement,
+      overlayPositioning,
+      placement,
+      offsetDistance,
+      offsetSkidding,
+      arrowEl,
+      type: "tooltip"
+    });
   }
   getReferenceElement() {
     const { referenceElement, el } = this;
@@ -141,47 +148,6 @@ export class Tooltip {
       ? queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
-  getModifiers() {
-    const { arrowEl, offsetDistance, offsetSkidding } = this;
-    const arrowModifier = {
-      name: "arrow",
-      enabled: true,
-      options: {
-        element: arrowEl
-      }
-    };
-    const offsetModifier = {
-      name: "offset",
-      enabled: true,
-      options: {
-        offset: [offsetSkidding, offsetDistance]
-      }
-    };
-    const eventListenerModifier = {
-      name: "eventListeners",
-      enabled: this.open
-    };
-    return [arrowModifier, offsetModifier, eventListenerModifier];
-  }
-  createPopper() {
-    this.destroyPopper();
-    const { el, placement, effectiveReferenceElement: referenceEl, overlayPositioning } = this;
-    const modifiers = this.getModifiers();
-    this.popper = createPopper({
-      el,
-      modifiers,
-      placement,
-      overlayPositioning,
-      referenceEl
-    });
-  }
-  destroyPopper() {
-    const { popper } = this;
-    if (popper) {
-      popper.destroy();
-    }
-    this.popper = null;
-  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -193,8 +159,8 @@ export class Tooltip {
     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: {
-          [PopperCSS.animation]: true,
-          [PopperCSS.animationActive]: displayed
+          [FloatingCSS.animation]: true,
+          [FloatingCSS.animationActive]: displayed
         } },
         h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) }),
         h("div", { class: CSS.container },
@@ -310,7 +276,7 @@ export class Tooltip {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -328,12 +294,12 @@ export class Tooltip {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "PopperPlacement",
-        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "original": "LogicalPlacement",
+        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
         "references": {
-          "PopperPlacement": {
+          "LogicalPlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -342,7 +308,7 @@ export class Tooltip {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "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`."
       },
@@ -355,11 +321,11 @@ export class Tooltip {
       "mutable": false,
       "complexType": {
         "original": "ReferenceElement | string",
-        "resolved": "Element | string | ({ getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; })",
+        "resolved": "Element | VirtualElement | string",
         "references": {
           "ReferenceElement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -404,6 +370,9 @@ export class Tooltip {
     }, {
       "propName": "open",
       "methodName": "openHandler"
+    }, {
+      "propName": "overlayPositioning",
+      "methodName": "overlayPositioningHandler"
     }, {
       "propName": "placement",
       "methodName": "placementHandler"

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {

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.86
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop } from "@stencil/core";
 /**

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.86
+ * v1.0.0-beta.87
  */
 export var TreeSelectionMode;
 (function (TreeSelectionMode) {

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {

package/dist/collection/components/tree/tree.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, nodeListToArray } from "../../utils/dom";
@@ -78,18 +78,18 @@ export class Tree {
       this.el.tabIndex = this.getRootTabIndex();
     }
   }
-  onClick(e) {
-    const target = e.target;
+  onClick(event) {
+    const target = event.target;
     const childItems = nodeListToArray(target.querySelectorAll("calcite-tree-item"));
     if (this.child) {
       return;
     }
     if (!this.child) {
-      e.preventDefault();
-      e.stopPropagation();
+      event.preventDefault();
+      event.stopPropagation();
     }
     if (this.selectionMode === TreeSelectionMode.Ancestors && !this.child) {
-      this.updateAncestorTree(e);
+      this.updateAncestorTree(event);
       return;
     }
     const shouldSelect = this.selectionMode !== null &&
@@ -97,7 +97,7 @@ export class Tree {
         (target.hasChildren &&
           (this.selectionMode === TreeSelectionMode.Children ||
             this.selectionMode === TreeSelectionMode.MultiChildren)));
-    const shouldModifyToCurrentSelection = e.detail.modifyCurrentSelection &&
+    const shouldModifyToCurrentSelection = event.detail.modifyCurrentSelection &&
       (this.selectionMode === TreeSelectionMode.Multi ||
         this.selectionMode === TreeSelectionMode.MultiChildren);
     const shouldSelectChildren = this.selectionMode === TreeSelectionMode.MultiChildren ||
@@ -128,14 +128,14 @@ export class Tree {
           }
         });
       }
-      if (shouldExpandTarget && !e.detail.forceToggle) {
+      if (shouldExpandTarget && !event.detail.forceToggle) {
         target.expanded = true;
       }
       if (shouldModifyToCurrentSelection) {
         window.getSelection().removeAllRanges();
       }
       if ((shouldModifyToCurrentSelection && target.selected) ||
-        (shouldSelectChildren && e.detail.forceToggle)) {
+        (shouldSelectChildren && event.detail.forceToggle)) {
         targetItems.forEach((treeItem) => {
           treeItem.selected = false;
         });
@@ -149,7 +149,7 @@ export class Tree {
     this.calciteTreeSelect.emit({
       selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
     });
-    e.stopPropagation();
+    event.stopPropagation();
   }
   keyDownHandler(event) {
     var _a;
@@ -206,8 +206,8 @@ export class Tree {
       }
     }
   }
-  updateAncestorTree(e) {
-    const item = e.target;
+  updateAncestorTree(event) {
+    const item = event.target;
     const children = item.querySelectorAll("calcite-tree-item");
     const ancestors = [];
     let parent = item.parentElement.closest("calcite-tree-item");

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.86
+ * v1.0.0-beta.87
  */
 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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   checkboxLabel: "checkbox-label",