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

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.84
+ * 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.84
+ * 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.84
+ * 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]) {
@@ -80,6 +80,9 @@
 
 :host {
   display: block;
+}
+
+:host(:focus) {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }

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

package/dist/collection/components/tree-item/tree-item.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]) {
@@ -80,11 +80,9 @@
 
 :host {
   display: block;
-  max-width: 100%;
+  max-inline-size: 100%;
   cursor: pointer;
   color: var(--calcite-ui-text-3);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
 }
 
 :host([calcite-hydrated-hidden]) {
@@ -136,15 +134,15 @@
 
 :host([lines]) .children-container:after {
   position: absolute;
-  top: 0px;
-  width: 1px;
+  inset-block-start: 0px;
+  inline-size: 1px;
   transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   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: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  height: 96%;
+  block-size: 96%;
   content: "";
   background-color: var(--calcite-ui-border-2);
   z-index: -1;
@@ -155,8 +153,8 @@
 }
 
 ::slotted(*) {
-  min-width: 0px;
-  max-width: 100%;
+  min-inline-size: 0px;
+  max-inline-size: 100%;
   overflow-wrap: break-word;
   color: inherit;
   text-decoration: none !important;
@@ -166,7 +164,7 @@
 }
 
 ::slotted(a) {
-  width: 100%;
+  inline-size: 100%;
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
@@ -176,13 +174,12 @@
 }
 
 :host(:focus) {
+  outline: 2px solid transparent;
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
 .checkbox {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   line-height: 0;
 }
 
@@ -192,9 +189,14 @@
   align-items: center;
 }
 
+.checkbox:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .children-container {
   position: relative;
-  height: 0px;
+  block-size: 0px;
   overflow: hidden;
   margin-inline-start: 1.25rem;
   transform: scaleY(0);
@@ -205,14 +207,15 @@
 :host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
-  height: auto;
+  block-size: auto;
 }
 
 .node-container {
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--calcite-tree-padding-y) 0;
+  padding-block: var(--calcite-tree-padding-y);
+  padding-inline: 0;
 }
 .node-container .checkmark, 
 .node-container .bullet-point {

package/dist/collection/components/tree-item/tree-item.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.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
@@ -159,11 +159,11 @@ export class TreeItem {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  onClick(e) {
+  onClick(event) {
     // Solve for if the item is clicked somewhere outside the slotted anchor.
     // Anchor is triggered anywhere you click
     const [link] = filterDirectChildren(this.el, "a");
-    if (link && e.composedPath()[0].tagName.toLowerCase() !== "a") {
+    if (link && event.composedPath()[0].tagName.toLowerCase() !== "a") {
       const target = link.target === "" ? "_self" : link.target;
       window.open(link.href, target);
     }
@@ -172,19 +172,19 @@ export class TreeItem {
       forceToggle: false
     });
   }
-  keyDownHandler(e) {
+  keyDownHandler(event) {
     let root;
-    switch (e.key) {
+    switch (event.key) {
       case " ":
         this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
-        e.preventDefault();
+        event.preventDefault();
         break;
       case "Enter":
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
-        const link = nodeListToArray(this.el.children).find((e) => e.matches("a"));
+        const link = nodeListToArray(this.el.children).find((el) => el.matches("a"));
         if (link) {
           link.click();
           this.selected = true;
@@ -195,7 +195,7 @@ export class TreeItem {
             forceToggle: false
           });
         }
-        e.preventDefault();
+        event.preventDefault();
         break;
       case "Home":
         root = this.el.closest("calcite-tree:not([child])");
@@ -205,10 +205,10 @@ export class TreeItem {
       case "End":
         root = this.el.closest("calcite-tree:not([child])");
         let currentNode = root.children[root.children.length - 1]; // last child
-        let currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
+        let currentTree = nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
         while (currentTree) {
           currentNode = currentTree.children[root.children.length - 1];
-          currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
+          currentTree = nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
         }
         currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
         break;

package/dist/collection/components/value-list/interfaces.js

@@ -0,0 +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.87
+ */
+export {};

package/dist/collection/components/value-list/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.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/value-list/utils.js

@@ -0,0 +1,49 @@
+/*!
+ * 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.87
+ */
+import { getItemIndex } from "../pick-list/shared-list-logic";
+export function getScreenReaderText(item, status, valueList) {
+  const { items, intlDragHandleIdle, intlDragHandleActive, intlDragHandleChange, intlDragHandleCommit } = valueList;
+  const total = items.length;
+  const position = getItemIndex(valueList, item) + 1;
+  if (status === "idle") {
+    const idleText = intlDragHandleIdle
+      ? replacePlaceholders(intlDragHandleIdle, item.label, position, total)
+      : `${item.label}, press space and use arrow keys to reorder content. Current position ${position} of ${total}.`;
+    return idleText;
+  }
+  else if (status === "active") {
+    const activeText = intlDragHandleActive
+      ? replacePlaceholders(intlDragHandleActive, item.label, position, total)
+      : `Reordering ${item.label}, current position ${position} of ${total}.`;
+    return activeText;
+  }
+  else if (status === "change") {
+    const changeText = intlDragHandleChange
+      ? replacePlaceholders(intlDragHandleChange, item.label, position, total)
+      : `${item.label}, new position ${position} of ${total}. Press space to confirm.`;
+    return changeText;
+  }
+  else {
+    const commitText = intlDragHandleCommit
+      ? replacePlaceholders(intlDragHandleCommit, item.label, position, total)
+      : `${item.label}, current position ${position} of ${total}.`;
+    return commitText;
+  }
+}
+export function getHandleAndItemElement(event) {
+  const handle = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+  const item = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+  return { handle, item };
+}
+export function replacePlaceholders(text, label, position, total) {
+  const replacePosition = text.replace("${position}", position.toString());
+  const replaceLabel = replacePosition.replace("${item.label}", label);
+  return replaceLabel.replace("${total}", total.toString());
+}

package/dist/collection/components/value-list/value-list.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host {
   position: relative;
   box-sizing: border-box;
@@ -94,13 +102,6 @@
   box-sizing: border-box;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -114,7 +115,7 @@ calcite-value-list-item:last-of-type {
 }
 
 :host([filter-enabled]) header {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -125,10 +126,10 @@ calcite-value-list-item:last-of-type {
 }
 :host([filter-enabled]) header.sticky-pos {
   position: sticky;
-  top: 0px;
+  inset-block-start: 0px;
   z-index: 10;
 }
 
 calcite-filter {
-  margin-bottom: 1px;
+  margin-block-end: 1px;
 }