@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/components/date.js

@@ -1,10 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 /**
  * Check if date is within a min and max
+ *
+ * @param date
+ * @param min
+ * @param max
  */
 function inRange(date, min, max) {
   const time = date.getTime();
@@ -15,6 +19,10 @@ function inRange(date, min, max) {
 /**
  * Ensures date is within range,
  * returns min or max if out of bounds
+ *
+ * @param date
+ * @param min
+ * @param max
  */
 function dateFromRange(date, min, max) {
   if (!(date instanceof Date)) {
@@ -34,6 +42,8 @@ function dateFromRange(date, min, max) {
 /**
  * Parse an iso8601 string (YYYY-mm-dd) into a valid date.
  * TODO: handle time when time of day UI is added
+ *
+ * @param iso8601
  */
 function dateFromISO(iso8601) {
   if (iso8601 instanceof Date) {
@@ -52,6 +62,8 @@ function dateFromISO(iso8601) {
 }
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
+ *
+ * @param date
  */
 function dateToISO(date) {
   if (typeof date === "string") {
@@ -64,6 +76,9 @@ function dateToISO(date) {
 }
 /**
  * Check if two dates are the same day, month, year
+ *
+ * @param d1
+ * @param d2
  */
 function sameDate(d1, d2) {
   return (d1 instanceof Date &&
@@ -74,6 +89,8 @@ function sameDate(d1, d2) {
 }
 /**
  * Get a date one month in the past
+ *
+ * @param date
  */
 function prevMonth(date) {
   const month = date.getMonth();
@@ -87,6 +104,8 @@ function prevMonth(date) {
 }
 /**
  * Get a date one month in the future
+ *
+ * @param date
  */
 function nextMonth(date) {
   const month = date.getMonth();
@@ -100,6 +119,9 @@ function nextMonth(date) {
 }
 /**
  * Translate a number into a given locals numeral system
+ *
+ * @param num
+ * @param localeData
  */
 function localizeNumber(num, localeData) {
   return String(num)
@@ -109,6 +131,9 @@ function localizeNumber(num, localeData) {
 }
 /**
  * Calculate actual number from localized string
+ *
+ * @param str
+ * @param localeData
  */
 function parseNumber(str, localeData) {
   const numerals = "0123456789";
@@ -121,6 +146,9 @@ function parseNumber(str, localeData) {
 /**
  * Parse numeric units for day, month, and year from a localized string
  * month starts at 0 (can pass to date constructor)
+ *
+ * @param str
+ * @param localeData
  */
 function parseDateString(str, localeData) {
   const { separator, unitOrder } = localeData;
@@ -134,6 +162,8 @@ function parseDateString(str, localeData) {
 }
 /**
  * Convert eastern arbic numerals
+ *
+ * @param str
  */
 function replaceArabicNumerals(str = "") {
   return str
@@ -142,6 +172,8 @@ function replaceArabicNumerals(str = "") {
 }
 /**
  * Based on the unitOrder string, find order of month, day, and year for locale
+ *
+ * @param unitOrder
  */
 function getOrder(unitOrder) {
   const signifiers = ["d", "m", "y"];
@@ -150,6 +182,9 @@ function getOrder(unitOrder) {
 }
 /**
  * Get number of days between two dates
+ *
+ * @param date1
+ * @param date2
  */
 function getDaysDiff(date1, date2) {
   const ts1 = date1.getTime();
@@ -157,4 +192,4 @@ function getDaysDiff(date1, date2) {
   return (ts1 - ts2) / (1000 * 3600 * 24);
 }
 
-export { dateFromISO as a, dateFromRange as b, getOrder as c, dateToISO as d, parseNumber as e, parseDateString as f, getDaysDiff as g, inRange as i, localizeNumber as l, nextMonth as n, prevMonth as p, sameDate as s };
+export { dateFromISO as a, dateFromRange as b, getOrder as c, dateToISO as d, prevMonth as e, parseNumber as f, getDaysDiff as g, inRange as i, localizeNumber as l, nextMonth as n, parseDateString as p, sameDate as s };

package/dist/components/debounce.js

@@ -1,7 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

package/dist/components/dom.js

@@ -1,7 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { g as guid } from './guid.js';
 
@@ -23,6 +23,7 @@ const TEXT = {
  *
  * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  *
+ * @param el
  * @returns {string} The element's ID.
  */
 function ensureId(el) {
@@ -55,35 +56,15 @@ function getRootNode(el) {
 function getHost(root) {
   return root.host || null;
 }
-/**
- * This helper queries an element's rootNodes and any ancestor rootNodes.
- *
- * @returns {Element[]} The elements.
- */
-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;
-    }
-    if (el.assignedSlot) {
-      el = el.assignedSlot;
-    }
-    const rootNode = getRootNode(el);
-    const results = Array.from(rootNode.querySelectorAll(selector));
-    const uniqueResults = results.filter((result) => !allResults.includes(result));
-    allResults = [...allResults, ...uniqueResults];
-    const host = getHost(rootNode);
-    return host ? queryFromAll(host, allResults) : allResults;
-  }
-  return queryFromAll(element, []);
-}
 /**
  * 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'.
  *
+ * @param element
+ * @param root0
+ * @param root0.selector
+ * @param root0.id
  * @returns {Element} The element.
  */
 function queryElementRoots(element, { selector, id }) {
@@ -189,5 +170,16 @@ function intersects(rect1, rect2) {
     rect2.top > rect1.bottom ||
     rect2.bottom < rect1.top);
 }
+/**
+ * This helper makes sure that boolean aria attributes are properly converted to a string.
+ *
+ * It should only be used for aria attributes that require a string value of "true" or "false".
+ *
+ * @param value
+ * @returns {string} The string conversion of a boolean value ("true" | "false").
+ */
+function toAriaBoolean(value) {
+  return Boolean(value).toString();
+}
 
-export { CSS_UTILITY as C, TEXT as T, getElementDir as a, getSlotted as b, getThemeName as c, closestElementCrossShadowBoundary as d, filterDirectChildren as e, focusElement as f, getElementProp as g, ensureId as h, isCalciteFocusable as i, queryElementsRoots as j, intersects as k, nodeListToArray as n, queryElementRoots as q, setRequestedIcon as s };
+export { CSS_UTILITY as C, TEXT as T, getElementDir as a, getSlotted as b, getThemeName as c, intersects as d, ensureId as e, focusElement as f, getElementProp as g, filterDirectChildren as h, isCalciteFocusable as i, closestElementCrossShadowBoundary as j, nodeListToArray as n, queryElementRoots as q, setRequestedIcon as s, toAriaBoolean as t };

package/dist/components/dropdown.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { b as getSlotted, f as focusElement } from './dom.js';
-import { a as defaultMenuPlacement, f as filterComputedPlacements, C as CSS, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper.js';
+import { t as toAriaBoolean, f as focusElement } from './dom.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, C as CSS, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
 
@@ -13,7 +13,7 @@ const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };
 
-const dropdownCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.calcite-dropdown-wrapper .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.calcite-dropdown-wrapper[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{width:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);max-height:90vh;width:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
+const dropdownCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.calcite-dropdown-wrapper .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.calcite-dropdown-wrapper[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .calcite-dropdown-wrapper,:host([open]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{width:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);max-height:90vh;width:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -21,15 +21,23 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 7);
+    this.calciteDropdownBeforeOpen = createEvent(this, "calciteDropdownBeforeOpen", 7);
     this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 7);
+    this.calciteDropdownBeforeClose = createEvent(this, "calciteDropdownBeforeClose", 7);
     this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Opens or closes the dropdown */
+    /**
+     * Opens or closes the dropdown
+     *
+     * @deprecated use open instead.
+     */
     this.active = false;
+    /** When true, opens the dropdown */
+    this.open = false;
     /**
      allow the dropdown to remain open after a selection is made
      if the selection-mode of the selected item's containing group is "none", the dropdown will always close
@@ -40,12 +48,13 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
      this value does not include groupTitles passed to calcite-dropdown-group
-    */
+     */
     this.maxItems = 0;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the dropdown will be positioned relative to the button.
+     *
      * @default "bottom-leading"
      */
     this.placement = defaultMenuPlacement;
@@ -59,12 +68,11 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.selectedItems = [];
     /** specify whether the dropdown is opened by hover or click of a trigger element */
     this.type = "click";
-    /** specify the width of dropdown, defaults to m */
-    this.width = "m";
     this.items = [];
+    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
-    this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -76,15 +84,49 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    this.updateTriggers = (event) => {
+      this.triggers = event.target.assignedElements({
+        flatten: true
+      });
+      this.reposition();
+    };
     this.updateItems = () => {
+      this.items = this.groups
+        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
-      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };
+    this.updateGroups = (event) => {
+      const groups = event.target
+        .assignedElements({ flatten: true })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+      this.groups = groups;
+      this.updateItems();
+    };
+    this.resizeObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        const { target } = entry;
+        if (target === this.referenceEl) {
+          this.setDropdownWidth();
+        }
+        else if (target === this.scrollerEl) {
+          this.setMaxScrollerHeight();
+        }
+      });
+    };
+    this.setDropdownWidth = () => {
+      const { referenceEl, scrollerEl } = this;
+      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
+      if (!referenceElWidth || !scrollerEl) {
+        return;
+      }
+      scrollerEl.style.minWidth = `${referenceElWidth}px`;
+    };
     this.setMaxScrollerHeight = () => {
-      const { active, scrollerEl } = this;
-      if (!scrollerEl || !active) {
+      const { active, scrollerEl, open } = this;
+      const isOpen = !(active || open);
+      if (!scrollerEl || isOpen) {
         return;
       }
       this.reposition();
@@ -95,14 +137,23 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
       this.scrollerEl = scrollerEl;
+      this.scrollerEl.addEventListener("transitionrun", this.transitionRunHandler);
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.calciteDropdownOpen.emit() : this.calciteDropdownClose.emit();
+        this.open || this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      }
+    };
+    this.transitionRunHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active || this.open
+          ? this.emitOpenCloseEvent("beforeOpen")
+          : this.emitOpenCloseEvent("beforeClose");
       }
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
+      this.resizeObserver.observe(el);
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -113,7 +164,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         return;
       }
       const key = e.key;
-      if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
+      if ((this.open || this.active) && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
       }
@@ -136,7 +187,8 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.openCalciteDropdown = () => {
       this.active = !this.active;
-      if (this.active) {
+      this.open = !this.open;
+      if (this.active || this.open) {
         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
       }
     };
@@ -147,10 +199,12 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   handleDisabledChange(value) {
     if (!value) {
       this.active = false;
+      this.open = false;
     }
   }
   flipPlacementsHandler() {
@@ -171,7 +225,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-    this.updateItems();
     this.setFilteredPlacements();
   }
   componentDidLoad() {
@@ -185,14 +238,17 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
+    if (this.scrollerEl) {
+      this.scrollerEl.removeEventListener("transitionrun", this.transitionRunHandler);
+    }
   }
   render() {
-    const { active } = this;
-    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", 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: {
+    const { active, open } = this;
+    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setMenuEl }, h("div", { class: {
         ["calcite-dropdown-content"]: true,
         [CSS.animation]: true,
-        [CSS.animationActive]: active
-      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, h("div", { hidden: !this.active }, h("slot", null))))));
+        [CSS.animationActive]: active || open
+      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, h("div", { hidden: !(open || active) }, h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -213,19 +269,22 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       : this.createPopper();
   }
   closeCalciteDropdownOnClick(e) {
-    if (!this.active || e.composedPath().includes(this.el)) {
+    const isOpen = !(this.open || this.active);
+    if (isOpen || e.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
   }
-  closeCalciteDropdownOnEvent() {
+  closeCalciteDropdownOnEvent(e) {
     this.closeCalciteDropdown();
+    e.stopPropagation();
   }
   closeCalciteDropdownOnOpenEvent(e) {
     if (e.composedPath().includes(this.el)) {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   mouseEnterHandler() {
     if (this.type === "hover") {
@@ -237,7 +296,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.closeCalciteDropdown();
     }
   }
-  calciteDropdownItemKeyEvent(e) {
+  calciteInternalDropdownItemKeyEvent(e) {
     const { keyboardEvent } = e.detail;
     // handle edge
     const target = keyboardEvent.target;
@@ -282,6 +341,20 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       event.detail.requestedDropdownGroup.selectionMode === "none") {
       this.closeCalciteDropdown();
     }
+    event.stopPropagation();
+  }
+  emitOpenCloseEvent(componentVisibilityState) {
+    const payload = {
+      el: this.el
+    };
+    const emitComponentState = {
+      beforeOpen: () => this.calciteDropdownBeforeOpen.emit(payload),
+      open: () => this.calciteDropdownOpen.emit(payload),
+      beforeClose: () => this.calciteDropdownBeforeClose.emit(payload),
+      close: () => this.calciteDropdownClose.emit(payload)
+    };
+    (emitComponentState[componentVisibilityState] ||
+      emitComponentState["The component state is unknown."])();
   }
   getModifiers() {
     const flipModifier = {
@@ -293,7 +366,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     const eventListenerModifier = {
       name: "eventListeners",
-      enabled: this.active
+      enabled: this.open || this.active
     };
     return [flipModifier, eventListenerModifier];
   }
@@ -317,16 +390,14 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.popper = null;
   }
   updateSelectedItems() {
-    const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
-    this.selectedItems = items.filter((item) => item.active);
+    this.selectedItems = this.items.filter((item) => item.active);
   }
   getMaxScrollerHeight() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    groups.forEach((group) => {
+    this.groups.forEach((group) => {
       if (maxItems > 0 && itemsToProcess < maxItems) {
         Array.from(group.children).forEach((item, index) => {
           if (index === 0) {
@@ -346,6 +417,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   closeCalciteDropdown(focusTrigger = true) {
     this.active = false;
+    this.open = false;
     if (focusTrigger) {
       focusElement(this.triggers[0]);
     }
@@ -383,6 +455,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get el() { return this; }
   static get watchers() { return {
     "active": ["activeHandler"],
+    "open": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
     "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],
@@ -391,6 +464,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return dropdownCss; }
 }, [1, "calcite-dropdown", {
     "active": [1540],
+    "open": [1540],
     "disableCloseOnSelect": [516, "disable-close-on-select"],
     "disabled": [516],
     "flipPlacements": [16],
@@ -402,7 +476,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "type": [513],
     "width": [513],
     "reposition": [64]
-  }, [[8, "click", "closeCalciteDropdownOnClick"], [0, "calciteDropdownCloseRequest", "closeCalciteDropdownOnEvent"], [8, "calciteDropdownOpen", "closeCalciteDropdownOnOpenEvent"], [1, "mouseenter", "mouseEnterHandler"], [1, "mouseleave", "mouseLeaveHandler"], [0, "calciteDropdownItemKeyEvent", "calciteDropdownItemKeyEvent"], [0, "calciteDropdownItemSelect", "handleItemSelect"]]]);
+  }, [[8, "click", "closeCalciteDropdownOnClick"], [0, "calciteInternalDropdownCloseRequest", "closeCalciteDropdownOnEvent"], [8, "calciteDropdownOpen", "closeCalciteDropdownOnOpenEvent"], [1, "mouseenter", "mouseEnterHandler"], [1, "mouseleave", "mouseLeaveHandler"], [0, "calciteInternalDropdownItemKeyEvent", "calciteInternalDropdownItemKeyEvent"], [0, "calciteInternalDropdownItemSelect", "handleItemSelect"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/filter.js

@@ -1,7 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { f as focusElement } from './dom.js';
@@ -14,8 +14,7 @@ import { f as forIn } from './forIn.js';
 
 const CSS = {
   container: "container",
-  searchIcon: "search-icon",
-  clearButton: "clear-button"
+  searchIcon: "search-icon"
 };
 const TEXT = {
   filterLabel: "Filter",
@@ -27,7 +26,7 @@ const ICONS = {
 };
 const DEBOUNCE_TIMEOUT = 250;
 
-const filterCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;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 *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;width:100%}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem}label{position:relative;margin-left:0.25rem;margin-right:0.25rem;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;overflow:hidden}input[type=text]{margin-bottom:0.25rem;width:100%;border-style:none;background-color:transparent;padding-top:0.25rem;padding-bottom:0.25rem;padding-right:0.25rem;padding-left:1.5rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);-webkit-transition:padding var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{width:100%}.search-icon{position:absolute;display:-ms-flexbox;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;-webkit-transition:left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);transition:left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
+const filterCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;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 *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;width:100%}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem}label{position:relative;margin-left:0.25rem;margin-right:0.25rem;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;overflow:hidden}input[type=text]{margin-bottom:0.25rem;width:100%;border-style:none;background-color:transparent;padding-top:0.25rem;padding-bottom:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);-webkit-padding-end:0.25rem;padding-inline-end:0.25rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem;-webkit-transition:padding var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{width:100%}.search-icon{position:absolute;display:-ms-flexbox;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;-webkit-transition:left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);transition:left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
 
 const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -77,7 +76,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const find = (input, RE) => {
         let found = false;
         forIn(input, (val) => {
-          if (typeof val === "function") {
+          if (typeof val === "function" || val == null /* intentional == to catch undefined */) {
             return;
           }
           if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
@@ -101,10 +100,13 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.value = target.value;
       this.filter(target.value, true);
     };
-    this.keyDownHandler = ({ key }) => {
-      if (key === "Escape") {
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
         this.clear();
       }
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
     };
     this.clear = () => {
       this.value = "";
@@ -157,9 +159,9 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, disabled: disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+    return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, clearable: true, disabled: disabled, icon: ICONS.search, intlClear: this.intlClear || TEXT.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
-      }, scale: scale, type: "text", value: this.value })), this.value ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: disabled, onClick: this.clear }, h("calcite-icon", { icon: ICONS.close, scale: scale }))) : null)));
+      }, scale: scale, type: "text", value: this.value })))));
   }
   get el() { return this; }
   static get watchers() { return {

package/dist/components/forIn.js

@@ -1,7 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';