@esri/calcite-components 1.4.0-next.0 → 1.4.0-next.10

package/dist/cjs/calcite-tooltip.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.0
+ * v1.4.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8eb869ae.js');
-const dom = require('./dom-aa42bfcf.js');
-const floatingUi = require('./floating-ui-681123a5.js');
-const guid = require('./guid-00be0e24.js');
-const openCloseComponent = require('./openCloseComponent-9ad26303.js');
-const FloatingArrow = require('./FloatingArrow-2721f8fc.js');
-require('./resources-0e53773f.js');
-require('./debounce-b4f960bc.js');
+const index = require('./index-7ff03af4.js');
+const dom = require('./dom-60bc41cc.js');
+const floatingUi = require('./floating-ui-eea897d6.js');
+const guid = require('./guid-20fbb6f5.js');
+const openCloseComponent = require('./openCloseComponent-02cae5bf.js');
+const FloatingArrow = require('./FloatingArrow-cf108924.js');
+require('./resources-ebef8fc8.js');
+require('./debounce-a5772547.js');
 
 const CSS = {
   container: "container"
@@ -37,6 +37,9 @@ class TooltipManager {
     // --------------------------------------------------------------------------
     this.registeredElements = new WeakMap();
     this.hoverTimeout = null;
+    this.hoveredTooltip = null;
+    this.clickedTooltip = null;
+    this.activeTooltip = null;
     this.registeredElementCount = 0;
     // --------------------------------------------------------------------------
     //
@@ -50,36 +53,38 @@ class TooltipManager {
     };
     this.keyDownHandler = (event) => {
       if (event.key === "Escape" && !event.defaultPrevented) {
-        const { activeTooltipEl } = this;
-        if (activeTooltipEl && activeTooltipEl.open) {
+        const { activeTooltip } = this;
+        if (activeTooltip?.open) {
           this.clearHoverTimeout();
-          this.toggleTooltip(activeTooltipEl, false);
-          const referenceElement = getEffectiveReferenceElement(activeTooltipEl);
+          this.closeExistingTooltip();
+          const referenceElement = getEffectiveReferenceElement(activeTooltip);
           if (referenceElement instanceof Element && referenceElement.contains(event.target)) {
             event.preventDefault();
           }
         }
       }
     };
-    this.queryHoveredTooltip = (composedPath) => {
-      const { activeTooltipEl } = this;
-      if (activeTooltipEl && composedPath.includes(activeTooltipEl)) {
+    this.pointerMoveHandler = (event) => {
+      const composedPath = event.composedPath();
+      const { activeTooltip } = this;
+      const hoveringActiveTooltip = activeTooltip?.open && composedPath.includes(activeTooltip);
+      if (hoveringActiveTooltip) {
         this.clearHoverTimeout();
         return;
       }
       const tooltip = this.queryTooltip(composedPath);
+      this.hoveredTooltip = tooltip;
+      if (this.isClosableClickedTooltip(tooltip)) {
+        return;
+      }
+      this.clickedTooltip = null;
       if (tooltip) {
         this.toggleHoveredTooltip(tooltip, true);
       }
-      else if (activeTooltipEl) {
-        this.toggleHoveredTooltip(activeTooltipEl, false);
+      else if (activeTooltip) {
+        this.toggleHoveredTooltip(activeTooltip, false);
       }
     };
-    this.pointerMoveHandler = (event) => {
-      const composedPath = event.composedPath();
-      this.clearHoverTimeout();
-      this.hoverTimeout = window.setTimeout(() => this.queryHoveredTooltip(composedPath), TOOLTIP_DELAY_MS );
-    };
     this.pointerDownHandler = (event) => {
       if (!dom.isPrimaryPointerButton(event)) {
         return;
@@ -98,10 +103,16 @@ class TooltipManager {
       this.queryFocusedTooltip(event, false);
     };
     this.toggleHoveredTooltip = (tooltip, value) => {
-      if (value) {
+      this.hoverTimeout = window.setTimeout(() => {
+        if (this.hoverTimeout === null) {
+          return;
+        }
         this.closeExistingTooltip();
-      }
-      this.toggleTooltip(tooltip, value);
+        if (tooltip !== this.hoveredTooltip) {
+          return;
+        }
+        this.toggleTooltip(tooltip, value);
+      }, TOOLTIP_DELAY_MS);
     };
   }
   // --------------------------------------------------------------------------
@@ -140,11 +151,12 @@ class TooltipManager {
   }
   clearHoverTimeout() {
     window.clearTimeout(this.hoverTimeout);
+    this.hoverTimeout = null;
   }
   closeExistingTooltip() {
-    const { activeTooltipEl } = this;
-    if (activeTooltipEl) {
-      this.toggleTooltip(activeTooltipEl, false);
+    const { activeTooltip } = this;
+    if (activeTooltip?.open) {
+      this.toggleTooltip(activeTooltip, false);
     }
   }
   toggleFocusedTooltip(tooltip, value) {
@@ -157,17 +169,19 @@ class TooltipManager {
   toggleTooltip(tooltip, value) {
     tooltip.open = value;
     if (value) {
-      this.activeTooltipEl = tooltip;
+      this.activeTooltip = tooltip;
     }
   }
   queryFocusedTooltip(event, value) {
     const tooltip = this.queryTooltip(event.composedPath());
-    if (!tooltip || tooltip === this.clickedTooltip) {
-      this.clickedTooltip = null;
+    if (!tooltip || this.isClosableClickedTooltip(tooltip)) {
       return;
     }
     this.toggleFocusedTooltip(tooltip, value);
   }
+  isClosableClickedTooltip(tooltip) {
+    return tooltip?.closeOnClick && tooltip === this.clickedTooltip;
+  }
 }
 
 const tooltipCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{--calcite-floating-ui-z-index:var(--calcite-tooltip-z-index, 901);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:-1;fill:var(--calcite-ui-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-ui-border-3)}.container{position:relative;overflow:hidden;border-radius:0.25rem;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-inline-size:20rem;max-block-size:20rem;text-align:start}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";

package/dist/cjs/calcite-tree_2.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.0
+ * v1.4.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8eb869ae.js');
-const dom = require('./dom-aa42bfcf.js');
-const conditionalSlot = require('./conditionalSlot-229cfc41.js');
-const interactive = require('./interactive-2287fde4.js');
-const openCloseComponent = require('./openCloseComponent-9ad26303.js');
-const resources = require('./resources-0e53773f.js');
-require('./guid-00be0e24.js');
-require('./observers-2ab1ae0b.js');
+const index = require('./index-7ff03af4.js');
+const dom = require('./dom-60bc41cc.js');
+const conditionalSlot = require('./conditionalSlot-f5ae40d5.js');
+const interactive = require('./interactive-e756405a.js');
+const openCloseComponent = require('./openCloseComponent-02cae5bf.js');
+const resources = require('./resources-ebef8fc8.js');
+require('./guid-20fbb6f5.js');
+require('./observers-c0279726.js');
 
 function isTreeItem(element) {
   return element?.matches("calcite-tree-item");
@@ -105,26 +105,24 @@ const Tree = class {
       (!target.hasChildren ||
         (target.hasChildren &&
           (this.selectionMode === "children" || this.selectionMode === "multichildren")));
+    const shouldDeselectAllChildren = this.selectionMode === "multichildren" && target.hasChildren;
     const shouldModifyToCurrentSelection = !isNoneSelectionMode &&
       event.detail.modifyCurrentSelection &&
       (this.selectionMode === "multiple" || this.selectionMode === "multichildren");
-    const shouldSelectChildren = this.selectionMode === "multichildren" || this.selectionMode === "children";
     const shouldClearCurrentSelection = !shouldModifyToCurrentSelection &&
       (((this.selectionMode === "single" || this.selectionMode === "multiple") &&
         childItems.length <= 0) ||
         this.selectionMode === "children" ||
         this.selectionMode === "multichildren");
-    const shouldExpandTarget = this.selectionMode === "children" || this.selectionMode === "multichildren";
+    const shouldUpdateExpand = ["children", "multichildren"].includes(this.selectionMode) ||
+      (["single", "multiple"].includes(this.selectionMode) &&
+        target.hasChildren &&
+        !event.detail.forceToggle);
     if (!this.child) {
       const targetItems = [];
       if (shouldSelect) {
         targetItems.push(target);
       }
-      if (shouldSelectChildren) {
-        childItems.forEach((treeItem) => {
-          targetItems.push(treeItem);
-        });
-      }
       if (shouldClearCurrentSelection) {
         const selectedItems = dom.nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
         selectedItems.forEach((treeItem) => {
@@ -133,14 +131,29 @@ const Tree = class {
           }
         });
       }
-      if (shouldExpandTarget && !event.detail.forceToggle) {
-        target.expanded = true;
+      if (shouldUpdateExpand) {
+        if (["single", "multiple"].includes(this.selectionMode)) {
+          target.expanded = !target.expanded;
+        }
+        else if (this.selectionMode === "multichildren") {
+          target.expanded = !target.selected;
+        }
+        else if (this.selectionMode === "children") {
+          target.expanded = target.selected ? !target.expanded : true;
+        }
+      }
+      if (shouldDeselectAllChildren) {
+        childItems.forEach((item) => {
+          item.selected = false;
+          if (item.hasChildren) {
+            item.expanded = false;
+          }
+        });
       }
       if (shouldModifyToCurrentSelection) {
         window.getSelection().removeAllRanges();
       }
-      if ((shouldModifyToCurrentSelection && target.selected) ||
-        (shouldSelectChildren && event.detail.forceToggle)) {
+      if ((shouldModifyToCurrentSelection && target.selected) || event.detail.forceToggle) {
         targetItems.forEach((treeItem) => {
           if (!treeItem.disabled) {
             treeItem.selected = false;
@@ -317,11 +330,6 @@ const TreeItem = class {
       this.expanded = !this.expanded;
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.updateParentIsExpanded = (el, expanded) => {
       const items = dom.getSlotted(el, SLOTS.children, {
         all: true,
@@ -462,7 +470,7 @@ const TreeItem = class {
         [resources.CSS_UTILITY.rtl]: rtl
       }, "data-selection-mode": this.selectionMode,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), index.h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode)), index.h("div", { class: {
+      ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), index.h("div", { class: CSS.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), index.h("div", { class: {
         [CSS.childrenContainer]: true,
         [resources.CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined,
@@ -478,7 +486,7 @@ const TreeItem = class {
   //
   //--------------------------------------------------------------------------
   onClick(event) {
-    if (this.disabled) {
+    if (this.disabled || this.isActionEndEvent(event)) {
       return;
     }
     // Solve for if the item is clicked somewhere outside the slotted anchor.
@@ -495,6 +503,9 @@ const TreeItem = class {
   }
   keyDownHandler(event) {
     let root;
+    if (this.isActionEndEvent(event)) {
+      return;
+    }
     switch (event.key) {
       case " ":
         if (this.selectionMode === "none") {
@@ -541,6 +552,15 @@ const TreeItem = class {
         break;
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  isActionEndEvent(event) {
+    const composedPath = event.composedPath();
+    return composedPath.includes(this.actionSlotWrapper);
+  }
   /**
    * This is meant to be called in `componentDidLoad` in order to take advantage of the hierarchical component lifecycle
    * and help check for item selection as items are initialized

package/dist/cjs/calcite-value-list_2.cjs.entry.js

@@ -1,27 +1,27 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.0
+ * v1.4.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8eb869ae.js');
-const sortable_esm = require('./sortable.esm-b85af44a.js');
-const interactive = require('./interactive-2287fde4.js');
-const loadable = require('./loadable-68686b66.js');
-const locale = require('./locale-c1aecec9.js');
-const observers = require('./observers-2ab1ae0b.js');
-const t9n = require('./t9n-c3de7794.js');
-const resources = require('./resources-5c51a6fd.js');
-const conditionalSlot = require('./conditionalSlot-229cfc41.js');
-const dom = require('./dom-aa42bfcf.js');
-const guid = require('./guid-00be0e24.js');
-require('./key-a8c7ee49.js');
-require('./array-576d7912.js');
-require('./debounce-b4f960bc.js');
-require('./resources-0e53773f.js');
+const index = require('./index-7ff03af4.js');
+const sortable_esm = require('./sortable.esm-4549097b.js');
+const interactive = require('./interactive-e756405a.js');
+const loadable = require('./loadable-43aa8e12.js');
+const locale = require('./locale-352dde9f.js');
+const observers = require('./observers-c0279726.js');
+const t9n = require('./t9n-6dbfaf2b.js');
+const resources = require('./resources-4097e6e6.js');
+const conditionalSlot = require('./conditionalSlot-f5ae40d5.js');
+const dom = require('./dom-60bc41cc.js');
+const guid = require('./guid-20fbb6f5.js');
+require('./key-965a0499.js');
+require('./array-2726dfca.js');
+require('./debounce-a5772547.js');
+require('./resources-ebef8fc8.js');
 
 const CSS = {
   container: "container",