@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

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

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,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]) {
@@ -85,40 +79,40 @@
 }
 
 :host {
-  align-items: stretch;
+  position: relative;
   box-sizing: border-box;
-  background-color: transparent;
   display: flex;
-  flex-direction: column;
-  position: relative;
-  flex-grow: 1;
   flex-shrink: 0;
-  color: var(--calcite-ui-text-2);
+  flex-grow: 1;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: transparent;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+  color: var(--calcite-ui-text-2);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 :host([filter-enabled]) header {
-  background-color: var(--calcite-ui-foreground-1);
+  margin-bottom: 0.25rem;
   display: flex;
-  justify-content: flex-end;
   align-items: stretch;
-  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: 1;
 }
 
 calcite-filter {
-  margin-bottom: 0;
+  margin-bottom: 0px;
 }
 
 :host([loading][disabled]) {

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

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 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 { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, 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";
 /**
@@ -53,6 +53,7 @@ export class CalcitePickList {
     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);
@@ -278,9 +279,16 @@ export class CalcitePickList {
         "text": "Emitted when any of the item selections have changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "Map<string, HTMLCalcitePickListItemElement>",
+        "resolved": "Map<string, HTMLCalcitePickListItemElement>",
+        "references": {
+          "Map": {
+            "location": "global"
+          },
+          "HTMLCalcitePickListItemElement": {
+            "location": "global"
+          }
+        }
       }
     }]; }
   static get methods() { return {

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

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
-  sticky: "sticky"
+  sticky: "sticky-pos"
 };
 export var ICON_TYPES;
 (function (ICON_TYPES) {

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

@@ -8,6 +8,7 @@ import { getRoundRobinIndex } from "../../utils/array";
 export function mutationObserverCallback() {
   this.setUpItems();
   this.setUpFilter();
+  this.deselectRemovedItems();
 }
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 // --------------------------------------------------------------------------
@@ -182,6 +183,15 @@ export function setUpFilter() {
     this.dataForFilter = this.getItemData();
   }
 }
+export function deselectRemovedItems() {
+  const selectedValues = this.selectedValues;
+  const itemValues = this.items.map(({ value }) => value);
+  selectedValues.forEach((selectedItem) => {
+    if (!itemValues.includes(selectedItem.value)) {
+      this.selectedValues.delete(selectedItem.value);
+    }
+  });
+}
 export function deselectSiblingItems(item) {
   this.items.forEach((currentItem) => {
     if (currentItem.value !== item.value) {
@@ -215,8 +225,8 @@ export function selectSiblings(item, deselect = false) {
 }
 let groups;
 export function handleFilter(event) {
-  const filteredData = event.detail;
-  const values = filteredData.map((item) => item.value);
+  const { filteredItems } = event.currentTarget;
+  const values = filteredItems.map((item) => item.value);
   let hasSelectedMatch = false;
   if (!groups) {
     groups = new Set();

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

@@ -15,14 +15,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 export const List = (_a) => {
-  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, el, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
+  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = h("slot", null);
   return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
-        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS.menuActions })),
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));

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

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,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]) {
@@ -85,37 +79,35 @@
 }
 
 :host {
-  background-color: transparent;
+  margin-bottom: 0.25rem;
   box-sizing: border-box;
   display: block;
-  margin-bottom: 0.25rem;
-  color: var(--calcite-ui-text-2);
+  background-color: transparent;
   font-size: var(--calcite-font-size--1);
+  color: var(--calcite-ui-text-2);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 :host(:last-child) {
-  margin-bottom: 0;
+  margin-bottom: 0px;
 }
 
 /* Shared styles for header elements */
-
 .header {
-  margin: 0;
+  margin: 0px;
   display: flex;
-  align-items: center;
   align-content: space-between;
+  align-items: center;
+  fill: var(--calcite-ui-text-2);
   color: var(--calcite-ui-text-2);
-  fill: ;
 }
 
 .heading {
+  margin: 0px;
+  padding: 0px;
   font-weight: var(--calcite-font-weight-medium);
-  margin: 0;
-  padding: 0;
 }
 
 .header .heading {
@@ -138,27 +130,21 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading,
-h5.heading {
+h4.heading, h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 h3.heading {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1.375;
-  color: var(--calcite-ui-text-3);
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1.375;
+  color: var(--calcite-ui-text-3);
 }
 
 .container--indented {
-  margin-left: 1.5rem;
-}
-
-.calcite--rtl.container--indented {
-  margin-left: 0;
-  margin-right: 1.5rem;
+  margin-inline-start: 1.5rem;
 }

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

@@ -4,14 +4,25 @@
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { HEADING_LEVEL } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements.
  */
 export class CalcitePickListGroup {
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -20,12 +31,10 @@ export class CalcitePickListGroup {
   render() {
     var _a;
     const { el, groupTitle, headingLevel } = this;
-    const rtl = getElementDir(el) === "rtl";
     const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
     const sectionClasses = {
       [CSS.container]: true,
-      [CSS.indented]: hasParentItem,
-      [CSS_UTILITY.rtl]: rtl
+      [CSS.indented]: hasParentItem
     };
     const title = groupTitle;
     const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;

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

@@ -1,55 +1,49 @@
 @charset "UTF-8";
-
 /* 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: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -77,107 +71,101 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  background-color: var(--calcite-ui-foreground-1);
+:host{
+  margin: 0px;
+  margin-bottom: 1px;
   box-sizing: border-box;
-  align-items: stretch;
   display: flex;
-  font-size: var(--calcite-font-size--1);
-  color: var(--calcite-ui-text-1);
-  box-shadow: 0 1px 0 var(--calcite-ui-border-3);
-  margin: 0;
-  margin-bottom: 1px;
+  align-items: stretch;
   background-color: var(--calcite-ui-foreground-1);
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  transition: background-color 150ms ease-in-out;
-  animation: calcite-fade-in 150ms ease-in-out;
+  color: var(--calcite-ui-text-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);
+  transition: background-color var(--calcite-animation-timing);
+  animation: calcite-fade-in var(--calcite-animation-timing);
 }
-
-:host * {
+:host *{
   box-sizing: border-box;
 }
 
-.label {
-  background-color: transparent;
+.label{
   display: flex;
   flex: 1 1 auto;
-  align-items: center;
   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 {
+.label:focus{
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
-.label:hover {
+.label:hover{
   background-color: var(--calcite-ui-foreground-2);
 }
 
-:host([non-interactive]:hover) {
+:host([non-interactive]:hover){
   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;
 }
 
-.icon {
-  align-items: center;
+.icon{
+  margin-top: 0px;
+  margin-bottom: 0px;
   display: flex;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 0.25rem;
   cursor: pointer;
+  align-items: center;
+  padding: 0.25rem;
   color: var(--calcite-ui-brand);
   flex: 0 0 auto;
   line-height: 0;
 }
-
-.icon:hover {
+.icon:hover{
   background-color: var(--calcite-ui-foreground-2);
 }
 
-.icon-dot {
-  align-items: center;
+.icon-dot{
   display: flex;
   width: 1.5rem;
+  align-items: center;
   padding: 0.5rem;
 }
-
-.icon-dot:before {
+.icon-dot:before{
   opacity: 0;
   content: "•";
 }
 
-.icon calcite-icon {
+.icon calcite-icon{
   opacity: 0;
 }
 
 :host([selected]) .icon-dot:before,
 :host([selected]) .icon calcite-icon {
-  transition: opacity 150ms ease-in-out;
+  transition: opacity var(--calcite-animation-timing);
   opacity: 1;
 }
 
-.text-container {
-  display: flex;
-  overflow: hidden;
+.text-container{
   pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -186,34 +174,28 @@
   line-height: 1.375;
   word-wrap: break-word;
   word-break: break-word;
-  flex-direction: column;
-  flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.title {
-  color: var(--calcite-ui-text-1);
+.title{
   font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-ui-text-1);
 }
 
-.description {
+.description{
   margin-top: 0.125rem;
-  color: var(--calcite-ui-text-3);
   font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-ui-text-3);
 }
 
-.actions {
-  align-items: stretch;
+.actions{
+  margin: 0px;
   display: flex;
-  justify-content: flex-end;
-  margin: 0;
   flex: 0 1 auto;
+  align-items: stretch;
+  justify-content: flex-end;
 }
 
 .actions--start ~ .label {
-  padding-left: 0.25rem;
-}
-
-.calcite--rtl .actions--start ~ .label {
-  padding-left: unset;
-  padding-right: 0.25rem;
+  padding-inline-start: 0.25rem;
 }

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@st
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
 import { getSlotted } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @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.
@@ -90,6 +91,17 @@ export class CalcitePickListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------