@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
@@ -19,7 +19,7 @@ export class TipManager {
     //
     // --------------------------------------------------------------------------
     /**
-     * Closed state of the `calcite-tip-manager`.
+     * When true, does not display or position the component.
      */
     this.closed = false;
     this.mutationObserver = createObserver("mutation", () => this.setUpTips());
@@ -88,13 +88,13 @@ export class TipManager {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Selects the next tip to display */
+  /** Selects the next `calcite-tip` to display. */
   async nextTip() {
     this.direction = "advancing";
     const nextIndex = this.selectedIndex + 1;
     this.selectedIndex = (nextIndex + this.total) % this.total;
   }
-  /** Selects the previous tip to display */
+  /** Selects the previous `calcite-tip` to display. */
   async previousTip() {
     this.direction = "retreating";
     const previousIndex = this.selectedIndex - 1;
@@ -188,7 +188,7 @@ export class TipManager {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Closed state of the `calcite-tip-manager`."
+        "text": "When true, does not display or position the component."
       },
       "attribute": "closed",
       "reflect": true,
@@ -211,10 +211,10 @@ export class TipManager {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for this component."
+        "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
-      "reflect": false
+      "reflect": true
     },
     "intlClose": {
       "type": "string",
@@ -228,7 +228,7 @@ export class TipManager {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Alternate text for closing the tip."
+        "text": "Accessible name for the component's close button."
       },
       "attribute": "intl-close",
       "reflect": false
@@ -245,7 +245,7 @@ export class TipManager {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The default group title for the `calcite-tip-manager`."
+        "text": "Accessible name for the `calcite-tip-group` title."
       },
       "attribute": "intl-default-title",
       "reflect": false
@@ -262,7 +262,7 @@ export class TipManager {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Alternate text for navigating to the next tip."
+        "text": "Accessible name for navigating to the next tip."
       },
       "attribute": "intl-next",
       "reflect": false
@@ -279,7 +279,7 @@ export class TipManager {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Label that appears on hover of pagination icon."
+        "text": "Text that accompanies the component's pagination."
       },
       "attribute": "intl-pagination-label",
       "reflect": false
@@ -296,7 +296,7 @@ export class TipManager {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Alternate text for navigating to the previous tip."
+        "text": "Accessible name for navigating to the previous tip."
       },
       "attribute": "intl-previous",
       "reflect": false
@@ -318,9 +318,9 @@ export class TipManager {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use calciteTipManagerClose instead."
+            "text": "use \"calciteTipManagerClose\" instead."
           }],
-        "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
+        "text": "Emits when the component has been open or closed."
       },
       "complexType": {
         "original": "void",
@@ -335,7 +335,7 @@ export class TipManager {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the `calcite-tip-manager` has been closed."
+        "text": "Emits when the component has been closed."
       },
       "complexType": {
         "original": "void",
@@ -356,7 +356,7 @@ export class TipManager {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Selects the next tip to display",
+        "text": "Selects the next `calcite-tip` to display.",
         "tags": []
       }
     },
@@ -372,7 +372,7 @@ export class TipManager {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Selects the previous tip to display",
+        "text": "Selects the previous `calcite-tip` to display.",
         "tags": []
       }
     }

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

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

@@ -1,14 +1,15 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 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 { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance } from "../../utils/floating-ui";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, repositionDebounceTimeout } 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.
@@ -50,17 +51,19 @@ export class Tooltip {
      */
     this.placement = "auto";
     this.guid = `calcite-tooltip-${guid()}`;
+    this.hasLoaded = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.setUpReferenceElement = () => {
+    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
+    this.setUpReferenceElement = (warn = true) => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
       connectFloatingUI(this, this.effectiveReferenceElement, this.el);
       const { el, referenceElement, effectiveReferenceElement } = this;
-      if (referenceElement && !effectiveReferenceElement) {
+      if (warn && referenceElement && !effectiveReferenceElement) {
         console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
           el
         });
@@ -93,19 +96,19 @@ export class Tooltip {
     };
   }
   offsetDistanceOffsetHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   offsetSkiddingHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   openHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   overlayPositioningHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   placementHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
@@ -116,13 +119,14 @@ export class Tooltip {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
-  }
-  componentWillLoad() {
-    this.setUpReferenceElement();
+    this.setUpReferenceElement(this.hasLoaded);
   }
   componentDidLoad() {
-    this.reposition();
+    if (this.referenceElement && !this.effectiveReferenceElement) {
+      this.setUpReferenceElement();
+    }
+    this.debouncedReposition();
+    this.hasLoaded = true;
   }
   disconnectedCallback() {
     this.removeReferences();
@@ -195,7 +199,7 @@ export class Tooltip {
         "text": "Closes the component when the `referenceElement` is clicked."
       },
       "attribute": "close-on-click",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "label": {
@@ -292,7 +296,7 @@ export class Tooltip {
         "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\"."
       },
       "attribute": "overlay-positioning",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"absolute\""
     },
     "placement": {

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.92
+ * v1.0.0-beta.94
  */
 import { Component, h, Prop } from "@stencil/core";
 /**
@@ -57,7 +57,7 @@ export class TooltipManager {
         "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": false,
+      "reflect": true,
       "defaultValue": "\"[data-calcite-tooltip-reference]\""
     }
   }; }

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

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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";

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

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

@@ -85,10 +85,6 @@
   color: var(--calcite-ui-text-3);
 }
 
-:host([selection-mode=none]:not([has-children])) .node-container {
-  margin-inline: 0.75rem;
-}
-
 :host([calcite-hydrated-hidden]) {
   visibility: hidden !important;
   pointer-events: none;
@@ -250,6 +246,16 @@
   color: var(--calcite-ui-brand);
 }
 
+:host([selection-mode=none]:not([has-children])):host([scale=s]) > .node-container {
+  padding-inline-start: 0.5rem;
+}
+:host([selection-mode=none]:not([has-children])):host([scale=m]) > .node-container {
+  padding-inline-start: 1rem;
+}
+:host([selection-mode=none]:not([has-children])):host([scale=l]) > .node-container {
+  padding-inline-start: 1.5rem;
+}
+
 :host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }

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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
@@ -121,6 +121,7 @@ export class TreeItem {
       this.selectionMode === TreeSelectionMode.Children;
     const showCheckmark = this.selectionMode === TreeSelectionMode.Multi ||
       this.selectionMode === TreeSelectionMode.MultiChildren;
+    const showBlank = this.selectionMode === TreeSelectionMode.None && !this.hasChildren;
     const chevron = this.hasChildren ? (h("calcite-icon", { class: {
         [CSS.chevron]: true,
         [CSS_UTILITY.rtl]: rtl
@@ -133,7 +134,9 @@ export class TreeItem {
       ? ICONS.bulletPoint
       : showCheckmark
         ? ICONS.checkmark
-        : null;
+        : showBlank
+          ? ICONS.blank
+          : null;
     const itemIndicator = selectedIcon ? (h("calcite-icon", { class: {
         [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
         [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,

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.92
+ * v1.0.0-beta.94
  */
 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.92
+ * v1.0.0-beta.94
  */
 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.92
+ * v1.0.0-beta.94
  */
 import { getItemIndex } from "../pick-list/shared-list-logic";
 export function getScreenReaderText(item, status, valueList) {

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.92
+ * v1.0.0-beta.94
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
@@ -326,7 +326,7 @@ export class ValueList {
         "text": "The component's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
       },
       "attribute": "group",
-      "reflect": false
+      "reflect": true
     },
     "loading": {
       "type": "boolean",
@@ -379,7 +379,7 @@ export class ValueList {
         "text": "When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard."
       },
       "attribute": "selection-follows-focus",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "intlDragHandleIdle": {

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.92
+ * v1.0.0-beta.94
  */
 export const ICONS = {
   drag: "drag"

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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";

package/dist/collection/demos/_assets/demo-dom-swapper.js

@@ -0,0 +1,45 @@
+/**
+ * This component helps test existing components work when encapsulated in another component's shadow DOM.
+ *
+ * Demo pages should set this component as the root, under `<body>`
+ *
+ * Note:* due to style encapsulation, demo styles need to be a child of the component
+ */
+class DomSwapper extends HTMLElement {
+    constructor() {
+        super();
+        this._context = "light";
+        const shadow = this.attachShadow({ mode: "open" });
+        const slot = document.createElement("slot");
+        shadow.append(slot);
+        this._slot = slot;
+    }
+    get context() {
+        return this._context;
+    }
+    set context(value) {
+        this._context = value;
+    }
+    /**
+     * moves content between light and shadow DOM
+     *
+     * @param context
+     */
+    moveTo(context) {
+        if (context === "light") {
+            this.append(...Array.from(this.shadowRoot.children).filter((node) => node !== this._slot));
+            this._context = "light";
+        }
+        else {
+            if (!this._headStyles) {
+                this._headStyles = this.recreateDemoStyle();
+            }
+            this.shadowRoot.append(...this._headStyles, ...this.shadowRoot.querySelector("slot").assignedNodes());
+            this._context = "shadow";
+        }
+    }
+    recreateDemoStyle() {
+        return Array.from(document.querySelectorAll("head style:not([data-styles]), head link[rel=stylesheet]")).map((style) => style.cloneNode(true));
+    }
+}
+customElements.define("demo-dom-swapper", DomSwapper);

package/dist/collection/demos/_assets/demo-spacer.js

@@ -0,0 +1,17 @@
+class DemoSpacer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+          <style>
+            :host {
+              display: grid;
+              grid-template-columns: 1fr;
+              grid-gap: ${this.getAttribute("gap") || "12px"};
+            }
+          </style>
+          <slot></slot>
+        `;
+    }
+}
+customElements.define("demo-spacer", DemoSpacer);

package/dist/collection/demos/_assets/demo-template.js

@@ -0,0 +1,24 @@
+const toggleDir = () => {
+    document.dir = document.dir === "rtl" ? "ltr" : "rtl";
+};
+const toggleTheme = () => {
+    document.body.classList.toggle("calcite-theme-dark");
+};
+const toggleDom = (event) => {
+    const mover = document.querySelector("demo-dom-swapper");
+    const switchEl = event.currentTarget;
+    if (switchEl.checked) {
+        mover.moveTo("shadow");
+    }
+    else {
+        mover.moveTo("light");
+    }
+};
+const loadDemoToggles = () => {
+    document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
+    document.getElementById("demo-heading").textContent = document.title;
+    document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
+    document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
+    document.getElementById("toggle-dom").addEventListener("calciteSwitchChange", toggleDom);
+};
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();

package/dist/collection/demos/_assets/head.js

@@ -0,0 +1,48 @@
+(() => {
+    const DEMO_ROOT = "demos";
+    const ASSETS_PATH = "demos/_assets";
+    const CSS = [`${ASSETS_PATH}/demos.css`, "build/calcite.css"];
+    const urlParams = new URLSearchParams(window.location.search);
+    const DISABLE_HEADER_URL_PARAM = "header-disabled";
+    const SCRIPTS = [
+        {
+            src: "build/calcite.esm.js",
+            type: "module"
+        },
+        {
+            src: "demos/_assets/demo-dom-swapper.js"
+        }
+    ];
+    const parseTemplate = (text) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(text, "text/html");
+        return doc.head.querySelector("template");
+    };
+    const loadHeader = async () => {
+        const root = window.location.pathname.split(DEMO_ROOT).shift();
+        const response = await window.fetch(`${root}${ASSETS_PATH}/demo-template.html`);
+        const text = await response.text();
+        const template = parseTemplate(text);
+        const firstChild = document.body.firstChild;
+        firstChild && document.body.insertBefore(template.content, firstChild);
+    };
+    if (window.location.pathname.includes("/demos/") && !urlParams.has(DISABLE_HEADER_URL_PARAM)) {
+        document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadHeader) : loadHeader();
+    }
+    const ROOT = window.location.pathname.split(DEMO_ROOT).shift();
+    function loadCss(url) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = ROOT + url;
+        document.head.appendChild(link);
+    }
+    function loadScript(script) {
+        const scriptElement = document.createElement("script");
+        Object.keys(script).forEach((key) => {
+            scriptElement[key] = key === "src" ? ROOT + script[key] : script[key];
+        });
+        document.head.appendChild(scriptElement);
+    }
+    CSS.forEach(loadCss);
+    SCRIPTS.forEach(loadScript);
+})();