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

package/dist/collection/components/popover/popover.js

@@ -1,14 +1,16 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
-import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, POPOVER_REFERENCE, TEXT, defaultPopoverPlacement } from "./resources";
+import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS, filterComputedPlacements } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { queryElementRoots } from "../../utils/dom";
+import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
+import PopoverManager from "./PopoverManager";
+const manager = new PopoverManager();
 /**
  * @slot - A slot for adding custom content.
  */
@@ -20,43 +22,56 @@ export class Popover {
     //
     // --------------------------------------------------------------------------
     /**
-     * Display a close button within the Popover.
+     * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
+     */
+    this.autoClose = false;
+    /**
+     * When true, a close button is added to the component.
+     *
      * @deprecated use dismissible instead.
      */
     this.closeButton = false;
     /**
-     * Display a close button within the Popover.
+     * When true, a close button is added to the component.
      */
     this.dismissible = false;
     /**
-     * Prevents flipping the popover's placement when it starts to overlap its reference element.
+     * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
      */
     this.disableFlip = false;
     /**
-     * Removes the caret pointer.
+     * When true, removes the caret pointer.
      */
     this.disablePointer = false;
     /**
-     * Offset the position of the popover away from the reference element.
+     * Offsets the position of the popover away from the `referenceElement`.
+     *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offset the position of the popover along the reference element.
+     * Offsets the position of the popover along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * Display and position the component.
+     * When true, displays and positions the component.
      */
     this.open = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
     this.overlayPositioning = "absolute";
     /**
-     * Determines where the component will be positioned relative to the referenceElement.
+     * 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)
      */
     this.placement = defaultPopoverPlacement;
-    /** Text for close button.
+    /**
+     * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
+     */
+    this.triggerDisabled = false;
+    /**
+     * Accessible name for the component's close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.close;
@@ -93,7 +108,9 @@ export class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.setAttribute(ARIA_EXPANDED, open.toString());
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
+      }
     };
     this.addReferences = () => {
       const { effectiveReferenceElement } = this;
@@ -101,8 +118,10 @@ export class Popover {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(POPOVER_REFERENCE, id);
-      effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      }
+      manager.registerElement(effectiveReferenceElement, this.el);
       this.setExpandedAttr();
     };
     this.removeReferences = () => {
@@ -110,9 +129,11 @@ export class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(POPOVER_REFERENCE);
-      effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
-      effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      if ("removeAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
+        effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      }
+      manager.unregisterElement(effectiveReferenceElement);
     };
     this.hide = () => {
       this.open = false;
@@ -178,7 +199,11 @@ export class Popover {
       })
       : this.createPopper();
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -189,7 +214,11 @@ export class Popover {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  /** Toggles the popover's open property. */
+  /**
+   * Toggles the component's open property.
+   *
+   * @param value
+   */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -257,10 +286,10 @@ export class Popover {
   //
   // --------------------------------------------------------------------------
   renderCloseButton() {
-    const { dismissible, closeButton, intlClose } = this;
+    const { dismissible, closeButton, intlClose, heading } = this;
     return dismissible || closeButton ? (h("div", { class: CSS.closeButtonContainer },
-      h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose },
-        h("calcite-icon", { icon: "x", scale: "m" })))) : null;
+      h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: heading ? "s" : "m", text: intlClose },
+        h("calcite-icon", { icon: "x", scale: heading ? "s" : "m" })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
@@ -274,7 +303,7 @@ export class Popover {
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
-    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
       h("div", { class: {
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
@@ -298,6 +327,24 @@ export class Popover {
     "$": ["popover.css"]
   }; }
   static get properties() { return {
+    "autoClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true and clicking outside of the component, automatically closes open `calcite-popover`s."
+      },
+      "attribute": "auto-close",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "closeButton": {
       "type": "boolean",
       "mutable": false,
@@ -313,7 +360,7 @@ export class Popover {
             "name": "deprecated",
             "text": "use dismissible instead."
           }],
-        "text": "Display a close button within the Popover."
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "close-button",
       "reflect": true,
@@ -331,7 +378,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display a close button within the Popover."
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
@@ -349,7 +396,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Prevents flipping the popover's placement when it starts to overlap its reference element."
+        "text": "When true, prevents flipping the component's placement when overlapping its `referenceElement`."
       },
       "attribute": "disable-flip",
       "reflect": true,
@@ -367,7 +414,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Removes the caret pointer."
+        "text": "When true, removes the caret pointer."
       },
       "attribute": "disable-pointer",
       "reflect": true,
@@ -405,7 +452,7 @@ export class Popover {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Heading text."
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -427,7 +474,7 @@ export class Popover {
       "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
@@ -444,7 +491,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -464,7 +511,7 @@ export class Popover {
             "name": "default",
             "text": "6"
           }],
-        "text": "Offset the position of the popover away from the reference element."
+        "text": "Offsets the position of the popover away from the `referenceElement`."
       },
       "attribute": "offset-distance",
       "reflect": true,
@@ -482,7 +529,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Offset the position of the popover along the reference element."
+        "text": "Offsets the position of the popover along the `referenceElement`."
       },
       "attribute": "offset-skidding",
       "reflect": true,
@@ -500,7 +547,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display and position the component."
+        "text": "When true, displays and positions the component."
       },
       "attribute": "open",
       "reflect": true,
@@ -523,7 +570,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the \"fixed\" value."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -549,7 +596,7 @@ export class Popover {
             "name": "see",
             "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
-        "text": "Determines where the component will be positioned relative to the referenceElement."
+        "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
       "attribute": "placement",
       "reflect": true,
@@ -559,11 +606,12 @@ export class Popover {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "HTMLElement | string",
-        "resolved": "HTMLElement | string",
+        "original": "ReferenceElement | string",
+        "resolved": "Element | string | ({ getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; })",
         "references": {
-          "HTMLElement": {
-            "location": "global"
+          "ReferenceElement": {
+            "location": "import",
+            "path": "../../utils/popper"
           }
         }
       },
@@ -571,11 +619,29 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement."
+        "text": "The `referenceElement` used to position the component according to its \"placement\" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used."
       },
       "attribute": "reference-element",
       "reflect": false
     },
+    "triggerDisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to \"true\" to manage when a popover is open."
+      },
+      "attribute": "trigger-disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "intlClose": {
       "type": "string",
       "mutable": false,
@@ -591,7 +657,7 @@ export class Popover {
             "name": "default",
             "text": "\"Close\""
           }],
-        "text": "Text for close button."
+        "text": "Accessible name for the component's close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -609,7 +675,7 @@ export class Popover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the popover is closed"
+        "text": "Fired when the component is closed."
       },
       "complexType": {
         "original": "any",
@@ -624,7 +690,7 @@ export class Popover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the popover is opened"
+        "text": "Fired when the component is opened."
       },
       "complexType": {
         "original": "any",
@@ -653,7 +719,10 @@ export class Popover {
       "complexType": {
         "signature": "(focusId?: \"close-button\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -665,14 +734,20 @@ export class Popover {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     },
     "toggle": {
       "complexType": {
         "signature": "(value?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "value"
+              }],
             "text": ""
           }],
         "references": {
@@ -683,8 +758,11 @@ export class Popover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Toggles the popover's open property.",
-        "tags": []
+        "text": "Toggles the component's open property.",
+        "tags": [{
+            "name": "param",
+            "text": "value"
+          }]
       }
     }
   }; }

package/dist/collection/components/popover/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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   container: "container",
@@ -19,7 +19,6 @@ export const TEXT = {
   close: "Close"
 };
 export const defaultPopoverPlacement = "auto";
-export const POPOVER_REFERENCE = "data-calcite-popover-reference";
 export const ARIA_CONTROLS = "aria-controls";
 export const ARIA_EXPANDED = "aria-expanded";
 export const HEADING_LEVEL = 2;

package/dist/collection/components/popover-manager/popover-manager.js

@@ -1,16 +1,17 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
-import { Component, Element, h, Listen, Prop } from "@stencil/core";
-import { POPOVER_REFERENCE } from "../popover/resources";
-import { queryElementRoots, queryElementsRoots } from "../../utils/dom";
+import { Component, h, Prop, Element, Watch } from "@stencil/core";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.
+ * @deprecated No longer required for popover usage.
  */
 export class PopoverManager {
   constructor() {
+    this.mutationObserver = createObserver("mutation", () => this.setAutoClose());
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -18,30 +19,31 @@ export class PopoverManager {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+     *
      * @default `[data-calcite-popover-reference]`
      */
-    this.selector = `[${POPOVER_REFERENCE}]`;
+    this.selector = "[data-calcite-popover-reference]";
     /**
      * Automatically closes any currently open popovers when clicking outside of a popover.
      */
     this.autoClose = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.queryPopover = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, POPOVER_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(POPOVER_REFERENCE);
-      return queryElementRoots(el, { id });
-    };
+  }
+  autoCloseHandler() {
+    this.setAutoClose();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.setAutoClose();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -51,25 +53,14 @@ export class PopoverManager {
   render() {
     return h("slot", null);
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Private Methods
   //
-  //--------------------------------------------------------------------------
-  closeOpenPopovers(event) {
+  // --------------------------------------------------------------------------
+  setAutoClose() {
     const { autoClose, el } = this;
-    const popoverSelector = "calcite-popover";
-    const composedPath = event.composedPath();
-    const popover = this.queryPopover(composedPath);
-    if (popover) {
-      popover.toggle();
-      return;
-    }
-    if (autoClose) {
-      queryElementsRoots(el, popoverSelector)
-        .filter((popover) => popover.open && !composedPath.includes(popover))
-        .forEach((popover) => popover.toggle(false));
-    }
+    el.querySelectorAll("calcite-popover").forEach((popover) => (popover.autoClose = autoClose));
   }
   static get is() { return "calcite-popover-manager"; }
   static get encapsulation() { return "shadow"; }
@@ -99,7 +90,7 @@ export class PopoverManager {
       },
       "attribute": "selector",
       "reflect": false,
-      "defaultValue": "`[${POPOVER_REFERENCE}]`"
+      "defaultValue": "\"[data-calcite-popover-reference]\""
     },
     "autoClose": {
       "type": "boolean",
@@ -121,11 +112,8 @@ export class PopoverManager {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "closeOpenPopovers",
-      "target": "window",
-      "capture": true,
-      "passive": false
+  static get watchers() { return [{
+      "propName": "autoClose",
+      "methodName": "autoCloseHandler"
     }]; }
 }

package/dist/collection/components/progress/progress.css

@@ -84,7 +84,8 @@
   width: 100%;
 }
 
-.track, .bar {
+.track, 
+.bar {
   position: absolute;
   top: 0px;
   height: 2px;

package/dist/collection/components/progress/progress.js

@@ -1,16 +1,16 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, h, Prop } from "@stencil/core";
 export class Progress {
   constructor() {
-    /** Use indeterminate if finding actual progress value is impossible */
+    /** Use indeterminate if finding actual progress value is impossible. */
     this.type = "determinate";
-    /** Fraction completed, in the range of 0 - 1.0 */
+    /** The component's progress value, with a range of 0.0 - 1.0. */
     this.value = 0;
-    /** For indeterminate progress bars, reverse the animation direction */
+    /** When true and for indeterminate progress bars, reverses the animation direction. */
     this.reversed = false;
   }
   render() {
@@ -46,7 +46,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Use indeterminate if finding actual progress value is impossible"
+        "text": "Use indeterminate if finding actual progress value is impossible."
       },
       "attribute": "type",
       "reflect": false,
@@ -64,7 +64,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Fraction completed, in the range of 0 - 1.0"
+        "text": "The component's progress value, with a range of 0.0 - 1.0."
       },
       "attribute": "value",
       "reflect": false,
@@ -82,7 +82,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label for the progress indicator"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -99,7 +99,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text to display for the progress indicator"
+        "text": "Text that displays under the component's indicator."
       },
       "attribute": "text",
       "reflect": false
@@ -116,7 +116,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "For indeterminate progress bars, reverse the animation direction"
+        "text": "When true and for indeterminate progress bars, reverses the animation direction."
       },
       "attribute": "reversed",
       "reflect": false,