@esri/calcite-components 1.0.0-next.282 → 1.0.0-next.283

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

@@ -118,7 +118,7 @@
 }
 
 calcite-filter {
-  margin-bottom: 1px;
+  margin-bottom: 0;
 }
 
 :host([loading][disabled]) {

package/dist/collection/components/calcite-pick-list/calcite-pick-list.js

@@ -2,6 +2,7 @@ import { Component, Element, Event, Listen, Method, Prop, State, h } from "@sten
 import { ICON_TYPES } from "./resources";
 import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
 import List from "./shared-list-render";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
@@ -44,7 +45,7 @@ export class CalcitePickList {
     this.selectedValues = new Map();
     this.dataForFilter = [];
     this.lastSelectedItem = null;
-    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
@@ -100,9 +101,11 @@ export class CalcitePickList {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Returns the currently selected items */
   async getSelectedItems() {
     return this.selectedValues;
   }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -295,7 +298,7 @@ export class CalcitePickList {
         "return": "Promise<Map<string, HTMLCalcitePickListItemElement>>"
       },
       "docs": {
-        "text": "",
+        "text": "Returns the currently selected items",
         "tags": []
       }
     },
@@ -318,7 +321,7 @@ export class CalcitePickList {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-pick-list/shared-list-logic.js

@@ -17,10 +17,12 @@ export function initialize() {
   this.emitCalciteListChange = debounce(internalCalciteListChangeEvent.bind(this), 0);
 }
 export function initializeObserver() {
-  this.observer.observe(this.el, { childList: true, subtree: true });
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
 }
 export function cleanUpObserver() {
-  this.observer.disconnect();
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
 }
 // --------------------------------------------------------------------------
 //

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

@@ -107,38 +107,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 h3.heading {

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.js

@@ -34,7 +34,7 @@ export class CalcitePickListItem {
      */
     this.selected = false;
     /**
-     * The text for the remove item buttons. Only applicable if removable is true.
+     * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
      * @default "Remove"
      */
     this.intlRemove = TEXT.remove;
@@ -99,6 +99,7 @@ export class CalcitePickListItem {
     }
     this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
   }
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -341,7 +342,7 @@ export class CalcitePickListItem {
             "text": "\"Remove\"",
             "name": "default"
           }],
-        "text": "The text for the remove item buttons. Only applicable if removable is true."
+        "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
       },
       "attribute": "intl-remove",
       "reflect": true,
@@ -468,7 +469,7 @@ export class CalcitePickListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -5,6 +5,9 @@ import { guid } from "../../utils/guid";
 import { getElementDir, queryElementRoots } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CalciteHeading } from "../functional/CalciteHeading";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalcitePopover {
   constructor() {
     // --------------------------------------------------------------------------
@@ -146,6 +149,7 @@ export class CalcitePopover {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
@@ -158,6 +162,7 @@ export class CalcitePopover {
       })
       : this.createPopper();
   }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -168,6 +173,7 @@ export class CalcitePopover {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  /** Toggles the popover's open property. */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -620,7 +626,7 @@ export class CalcitePopover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     },
@@ -639,7 +645,7 @@ export class CalcitePopover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     },
@@ -658,7 +664,7 @@ export class CalcitePopover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Toggles the popover's open property.",
         "tags": []
       }
     }

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

@@ -16,6 +16,10 @@ export class CalcitePopoverManager {
      * @default `[data-calcite-popover-reference]`
      */
     this.selector = `[${POPOVER_REFERENCE}]`;
+    /**
+     * Automatically closes any currently open popovers when clicking outside of a popover.
+     */
+    this.autoClose = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -96,13 +100,14 @@ export class CalcitePopoverManager {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Automatically closes any currently open popovers when clicking outside of a popover."
       },
       "attribute": "auto-close",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/calcite-radio/calcite-radio.js

@@ -12,14 +12,14 @@ export class CalciteRadio {
     this.disabled = false;
     /**
      * The focused state of the radio.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The radio's hidden status. */
     this.hidden = false;
     /**
      * The hovered state of the radio.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /** The scale (size) of the radio. */
@@ -69,7 +69,7 @@ export class CalciteRadio {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The disabled state of the radio."
@@ -91,7 +91,7 @@ export class CalciteRadio {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The focused state of the radio."
       },
@@ -130,7 +130,7 @@ export class CalciteRadio {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The hovered state of the radio."
       },

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -1,6 +1,7 @@
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, closestElementCrossShadowBoundary } from "../../utils/dom";
+import { closestElementCrossShadowBoundary, focusElement } from "../../utils/dom";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { hiddenInputStyle } from "../../utils/form";
 import { CSS } from "./resources";
 export class CalciteRadioButton {
@@ -16,20 +17,56 @@ export class CalciteRadioButton {
     this.disabled = false;
     /**
      * The focused state of the radio button.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
     this.hidden = false;
     /**
      * The hovered state of the radio button.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /** Requires that a value is selected for the radio button group before the parent form will submit. */
     this.required = false;
     /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.selectItem = (items, selectedIndex) => {
+      items.forEach((item, index) => {
+        const selected = index === selectedIndex;
+        item.checked = selected;
+        item.focused = selected;
+      });
+    };
+    this.toggle = () => {
+      this.uncheckAllRadioButtonsInGroup();
+      this.checked = true;
+      this.focused = true;
+      this.calciteRadioButtonChange.emit();
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.onLabelClick = (event) => {
+      if (!this.disabled && !this.hidden) {
+        this.uncheckOtherRadioButtonsInGroup();
+        const label = event.currentTarget;
+        const radioButton = label.for
+          ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+          : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+        if (radioButton) {
+          radioButton.checked = true;
+          radioButton.focused = true;
+        }
+        this.calciteRadioButtonChange.emit();
+        this.setFocus();
+      }
+    };
     this.setInputEl = (el) => {
       this.inputEl = el;
     };
@@ -97,14 +134,10 @@ export class CalciteRadioButton {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.inputEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   checkLastRadioButton() {
     const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
@@ -145,18 +178,6 @@ export class CalciteRadioButton {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  check(event) {
-    // Prevent parent label from clicking the first radio when calcite-radio-button is clicked
-    if (this.el.closest("label") && event.composedPath().includes(this.el)) {
-      event.preventDefault();
-    }
-    if (!this.disabled && !this.hidden) {
-      this.uncheckOtherRadioButtonsInGroup();
-      this.checked = true;
-      this.focused = true;
-      this.calciteRadioButtonChange.emit();
-    }
-  }
   mouseenter() {
     this.hovered = true;
   }
@@ -179,6 +200,7 @@ export class CalciteRadioButton {
     if (form) {
       form.addEventListener("reset", this.formResetHandler);
     }
+    connectLabel(this);
   }
   componentDidLoad() {
     this.hideInputEl();
@@ -191,6 +213,7 @@ export class CalciteRadioButton {
     if (form) {
       form.removeEventListener("reset", this.formResetHandler);
     }
+    disconnectLabel(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -200,8 +223,8 @@ export class CalciteRadioButton {
   render() {
     var _a;
     const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h("div", { class: CSS.container },
-      h("input", { "aria-label": this.label || null, checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }),
+    return (h("div", { class: CSS.container, onClick: this.clickHandler },
+      h("input", { "aria-label": getLabelText(this), checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }),
       h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })));
   }
   static get is() { return "calcite-radio-button"; }
@@ -262,7 +285,7 @@ export class CalciteRadioButton {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The focused state of the radio button."
       },
@@ -318,7 +341,7 @@ export class CalciteRadioButton {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The hovered state of the radio button."
       },
@@ -487,7 +510,7 @@ export class CalciteRadioButton {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     },
@@ -532,12 +555,6 @@ export class CalciteRadioButton {
       "methodName": "requiredChanged"
     }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "check",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "mouseenter",
       "method": "mouseenter",
       "target": undefined,

package/dist/collection/components/calcite-radio-button-group/calcite-radio-button-group.js

@@ -1,4 +1,7 @@
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-radio-button`s.
+ */
 export class CalciteRadioButtonGroup {
   constructor() {
     //--------------------------------------------------------------------------
@@ -205,11 +208,8 @@ export class CalciteRadioButtonGroup {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "text": "doc",
-            "name": "todo"
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Emitted when the radio button group has changed."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/calcite-radio-group/calcite-radio-group.js

@@ -1,6 +1,10 @@
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
-import { getElementDir, hasLabel } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
+import { connectLabel, disconnectLabel } from "../../utils/label";
+/**
+ * @slot - A slot for adding `calcite-radio-group-item`s.
+ */
 export class CalciteRadioGroup {
   constructor() {
     //--------------------------------------------------------------------------
@@ -10,6 +14,8 @@ export class CalciteRadioGroup {
     //--------------------------------------------------------------------------
     /** specify the appearance style of the radio group, defaults to solid. */
     this.appearance = "solid";
+    /** is the radio group disabled  */
+    this.disabled = false;
     /** specify the layout of the radio group, defaults to horizontal */
     this.layout = "horizontal";
     /** The scale of the radio group */
@@ -18,15 +24,28 @@ export class CalciteRadioGroup {
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
-    //  Private State/Props
+    //  Event Listeners
     //
     //--------------------------------------------------------------------------
+    this.handleClick = (event) => {
+      if (event.target.localName === "calcite-radio-group-item") {
+        this.selectItem(event.target);
+      }
+    };
     this.hiddenInput = (() => {
       const input = document.createElement("input");
       input.type = "hidden";
       this.el.appendChild(input);
       return input;
     })();
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
   }
   handleNameChange(value) {
     this.hiddenInput.name = value;
@@ -70,29 +89,18 @@ export class CalciteRadioGroup {
     if (lastChecked) {
       hiddenInput.value = lastChecked.value;
     }
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
-    return (h(Host, { role: "radiogroup", tabIndex: this.disabled ? -1 : null },
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null },
       h("slot", null)));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el)) {
-      this.setFocus();
-    }
-  }
-  handleClick(event) {
-    if (event.target.localName === "calcite-radio-group-item") {
-      this.selectItem(event.target);
-    }
-  }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
     if (this.hasLoaded) {
@@ -150,16 +158,11 @@ export class CalciteRadioGroup {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Focuses the selected item. If there is no selection, it focuses the first item. */
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
@@ -229,13 +232,14 @@ export class CalciteRadioGroup {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "is the radio group disabled"
       },
       "attribute": "disabled",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "layout": {
       "type": "string",
@@ -375,7 +379,7 @@ export class CalciteRadioGroup {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Focuses the selected item. If there is no selection, it focuses the first item.",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -389,18 +393,6 @@ export class CalciteRadioGroup {
       "methodName": "handleSelectedItemChange"
     }]; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "calciteRadioGroupItemChange",
       "method": "handleSelected",
       "target": undefined,