@esri/calcite-components 1.0.0-next.281 → 1.0.0-next.285

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -1,9 +1,13 @@
-import { Component, Element, Prop, Host, Event, State, Listen, Watch, h } from "@stencil/core";
+import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding content to the item.
+ * @slot children - A slot for adding nested `calcite-tree` elements.
+ */
 export class CalciteTreeItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -24,7 +28,7 @@ export class CalciteTreeItem {
     this.iconClickHandler = (event) => {
       event.stopPropagation();
       this.expanded = !this.expanded;
-      if (!this.inputEnabled) {
+      if (this.selectionMode !== TreeSelectionMode.Ancestors) {
         this.calciteTreeItemSelect.emit({
           modifyCurrentSelection: event.shiftKey,
           forceToggle: true
@@ -32,6 +36,23 @@ export class CalciteTreeItem {
       }
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.updateAncestorTree = () => {
+      if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
+        const ancestors = [];
+        let parent = this.el.parentElement.closest("calcite-tree-item");
+        while (parent) {
+          ancestors.push(parent);
+          parent = parent.parentElement.closest("calcite-tree-item");
+        }
+        ancestors.forEach((item) => (item.indeterminate = true));
+        return;
+      }
+    };
   }
   expandedHandler(newValue) {
     const items = getSlotted(this.el, "children", {
@@ -58,7 +79,6 @@ export class CalciteTreeItem {
     this.selectionMode = parentTree.selectionMode;
     this.scale = parentTree.scale || "m";
     this.lines = parentTree.lines;
-    this.inputEnabled = parentTree.inputEnabled;
     let nextParentTree;
     while (parentTree) {
       nextParentTree = parentTree.parentElement.closest("calcite-tree");
@@ -71,27 +91,40 @@ export class CalciteTreeItem {
       }
     }
   }
+  componentDidLoad() {
+    this.updateAncestorTree();
+  }
   render() {
     const rtl = getElementDir(this.el) === "rtl";
-    const icon = this.hasChildren ? (h("calcite-icon", { class: {
+    const showBulletPoint = this.selectionMode === TreeSelectionMode.Single ||
+      this.selectionMode === TreeSelectionMode.Children;
+    const showCheckmark = this.selectionMode === TreeSelectionMode.Multi ||
+      this.selectionMode === TreeSelectionMode.MultiChildren;
+    const chevron = this.hasChildren ? (h("calcite-icon", { class: {
         [CSS.chevron]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "icon", icon: ICONS.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
-    const checkbox = this.inputEnabled ? (h("label", { class: CSS.checkboxLabel },
+    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel },
       h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }),
       h("slot", null))) : null;
+    const selectedIcon = showBulletPoint
+      ? ICONS.bulletPoint
+      : showCheckmark
+        ? ICONS.checkmark
+        : null;
+    const bulletOrCheckIcon = selectedIcon ? (h("calcite-icon", { class: {
+        [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
+        [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,
+        [CSS_UTILITY.rtl]: rtl
+      }, icon: selectedIcon, scale: "s" })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
-    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected
-        ? "true"
-        : this.selectionMode === TreeSelectionMode.Multi ||
-          this.selectionMode === TreeSelectionMode.MultiChildren
-          ? "false"
-          : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
+    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
       h("div", { class: {
           [CSS.nodeContainer]: true,
           [CSS_UTILITY.rtl]: rtl
-        }, ref: (el) => (this.defaultSlotWrapper = el) },
-        icon,
+        }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) },
+        chevron,
+        bulletOrCheckIcon,
         checkbox ? checkbox : h("slot", null)),
       h("div", { class: {
           [CSS.childrenContainer]: true,
@@ -114,7 +147,7 @@ export class CalciteTreeItem {
     }
     this.expanded = !this.expanded;
     this.calciteTreeItemSelect.emit({
-      modifyCurrentSelection: e.shiftKey || this.inputEnabled,
+      modifyCurrentSelection: e.shiftKey || this.selectionMode === TreeSelectionMode.Ancestors,
       forceToggle: false
     });
   }
@@ -337,7 +370,7 @@ export class CalciteTreeItem {
     },
     "inputEnabled": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -347,13 +380,16 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Display checkboxes (set on parent)",
+            "text": undefined,
             "name": "internal"
+          }, {
+            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes",
+            "name": "deprecated"
           }],
-        "text": ""
+        "text": "Display checkboxes (set on parent)"
       },
       "attribute": "input-enabled",
-      "reflect": true
+      "reflect": false
     },
     "scale": {
       "type": "string",
@@ -392,18 +428,40 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "In ancestor selection mode using inputEnabled,\nshow as indeterminate when only some children are selected",
+            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected",
             "name": "internal"
           }],
         "text": ""
       },
       "attribute": "indeterminate",
       "reflect": true
+    },
+    "selectionMode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "TreeSelectionMode",
+        "resolved": "TreeSelectionMode.Ancestors | TreeSelectionMode.Children | TreeSelectionMode.Multi | TreeSelectionMode.MultiChildren | TreeSelectionMode.Single",
+        "references": {
+          "TreeSelectionMode": {
+            "location": "import",
+            "path": "../calcite-tree/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tree selection-mode (set on parent)",
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "selection-mode",
+      "reflect": false
     }
   }; }
-  static get states() { return {
-    "selectionMode": {}
-  }; }
   static get events() { return [{
       "method": "calciteTreeItemSelect",
       "name": "calciteTreeItemSelect",

package/dist/collection/components/calcite-tree-item/resources.js

@@ -1,13 +1,17 @@
 export const CSS = {
-  checkboxLabel: "calcite-tree-label",
-  checkbox: "calcite-tree-checkbox",
-  chevron: "calcite-tree-chevron",
-  nodeContainer: "calcite-tree-node",
-  childrenContainer: "calcite-tree-children"
+  checkboxLabel: "checkbox-label",
+  checkbox: "checkbox",
+  chevron: "chevron",
+  nodeContainer: "node-container",
+  childrenContainer: "children-container",
+  bulletPointIcon: "bullet-point",
+  checkmarkIcon: "checkmark"
 };
 export const SLOTS = {
   children: "children"
 };
 export const ICONS = {
+  bulletPoint: "bullet-point",
+  checkmark: "check",
   chevronRight: "chevron-right"
 };

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

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -98,12 +86,19 @@
 
 :host {
   align-items: stretch;
+  box-sizing: border-box;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+}
+
+:host * {
+  box-sizing: border-box;
 }
 
 calcite-value-list-item:last-of-type {

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

@@ -4,8 +4,9 @@ import { CSS, ICON_TYPES } from "./resources";
 import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../calcite-pick-list/shared-list-logic";
 import List from "../calcite-pick-list/shared-list-render";
 import { getRoundRobinIndex } from "../../utils/array";
+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 - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
  */
 export class CalciteValueList {
@@ -50,7 +51,7 @@ export class CalciteValueList {
     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;
     };
@@ -161,9 +162,11 @@ export class CalciteValueList {
   //  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);
   }
@@ -388,7 +391,7 @@ export class CalciteValueList {
         "return": "Promise<Map<string, HTMLCalciteValueListItemElement>>"
       },
       "docs": {
-        "text": "",
+        "text": "Returns the currently selected items",
         "tags": []
       }
     },
@@ -411,7 +414,7 @@ export class CalciteValueList {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.css

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -97,12 +85,20 @@
 }
 
 :host {
+  box-sizing: border-box;
+  background-color: var(--calcite-ui-foreground-1);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
   margin-bottom: 1px;
   display: flex;
   box-shadow: 0 1px 0 var(--calcite-ui-border-3);
   transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
 }
 
+:host * {
+  box-sizing: border-box;
+}
+
 calcite-pick-list-item {
   box-shadow: none;
   flex-grow: 1;

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

@@ -65,9 +65,14 @@ export class CalciteValueListItem {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
   async toggleSelected(coerce) {
     this.pickListItem.toggleSelected(coerce);
   }
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
@@ -360,7 +365,7 @@ export class CalciteValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "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": []
       }
     },
@@ -376,7 +381,7 @@ export class CalciteValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";
+import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
 const ICONS = {
   chevronsLeft: "chevrons-left",
   chevronsRight: "chevrons-right"
@@ -11,7 +12,7 @@ function getCalcitePosition(position, el) {
 }
 export function toggleChildActionText({ parent, expanded }) {
   queryActions(parent)
-    .filter((el) => el.slot !== "menu-actions")
+    .filter((el) => el.slot !== ACTION_GROUP_SLOTS.menuActions)
     .forEach((action) => (action.textEnabled = expanded));
   parent.querySelectorAll("calcite-action-group").forEach((group) => (group.expanded = expanded));
 }
@@ -24,7 +25,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   }
   return referenceElement;
 };
-export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref }) => {
+export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
   const rtl = getElementDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
@@ -34,6 +35,6 @@ export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };

package/dist/collection/utils/dom.js

@@ -117,9 +117,6 @@ function querySingle(element, slotSelector, options) {
 export function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
 }
-export function hasLabel(labelEl, el) {
-  return labelEl.contains(el);
-}
 // set a default icon from a defined set or allow an override with an icon name string
 export function setRequestedIcon(iconObject, iconValue, matchedValue) {
   if (typeof iconValue === "string" && iconValue !== "") {

package/dist/collection/utils/filter.js

@@ -1,7 +1,7 @@
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
   const escapedValue = escapeRegExp(value);
-  const regex = new RegExp(escapedValue, "ig");
+  const regex = new RegExp(escapedValue, "i");
   if (data.length === 0) {
     console.warn(`No data was passed to the filter function.
     The data argument should be an array of objects`);

package/dist/collection/utils/label.js

@@ -0,0 +1,47 @@
+import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
+const labelTagName = "calcite-label";
+const labelClickEvent = "calciteInternalLabelClick";
+const onLabelClickMap = new WeakMap();
+const findLabelForComponent = (componentEl) => {
+  const id = componentEl.id;
+  return ((id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`)) ||
+    closestElementCrossShadowBoundary(componentEl, labelTagName));
+};
+/**
+ * Helper to set up label interactions on connectedCallback.
+ */
+export function connectLabel(component) {
+  const labelEl = findLabelForComponent(component.el);
+  if (!labelEl) {
+    return;
+  }
+  component.labelEl = labelEl;
+  const boundOnLabelClick = onLabelClick.bind(component);
+  onLabelClickMap.set(component.el, boundOnLabelClick);
+  component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
+}
+/**
+ * Helper to tear down label interactions on disconnectedCallback.
+ */
+export function disconnectLabel(component) {
+  if (!component.labelEl) {
+    return;
+  }
+  const boundOnLabelClick = onLabelClickMap.get(component.el);
+  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
+  onLabelClickMap.delete(component.el);
+}
+/**
+ * Helper to get the label text from a component.
+ */
+export function getLabelText(component) {
+  var _a, _b;
+  return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+}
+function onLabelClick(event) {
+  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
+  if (containedLabelableChildClicked) {
+    return;
+  }
+  this.onLabelClick(event);
+}

package/dist/collection/utils/observers.js

@@ -0,0 +1,15 @@
+import { Build } from "@stencil/core";
+/**
+ * This utility ensures observers are created only for browser contexts.
+ *
+ * @param type - the type of observer to create
+ * @param callback - the observer callback
+ * @param options - the observer options
+ */
+export function createObserver(type, callback, options) {
+  const Observer = getObserver(type);
+  return Build.isBrowser ? new Observer(callback, options) : undefined;
+}
+function getObserver(type) {
+  return (type === "intersection" ? IntersectionObserver : type === "mutation" ? MutationObserver : ResizeObserver);
+}

package/dist/collection/utils/resources.js

@@ -1,7 +1,24 @@
+const autoTheme = "calcite-theme-auto";
+const darkTheme = "calcite-theme-dark";
+const lightTheme = "calcite-theme-light";
+export const THEMES = [
+  {
+    name: "light",
+    className: lightTheme
+  },
+  {
+    name: "dark",
+    className: darkTheme
+  },
+  {
+    name: "auto",
+    className: autoTheme
+  }
+];
 export const CSS_UTILITY = {
-  autoTheme: "calcite-theme-auto",
-  darkTheme: "calcite-theme-dark",
-  lightTheme: "calcite-theme-light",
+  autoTheme,
+  darkTheme,
+  lightTheme,
   rtl: "calcite--rtl"
 };
 export const TEXT = {

package/dist/custom-elements/bundles/pick-list.js

@@ -1,5 +1,5 @@
-import { CalcitePickList, CalciteFilter, CalciteScrim, CalciteIcon, CalciteLoader, CalcitePickListGroup, CalcitePickListItem, CalciteAction } from "../index";
+import { CalcitePickList, CalciteFilter, CalciteScrim, CalciteInput, CalciteIcon, CalciteLoader, CalcitePickListGroup, CalcitePickListItem, CalciteAction } from "../index";
 import { register } from "../utils";
 register({
-    "calcite-pick-list": CalcitePickList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-pick-list-group": CalcitePickListGroup, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
+    "calcite-pick-list": CalcitePickList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-input": CalciteInput, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-pick-list-group": CalcitePickListGroup, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
 });

package/dist/custom-elements/bundles/value-list.js

@@ -1,5 +1,5 @@
-import { CalciteValueList, CalciteFilter, CalciteScrim, CalciteIcon, CalciteLoader, CalciteValueListItem, CalcitePickListItem, CalciteAction } from "../index";
+import { CalciteValueList, CalciteFilter, CalciteScrim, CalciteInput, CalciteIcon, CalciteLoader, CalciteValueListItem, CalcitePickListItem, CalciteAction } from "../index";
 import { register } from "../utils";
 register({
-    "calcite-value-list": CalciteValueList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-value-list-item": CalciteValueListItem, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
+    "calcite-value-list": CalciteValueList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-input": CalciteInput, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-value-list-item": CalciteValueListItem, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
 });