@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

package/dist/collection/components/pick-list/shared-list-render.js

@@ -1,27 +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.82
+ * v1.0.0-beta.85
  */
-var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
 import { h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
-export const List = (_a) => {
-  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
+export const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl, dragEnabled, storeAssistiveEl }, ...rest }) => {
   const defaultSlot = h("slot", null);
-  return (h(Host, Object.assign({ "aria-busy": toAriaBoolean(loading), role: "menu" }, rest),
+  return (h(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest },
     h("section", null,
+      dragEnabled ? (h("span", { "aria-live": "assertive", class: "assistive-text", ref: storeAssistiveEl })) : null,
       h("header", { class: { [CSS.sticky]: true } },
         filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS.menuActions })),

package/dist/collection/components/pick-list-group/pick-list-group.css

@@ -130,7 +130,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }

package/dist/collection/components/pick-list-group/pick-list-group.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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
@@ -68,7 +68,7 @@ export class PickListGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The title used for all nested `calcite-pick-list` rows."
+        "text": "Specifies the title for all nested `calcite-pick-list-item`s."
       },
       "attribute": "group-title",
       "reflect": true
@@ -90,7 +90,7 @@ export class PickListGroup {
       "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

package/dist/collection/components/pick-list-group/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.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   heading: "heading",

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

@@ -105,9 +105,7 @@
   cursor: pointer;
   align-items: center;
   background-color: transparent;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .label:focus{
   outline: 2px solid var(--calcite-ui-brand);
@@ -121,7 +119,8 @@
   background-color: var(--calcite-ui-foreground-1);
 }
 
-:host([non-interactive]) .label, :host([non-interactive]) .icon{
+:host([non-interactive]) .label, 
+:host([non-interactive]) .icon{
   pointer-events: none;
 }
 

package/dist/collection/components/pick-list-item/pick-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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -10,38 +10,40 @@ import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot actions-end - a slot for adding actions or content to the end side of the item.
- * @slot actions-start - a slot for adding actions or content to the start side of the item.
+ * @slot actions-end - A slot for adding actions or content to the end side of the component.
+ * @slot actions-start - A slot for adding actions or content to the start side of the component.
  */
 export class PickListItem {
   constructor() {
     /**
-     * When true, the item cannot be clicked and is visually muted.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When false, the item cannot be deselected by user interaction.
+     * When false, the component cannot be deselected by user interaction.
      */
     this.disableDeselect = false;
     /**
-     * @internal When true, the item cannot be selected by user interaction.
+     * @internal
      */
     this.nonInteractive = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
     /**
-     * Set this to true to display a remove action that removes the item from the list.
+     * When true, displays a remove action that removes the item from the list.
      */
     this.removable = false;
     /**
-     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     * When true, selects an item. Toggles when an item is checked/unchecked.
      */
     this.selected = false;
     /**
-     * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+     * Accessible name for the component's remove button. Only applicable if removable is "true".
+     *
      * @default "Remove"
      */
     this.intlRemove = TEXT.remove;
@@ -71,13 +73,13 @@ export class PickListItem {
     };
   }
   descriptionWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   labelWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   metadataWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   selectedWatchHandler() {
     this.calciteListItemChange.emit({
@@ -89,7 +91,7 @@ export class PickListItem {
     this.shiftPressed = false;
   }
   valueWatchHandler(newValue, oldValue) {
-    this.calciteListItemValueChange.emit({ oldValue, newValue });
+    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
   }
   // --------------------------------------------------------------------------
   //
@@ -111,8 +113,10 @@ export class PickListItem {
   //
   // --------------------------------------------------------------------------
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggles the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
@@ -185,7 +189,7 @@ export class PickListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for this item.  This will appear below the label text."
+        "text": "A description for the component that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -202,7 +206,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the item cannot be clicked and is visually muted."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -220,7 +224,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When false, the item cannot be deselected by user interaction."
+        "text": "When false, the component cannot be deselected by user interaction."
       },
       "attribute": "disable-deselect",
       "reflect": false,
@@ -239,7 +243,7 @@ export class PickListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When true, the item cannot be selected by user interaction."
+            "text": undefined
           }],
         "text": ""
       },
@@ -285,7 +289,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for this item. This will appear next to the icon."
+        "text": "Label and accessible name for the component. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -306,7 +310,7 @@ export class PickListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
+        "text": "Provides additional metadata to the component. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -321,7 +325,7 @@ export class PickListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Set this to true to display a remove action that removes the item from the list."
+        "text": "When true, displays a remove action that removes the item from the list."
       },
       "attribute": "removable",
       "reflect": true,
@@ -339,7 +343,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
+        "text": "When true, selects an item. Toggles when an item is checked/unchecked."
       },
       "attribute": "selected",
       "reflect": true,
@@ -360,7 +364,7 @@ export class PickListItem {
             "name": "default",
             "text": "\"Remove\""
           }],
-        "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
+        "text": "Accessible name for the component's remove button. Only applicable if removable is \"true\"."
       },
       "attribute": "intl-remove",
       "reflect": true,
@@ -378,7 +382,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The item's associated value."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -392,7 +396,7 @@ export class PickListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the item is selected or unselected."
+        "text": "Fires when the component is selected or unselected."
       },
       "complexType": {
         "original": "{\n    item: HTMLCalcitePickListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }",
@@ -411,7 +415,7 @@ export class PickListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the remove button is pressed."
+        "text": "Fires when the remove button is pressed."
       },
       "complexType": {
         "original": "void",
@@ -419,8 +423,8 @@ export class PickListItem {
         "references": {}
       }
     }, {
-      "method": "calciteListItemPropsChange",
-      "name": "calciteListItemPropsChange",
+      "method": "calciteInternalListItemPropsChange",
+      "name": "calciteInternalListItemPropsChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -429,7 +433,7 @@ export class PickListItem {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Emitted whenever the the item's label, description, value or metadata properties are modified."
+        "text": "Emits when the the component's label, description, value, or metadata properties are modified."
       },
       "complexType": {
         "original": "void",
@@ -437,8 +441,8 @@ export class PickListItem {
         "references": {}
       }
     }, {
-      "method": "calciteListItemValueChange",
-      "name": "calciteListItemValueChange",
+      "method": "calciteInternalListItemValueChange",
+      "name": "calciteInternalListItemValueChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -447,7 +451,7 @@ export class PickListItem {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Emitted whenever the the item's value property is modified."
+        "text": "Emits when the the component's value property is modified."
       },
       "complexType": {
         "original": "{\n    oldValue: any;\n    newValue: any;\n  }",
@@ -460,7 +464,10 @@ export class PickListItem {
       "complexType": {
         "signature": "(coerce?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "coerce"
+              }],
             "text": ""
           }],
         "references": {
@@ -471,8 +478,11 @@ export class PickListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
-        "tags": []
+        "text": "Toggles the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+        "tags": [{
+            "name": "param",
+            "text": "coerce"
+          }]
       }
     },
     "setFocus": {

package/dist/collection/components/pick-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.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   actions: "actions",

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

@@ -1,9 +1,8 @@
 /*!
  * 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.82
+ * v1.0.0-beta.85
  */
-import { queryElementsRoots } from "../../utils/dom";
 export default class PopoverManager {
   constructor() {
     // --------------------------------------------------------------------------
@@ -11,7 +10,7 @@ export default class PopoverManager {
     //  Private Properties
     //
     // --------------------------------------------------------------------------
-    this.registeredElements = new WeakMap();
+    this.registeredElements = new Map();
     this.registeredElementCount = 0;
     // --------------------------------------------------------------------------
     //
@@ -23,17 +22,26 @@ export default class PopoverManager {
       const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
       return registeredElements.get(registeredElement);
     };
-    this.clickHandler = (event) => {
+    this.togglePopovers = (event) => {
       const composedPath = event.composedPath();
       const popover = this.queryPopover(composedPath);
-      if (popover) {
+      if (popover && !popover.triggerDisabled) {
         popover.toggle();
         return;
       }
-      queryElementsRoots(event.target, "calcite-popover")
+      Array.from(this.registeredElements.values())
         .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
         .forEach((popover) => popover.toggle(false));
     };
+    this.keyHandler = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      this.togglePopovers(event);
+    };
+    this.clickHandler = (event) => {
+      this.togglePopovers(event);
+    };
   }
   // --------------------------------------------------------------------------
   //
@@ -57,8 +65,10 @@ export default class PopoverManager {
   }
   addListeners() {
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("keydown", this.keyHandler, { capture: true });
   }
   removeListeners() {
     document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("keydown", this.keyHandler, { capture: true });
   }
 }

package/dist/collection/components/popover/popover.css

@@ -123,6 +123,11 @@
   opacity: 0;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .arrow,
 .arrow::before {
   position: absolute;
@@ -239,6 +244,7 @@
   border-end-end-radius: 0.25rem;
 }
 
-::slotted(calcite-panel), ::slotted(calcite-flow) {
+::slotted(calcite-panel), 
+::slotted(calcite-flow) {
   height: 100%;
 }