@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.70

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.js

@@ -1,3 +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.
+ */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
 import { getKey } from "../../utils/key";
@@ -430,8 +434,8 @@ export class CalciteDatePickerMonth {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "CLDR locale data for current locale"
       }
@@ -480,8 +484,8 @@ export class CalciteDatePickerMonth {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Event emitted when user hovers the date."
       },
@@ -513,8 +517,8 @@ export class CalciteDatePickerMonth {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-date-picker-month-header/calcite-date-picker-month-header.css

@@ -152,7 +152,7 @@
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  width: calc(100% / 7);
+  width: 14.2857142857%;
 }
 
 .chevron:focus {

package/dist/collection/components/calcite-date-picker-month-header/calcite-date-picker-month-header.js

@@ -1,3 +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.
+ */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";

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

@@ -1,9 +1,14 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getKey } from "../../utils/key";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
 import { DefaultDropdownPlacement, SLOTS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
  * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
@@ -54,14 +59,29 @@ export class CalciteDropdown {
     //
     //--------------------------------------------------------------------------
     this.items = [];
-    /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
-    this.maxScrollerHeight = 0;
     this.activeTransitionProp = "opacity";
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.updateItems = () => {
+      this.updateSelectedItems();
+      this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
+      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
+      this.reposition();
+    };
+    this.setMaxScrollerHeight = () => {
+      const { scrollerEl } = this;
+      if (scrollerEl) {
+        const maxScrollerHeight = this.getMaxScrollerHeight();
+        scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      }
+    };
+    this.setScrollerEl = (scrollerEl) => {
+      this.scrollerEl = scrollerEl;
+    };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active ? this.calciteDropdownOpen.emit() : this.calciteDropdownClose.emit();
@@ -73,15 +93,6 @@ export class CalciteDropdown {
     this.setMenuEl = (el) => {
       this.menuEl = el;
     };
-    this.openDropdown = (e) => {
-      const target = e.target;
-      if (this.triggers.includes(target) ||
-        this.triggers.some((trigger) => trigger.contains(target))) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.openCalciteDropdown();
-      }
-    };
     this.keyDownHandler = (e) => {
       const target = e.target;
       const key = getKey(e.key);
@@ -120,6 +131,9 @@ export class CalciteDropdown {
   activeHandler() {
     this.reposition();
   }
+  maxItemsHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -129,36 +143,31 @@ export class CalciteDropdown {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-  }
-  componentWillLoad() {
-    // get initially selected items
-    this.updateSelectedItems();
+    this.updateItems();
   }
   componentDidLoad() {
-    this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
-    this.maxScrollerHeight = this.getMaxScrollerHeight(groups);
-    this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
     this.reposition();
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
   }
   render() {
-    const { active, maxScrollerHeight } = this;
+    const { active } = this;
     const dir = getElementDir(this.el);
     return (h(Host, { tabIndex: this.disabled ? -1 : null },
-      h("div", { class: { ["calcite-dropdown-trigger-container"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.openDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
+      h("div", { class: { ["calcite-dropdown-trigger-container"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
         h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
       h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
             [PopperCSS.animationActive]: active
-          }, onTransitionEnd: this.transitionEnd, style: {
-            maxHeight: !active || maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
-          } },
+          }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
           h("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -169,9 +178,10 @@ export class CalciteDropdown {
   /** Updates the position of the component. */
   async reposition() {
     const { popper, menuEl, placement } = this;
+    this.setMaxScrollerHeight();
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement,
@@ -180,13 +190,10 @@ export class CalciteDropdown {
       : this.createPopper();
   }
   closeCalciteDropdownOnClick(e) {
-    const target = e.target;
-    if (!this.disableCloseOnSelect &&
-      this.active &&
-      target.nodeName !== "CALCITE-DROPDOWN-ITEM" &&
-      target.nodeName !== "CALCITE-DROPDOWN-GROUP") {
-      this.closeCalciteDropdown();
+    if (!this.active || e.composedPath().includes(this.el)) {
+      return;
     }
+    this.closeCalciteDropdown();
   }
   closeCalciteDropdownOnEvent() {
     this.closeCalciteDropdown();
@@ -286,7 +293,8 @@ export class CalciteDropdown {
     const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
     this.selectedItems = items.filter((item) => item.active);
   }
-  getMaxScrollerHeight(groups) {
+  getMaxScrollerHeight() {
+    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
@@ -464,8 +472,8 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"bottom-leading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"bottom-leading\""
           }],
         "text": "Determines where the dropdown will be positioned relative to the button."
       },
@@ -512,8 +520,8 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "**read-only** The currently selected items"
       },
@@ -629,6 +637,9 @@ export class CalciteDropdown {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "maxItems",
+      "methodName": "maxItemsHandler"
     }, {
       "propName": "placement",
       "methodName": "placementHandler"

package/dist/collection/components/calcite-dropdown/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-dropdown/resources.js

@@ -1,3 +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.
+ */
 export const DefaultDropdownPlacement = "bottom-leading";
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
@@ -135,8 +139,8 @@ export class CalciteDropdownGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-dropdown-group/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-dropdown-group/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   containerSmall: "container--s",
   containerMedium: "container--m",

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

@@ -164,8 +164,7 @@
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
-:host(:focus),
-.container--link a:focus {
+:host(:focus) {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -189,26 +188,32 @@
 }
 
 .container--s .dropdown-link {
-  padding-left: 0.75rem;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
+  padding-right: 0.5rem;
+  padding-left: 1.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.container--m .dropdown-link {
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
   padding-right: 0.75rem;
+  padding-left: 2rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
-.container--m .dropdown-link {
-  padding-left: 1rem;
+.container--l .dropdown-link {
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
   padding-right: 1rem;
+  padding-left: 2.5rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-.container--l .dropdown-link {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 :host(:hover) .container,
 :host(:active) .container {
   background-color: var(--calcite-ui-foreground-2);
@@ -216,6 +221,11 @@
   text-decoration: none;
 }
 
+:host(:hover) .container--link .dropdown-link,
+:host(:active) .container--link .dropdown-link {
+  color: var(--calcite-ui-text-1);
+}
+
 :host(:focus) .container {
   color: var(--calcite-ui-text-1);
   text-decoration: none;
@@ -236,32 +246,28 @@
   right: 1rem;
 }
 
-:host([active]) .container:not(.container--none-selection) {
+.calcite--rtl .dropdown-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:host([active]) .container:not(.container--none-selection),
+:host([active]) .container--link .dropdown-link {
   color: var(--calcite-ui-text-1);
   font-weight: var(--calcite-font-weight-medium);
 }
 
-:host([active]) .container:not(.container--none-selection):before {
+:host([active]) .container:not(.container--none-selection):before,
+:host([active]) .container--link .dropdown-link:before {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
 
-:host([active]) .container:not(.container--none-selection) calcite-icon {
+:host([active]) .container:not(.container--none-selection) calcite-icon,
+:host([active]) .container--link .dropdown-link calcite-icon {
   color: var(--calcite-ui-brand);
 }
 
-.container--s.container--none-selection {
-  padding-left: 0.25rem;
-}
-
-.container--m.container--none-selection {
-  padding-left: 0.5rem;
-}
-
-.container--l.container--none-selection {
-  padding-left: 0.75rem;
-}
-
 .container--multi-selection:before,
 .container--none-selection:before {
   display: none;

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
@@ -310,8 +314,8 @@ export class CalciteDropdownItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -328,8 +332,8 @@ export class CalciteDropdownItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -351,8 +355,8 @@ export class CalciteDropdownItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -1,3 +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.
+ */
 export const CSS = {
   containerLink: "container--link",
   containerSmall: "container--s",

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

@@ -1,3 +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.
+ */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
 import { focusElement, getElementDir } from "../../utils/dom";
@@ -148,8 +152,8 @@ export class CalciteFab {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"plus\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"plus\""
           }],
         "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
       },

package/dist/collection/components/calcite-fab/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   button: "button"
 };