@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.73

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
   --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -90,22 +80,20 @@
 
 :host {
   display: block;
+  max-width: 100%;
   cursor: pointer;
+  color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  max-width: 100%;
-  color: var(--calcite-ui-text-3);
 }
 
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
-
 :host([scale=s]) .node-container {
   --calcite-tree-padding-y: 0.25rem;
 }
-
 :host([scale=s]) .node-container .checkbox,
 :host([scale=s]) .node-container .chevron,
 :host([scale=s]) .node-container .checkmark,
@@ -117,11 +105,9 @@
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
-
 :host([scale=m]) .node-container {
   --calcite-tree-padding-y: 0.5rem;
 }
-
 :host([scale=m]) .node-container .checkbox,
 :host([scale=m]) .node-container .chevron,
 :host([scale=m]) .node-container .checkmark,
@@ -133,11 +119,9 @@
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
-
 :host([scale=l]) .node-container {
   --calcite-tree-padding-y: 0.75rem;
 }
-
 :host([scale=l]) .node-container .checkbox,
 :host([scale=l]) .node-container .chevron,
 :host([scale=l]) .node-container .checkmark,
@@ -146,14 +130,13 @@
 }
 
 :host([lines]) .children-container:after {
+  position: absolute;
+  top: 0px;
+  width: 1px;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  transition-property: background-color, border-color, color, fill, stroke;
-  top: 0;
-  position: absolute;
-  width: 1px;
   height: 96%;
   content: "";
   background-color: var(--calcite-ui-border-2);
@@ -165,21 +148,20 @@
 }
 
 ::slotted(*) {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  min-width: 0;
+  min-width: 0px;
   max-width: 100%;
+  overflow-wrap: break-word;
   color: inherit;
   text-decoration: none !important;
 }
-
 ::slotted(*):hover {
   text-decoration: none !important;
 }
 
 ::slotted(a) {
   width: 100%;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 
 :host {
@@ -200,22 +182,21 @@
 }
 
 .checkbox-label {
+  pointer-events: none;
   display: flex;
   align-items: center;
-  pointer-events: none;
 }
 
 .children-container {
   position: relative;
+  height: 0px;
   overflow: hidden;
-  height: 0;
   margin-inline-start: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
   transition: var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;
   transform-origin: top;
 }
-
 :host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
@@ -223,41 +204,29 @@
 }
 
 .node-container {
+  position: relative;
   display: flex;
   align-items: center;
-  position: relative;
   padding: var(--calcite-tree-padding-y) 0;
 }
-
-.node-container .checkmark,
-.node-container .bullet-point {
+.node-container .checkmark, .node-container .bullet-point {
+  opacity: 0;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  opacity: 0;
   color: var(--calcite-ui-border-1);
 }
 
-.node-container:hover .checkmark,
-.node-container:hover .bullet-point,
-:host([selected]) .node-container:hover .checkmark,
-:host([selected]) .node-container:hover .bullet-point,
-:host(:focus) .node-container .checkmark,
-:host(:focus) .node-container .bullet-point {
+.node-container:hover .checkmark, .node-container:hover .bullet-point, :host([selected]) .node-container:hover .checkmark, :host([selected]) .node-container:hover .bullet-point, :host(:focus) .node-container .checkmark, :host(:focus) .node-container .bullet-point {
   opacity: 1;
 }
 
-:host([selected]) > .node-container,
-:host([selected]) > .node-container:hover {
+:host([selected]) > .node-container, :host([selected]) > .node-container:hover {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
-
-:host([selected]) > .node-container .bullet-point,
-:host([selected]) > .node-container .checkmark,
-:host([selected]) > .node-container:hover .bullet-point,
-:host([selected]) > .node-container:hover .checkmark {
+:host([selected]) > .node-container .bullet-point, :host([selected]) > .node-container .checkmark, :host([selected]) > .node-container:hover .bullet-point, :host([selected]) > .node-container:hover .checkmark {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
@@ -265,11 +234,9 @@
 :host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }
-
 :host(:not([has-children])):host([scale=m]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.5rem;
 }
-
 :host(:not([has-children])):host([scale=l]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.75rem;
 }
@@ -278,8 +245,7 @@
   margin-inline-start: 0;
 }
 
-:host([has-children]) > .node-container .bullet-point,
-:host([has-children]) > .node-container .checkmark {
+:host([has-children]) > .node-container .bullet-point, :host([has-children]) > .node-container .checkmark {
   display: none;
 }
 
@@ -293,21 +259,19 @@
 }
 
 .chevron {
+  position: relative;
+  align-self: center;
+  color: var(--calcite-ui-text-3);
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  position: relative;
-  align-self: center;
-  color: var(--calcite-ui-text-3);
   flex: 0 0 auto;
   transform: rotate(0deg);
 }
-
 .calcite--rtl .chevron {
   transform: rotate(180deg);
 }
-
 :host([expanded]) > .node-container > .chevron {
   transform: rotate(90deg);
 }

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
   --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -89,38 +79,40 @@
 }
 
 :host {
-  align-items: stretch;
+  position: relative;
   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);
+  flex-direction: column;
+  align-items: stretch;
+  background-color: transparent;
   font-size: var(--calcite-font-size--1);
+  color: var(--calcite-ui-text-2);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 calcite-value-list-item:last-of-type {
-  box-shadow: none;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 :host([filter-enabled]) header {
-  background-color: var(--calcite-ui-foreground-1);
+  margin-bottom: 0.25rem;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  margin-bottom: 0.25rem;
-  box-shadow: 0 1px 0 var(--calcite-ui-border-3);
+  justify-content: flex-end;
+  background-color: var(--calcite-ui-foreground-1);
+  --tw-shadow: 0 1px 0 var(--calcite-ui-border-3);
+  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
-:host([filter-enabled]) header.sticky {
+:host([filter-enabled]) header.sticky-pos {
   position: sticky;
-  top: 0;
+  top: 0px;
   z-index: 10;
 }
 

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

@@ -5,7 +5,7 @@
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 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 { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, 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";
@@ -59,6 +59,7 @@ export class CalciteValueList {
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
+    this.deselectRemovedItems = deselectRemovedItems.bind(this);
     this.deselectSiblingItems = deselectSiblingItems.bind(this);
     this.selectSiblings = selectSiblings.bind(this);
     this.handleFilter = handleFilter.bind(this);
@@ -75,11 +76,12 @@ export class CalciteValueList {
         keyDownHandler.call(this, event);
         return;
       }
-      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+      const { items } = this;
+      if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
         return;
       }
       event.preventDefault();
-      const { el, items } = this;
+      const { el } = this;
       const moveOffset = event.key === "ArrowDown" ? 1 : -1;
       const currentIndex = items.indexOf(item);
       const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
@@ -93,6 +95,8 @@ export class CalciteValueList {
           : itemAtNextIndex;
         el.insertBefore(item, insertionReferenceItem);
       }
+      this.items = this.getItems();
+      this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
       requestAnimationFrame(() => handleElement.focus());
       item.handleActivated = true;
     };
@@ -131,6 +135,9 @@ export class CalciteValueList {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  getItems() {
+    return Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+  }
   setUpItems() {
     setUpItems.call(this, "calcite-value-list-item");
   }
@@ -356,9 +363,16 @@ export class CalciteValueList {
         "text": "Emitted when any of the item selections have changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "Map<string, HTMLCalciteValueListItemElement>",
+        "resolved": "Map<string, any>",
+        "references": {
+          "Map": {
+            "location": "global"
+          },
+          "HTMLCalciteValueListItemElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteListOrderChange",
@@ -371,8 +385,8 @@ export class CalciteValueList {
         "text": "Emitted when the order of the list has changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "any[]",
+        "resolved": "any[]",
         "references": {}
       }
     }]; }

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
   --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -89,65 +79,64 @@
 }
 
 :host {
+  margin-bottom: 1px;
   box-sizing: border-box;
+  display: flex;
   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;
+  color: var(--calcite-ui-text-2);
+  --tw-shadow: 0 1px 0 var(--calcite-ui-border-3);
+  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition: background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 calcite-pick-list-item {
-  box-shadow: none;
-  flex-grow: 1;
   position: relative;
-  margin: 0;
+  margin: 0px;
+  flex-grow: 1;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host([active]),
-:host([selected]) {
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+:host([active]), :host([selected]) {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .handle {
   display: flex;
+  cursor: move;
   align-items: center;
   justify-content: center;
-  padding-top: 0;
-  padding-bottom: 0;
+  border-style: none;
+  background-color: transparent;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-  background-color: transparent;
-  border-style: none;
-  color: var(--calcite-ui-text-1);
-  cursor: move;
   color: var(--calcite-ui-border-1);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
-
 .handle:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .handle--activated {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-
 .handle calcite-icon {
   color: inherit;
 }

package/dist/collection/utils/dom.js

@@ -21,7 +21,8 @@ export function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
 export function getThemeName(el) {
-  return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
+  const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
+  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
 }
 export function getElementDir(el) {
   const prop = "dir";
@@ -40,10 +41,14 @@ export function getRootNode(el) {
 export function getHost(root) {
   return root.host || null;
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
+/**
+ * This helper queries an element's rootNodes and any ancestor rootNodes.
+ *
+ * @returns {Element[]} The elements.
+ */
 export function queryElementsRoots(element, selector) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFromAll(el, allResults) {
     if (!el) {
       return allResults;
@@ -60,10 +65,16 @@ export function queryElementsRoots(element, selector) {
   }
   return queryFromAll(element, []);
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
-export function queryElementRoots(element, selector) {
+/**
+ * This helper queries an element's rootNode and any ancestor rootNodes.
+ *
+ * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
+ *
+ * @returns {Element} The element.
+ */
+export function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFrom(el) {
     if (!el) {
       return null;
@@ -72,7 +83,11 @@ export function queryElementRoots(element, selector) {
       el = el.assignedSlot;
     }
     const rootNode = getRootNode(el);
-    const found = rootNode.querySelector(selector);
+    const found = id
+      ? rootNode.getElementById(id)
+      : selector
+        ? rootNode.querySelector(selector)
+        : null;
     const host = getHost(rootNode);
     return found ? found : host ? queryFrom(host) : null;
   }
@@ -95,7 +110,9 @@ export async function focusElement(el) {
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
 export function getSlotted(element, slotName, options) {
-  const slotSelector = `[slot="${slotName}"]`;
+  const slotSelector = Array.isArray(slotName)
+    ? slotName.map((name) => `[slot="${name}"]`).join(",")
+    : `[slot="${slotName}"]`;
   if (options === null || options === void 0 ? void 0 : options.all) {
     return queryMultiple(element, slotSelector, options);
   }