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

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,7 +80,7 @@
 
 :host {
   display: block;
-  max-width: 100%;
+  max-inline-size: 100%;
   cursor: pointer;
   color: var(--calcite-ui-text-3);
 }
@@ -134,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;
@@ -153,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;
@@ -164,7 +164,7 @@
 }
 
 ::slotted(a) {
-  width: 100%;
+  inline-size: 100%;
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
@@ -196,7 +196,7 @@
 
 .children-container {
   position: relative;
-  height: 0px;
+  block-size: 0px;
   overflow: hidden;
   margin-inline-start: 1.25rem;
   transform: scaleY(0);
@@ -207,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.86
+ * 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

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

package/dist/collection/components/value-list/utils.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 { getItemIndex } from "../pick-list/shared-list-logic";
 export function getScreenReaderText(item, status, valueList) {

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;
 }

package/dist/collection/components/value-list/value-list.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 Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";

package/dist/collection/components/value-list-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 ICONS = {
   drag: "drag"

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

@@ -71,15 +71,23 @@
 * 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 {
-  margin-bottom: 1px;
+  margin-block-end: 1px;
   box-sizing: border-box;
   display: flex;
   background-color: var(--calcite-ui-foreground-1);
@@ -117,10 +125,8 @@ calcite-pick-list-item {
   justify-content: center;
   border-style: none;
   background-color: transparent;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
   color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
   outline-color: transparent;
@@ -141,13 +147,6 @@ calcite-pick-list-item {
   color: inherit;
 }
 
-: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 */

package/dist/collection/components/value-list-item/value-list-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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";

package/dist/collection/utils/array.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 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.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 { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";

package/dist/collection/utils/date.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
  */
 /**
  * Check if date is within a min and max

package/dist/collection/utils/dom.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 { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";

package/dist/collection/utils/filter.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 { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {

package/dist/collection/utils/floating-ui.js

@@ -0,0 +1,229 @@
+/*!
+ * 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 { computePosition, arrow, flip, shift, hide, offset, autoPlacement, autoUpdate } from "@floating-ui/dom";
+import { getElementDir } from "./dom";
+export const placements = [
+  "auto",
+  "auto-start",
+  "auto-end",
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "right",
+  "right-start",
+  "right-end",
+  "left",
+  "left-start",
+  "left-end",
+  "leading-start",
+  "leading",
+  "leading-end",
+  "trailing-end",
+  "trailing",
+  "trailing-start"
+];
+export const effectivePlacements = [
+  "top",
+  "bottom",
+  "right",
+  "left",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end"
+];
+export const menuPlacements = ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];
+export const menuEffectivePlacements = [
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end"
+];
+export const flipPlacements = [
+  "top",
+  "bottom",
+  "right",
+  "left",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end"
+];
+export const defaultMenuPlacement = "bottom-start";
+export const FloatingCSS = {
+  animation: "calcite-floating-ui-anim",
+  animationActive: "calcite-floating-ui-anim--active"
+};
+function getMiddleware({ placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
+  const defaultMiddleware = [shift(), hide()];
+  if (type === "menu") {
+    return [
+      ...defaultMiddleware,
+      flip({ fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"] })
+    ];
+  }
+  if (type === "popover" || type === "tooltip") {
+    const middleware = [
+      ...defaultMiddleware,
+      offset({
+        mainAxis: typeof offsetDistance === "number" ? offsetDistance : 0,
+        crossAxis: typeof offsetSkidding === "number" ? offsetSkidding : 0
+      })
+    ];
+    if (placement === "auto" || placement === "auto-start" || placement === "auto-end") {
+      middleware.push(autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null }));
+    }
+    else if (!disableFlip) {
+      middleware.push(flip(flipPlacements ? { fallbackPlacements: flipPlacements } : {}));
+    }
+    if (arrowEl) {
+      middleware.push(arrow({
+        element: arrowEl
+      }));
+    }
+    return middleware;
+  }
+  return [];
+}
+export function filterComputedPlacements(placements, el) {
+  const filteredPlacements = placements.filter((placement) => effectivePlacements.includes(placement));
+  if (filteredPlacements.length !== placements.length) {
+    console.warn(`${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${effectivePlacements
+      .map((placement) => `"${placement}"`)
+      .join(", ")
+      .trim()}`, { el });
+  }
+  return filteredPlacements;
+}
+/*
+In floating-ui, "*-start" and "*-end" are already flipped in RTL.
+There is no need for our "*-leading" and "*-trailing" values anymore.
+https://github.com/floating-ui/floating-ui/issues/1530
+https://github.com/floating-ui/floating-ui/issues/1563
+*/
+export function getEffectivePlacement(floatingEl, placement) {
+  const placements = ["left", "right"];
+  if (getElementDir(floatingEl) === "rtl") {
+    placements.reverse();
+  }
+  return placement
+    .replace(/-leading/gi, "-start")
+    .replace(/-trailing/gi, "-end")
+    .replace(/leading/gi, placements[0])
+    .replace(/trailing/gi, placements[1]);
+}
+/**
+ * Positions the floating element relative to the reference element.
+ *
+ * @param root0
+ * @param root0.referenceEl
+ * @param root0.floatingEl
+ * @param root0.overlayPositioning
+ * @param root0.placement
+ * @param root0.disableFlip
+ * @param root0.flipPlacements
+ * @param root0.offsetDistance
+ * @param root0.offsetSkidding
+ * @param root0.arrowEl
+ * @param root0.type
+ */
+export async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }) {
+  var _a;
+  if (!referenceEl || !floatingEl) {
+    return null;
+  }
+  const { x, y, placement: effectivePlacement, strategy: position, middlewareData } = await computePosition(referenceEl, floatingEl, {
+    strategy: overlayPositioning,
+    placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
+      ? undefined
+      : getEffectivePlacement(floatingEl, placement),
+    middleware: getMiddleware({
+      placement,
+      disableFlip,
+      flipPlacements,
+      offsetDistance,
+      offsetSkidding,
+      arrowEl,
+      type
+    })
+  });
+  if (middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.arrow) {
+    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+    Object.assign(arrowEl.style, {
+      left: arrowX != null ? `${arrowX}px` : "",
+      top: arrowY != null ? `${arrowY}px` : ""
+    });
+  }
+  const referenceHidden = (_a = middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+  const visibility = referenceHidden ? "hidden" : null;
+  const pointerEvents = visibility ? "none" : null;
+  floatingEl.setAttribute("data-placement", effectivePlacement);
+  const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
+  Object.assign(floatingEl.style, {
+    visibility,
+    pointerEvents,
+    position,
+    top: "0",
+    left: "0",
+    transform
+  });
+}
+const cleanupMap = new WeakMap();
+/**
+ * Helper to set up floating element interactions on connectedCallback.
+ *
+ * @param component
+ * @param referenceEl
+ * @param floatingEl
+ */
+export function connectFloatingUI(component, referenceEl, floatingEl) {
+  if (!floatingEl || !referenceEl) {
+    return;
+  }
+  disconnectFloatingUI(component, referenceEl, floatingEl);
+  cleanupMap.set(component, autoUpdate(referenceEl, floatingEl, () => {
+    if (component.open) {
+      component.reposition();
+    }
+  }));
+}
+/**
+ * Helper to tear down floating element interactions on disconnectedCallback.
+ *
+ * @param component
+ * @param referenceEl
+ * @param floatingEl
+ */
+export function disconnectFloatingUI(component, referenceEl, floatingEl) {
+  if (!floatingEl || !referenceEl) {
+    return;
+  }
+  const cleanup = cleanupMap.get(component);
+  if (cleanup) {
+    cleanup();
+  }
+  cleanupMap.delete(component);
+}
+const visiblePointerSize = 4;
+/**
+ * Default offset the position of the floating element away from the reference element.
+ *
+ * @default 6
+ */
+export const defaultOffsetDistance = Math.ceil(Math.hypot(visiblePointerSize, visiblePointerSize));

package/dist/collection/utils/form.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 { closestElementCrossShadowBoundary } from "./dom";
 import { h } from "@stencil/core";

package/dist/collection/utils/globalAttributes.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 { createObserver } from "./observers";
 const allowedGlobalAttributes = ["lang"];

package/dist/collection/utils/guid.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
  */
 function gen(counts) {
   return counts

package/dist/collection/utils/interactive.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
  */
 function noopClick() {
   /** noop */

package/dist/collection/utils/key.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 function isActivationKey(key) {
   return key === "Enter" || key === " ";

package/dist/collection/utils/label.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 { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 /**

package/dist/collection/utils/locale.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 { sanitizeDecimalString, sanitizeExponentialNumberString, isValidNumber, BigDecimal } from "./number";
 export const locales = [