@esri/calcite-components 1.0.0-beta.80 → 1.0.0-beta.83

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

@@ -1,6 +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.83
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
@@ -10,8 +11,10 @@ import { CSS } from "./resources";
  */
 export class DropdownGroup {
   constructor() {
-    /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
-     none (no active items), defaults to single */
+    /**
+      specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
+     none (no active items), defaults to single
+     */
     this.selectionMode = "single";
   }
   //--------------------------------------------------------------------------
@@ -45,7 +48,7 @@ export class DropdownGroup {
   updateActiveItemOnChange(event) {
     this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
     this.requestedDropdownItem = event.detail.requestedDropdownItem;
-    this.calciteDropdownItemChange.emit({
+    this.calciteInternalDropdownItemChange.emit({
       requestedDropdownGroup: this.requestedDropdownGroup,
       requestedDropdownItem: this.requestedDropdownItem
     });
@@ -131,8 +134,8 @@ export class DropdownGroup {
     }
   }; }
   static get events() { return [{
-      "method": "calciteDropdownItemChange",
-      "name": "calciteDropdownItemChange",
+      "method": "calciteInternalDropdownItemChange",
+      "name": "calciteInternalDropdownItemChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -151,7 +154,7 @@ export class DropdownGroup {
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "calciteDropdownItemSelect",
+      "name": "calciteInternalDropdownItemSelect",
       "method": "updateActiveItemOnChange",
       "target": undefined,
       "capture": false,

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

@@ -1,5 +1,6 @@
 /*!
  * 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.83
  */
 export {};

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

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

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

@@ -146,6 +146,7 @@
   outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: start;
 }
 
 .dropdown-item-content {
@@ -155,9 +156,7 @@
 }
 
 :host, .container--link a {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) {

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

@@ -1,9 +1,10 @@
 /*!
  * 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.83
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding text.
@@ -59,7 +60,7 @@ export class DropdownItem {
         : this.selectionMode === "multi"
           ? "menuitemcheckbox"
           : "menuitem";
-    const itemAria = this.selectionMode !== "none" ? this.active.toString() : null;
+    const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.active) : null;
     return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" },
       h("div", { class: {
           container: true,
@@ -85,30 +86,28 @@ export class DropdownItem {
   keyDownHandler(e) {
     switch (e.key) {
       case " ":
-        this.emitRequestedItem();
-        if (this.href) {
-          e.preventDefault();
-          this.childLink.click();
-        }
-        break;
       case "Enter":
         this.emitRequestedItem();
         if (this.href) {
           this.childLink.click();
         }
+        e.preventDefault();
         break;
       case "Escape":
-        this.calciteDropdownCloseRequest.emit();
+        this.calciteInternalDropdownCloseRequest.emit();
+        e.preventDefault();
         break;
       case "Tab":
+        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: e });
+        break;
       case "ArrowUp":
       case "ArrowDown":
       case "Home":
       case "End":
-        this.calciteDropdownItemKeyEvent.emit({ keyboardEvent: e });
+        e.preventDefault();
+        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: e });
         break;
     }
-    e.preventDefault();
   }
   updateActiveItemOnChange(event) {
     const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
@@ -117,6 +116,7 @@ export class DropdownItem {
       this.requestedDropdownItem = event.detail.requestedDropdownItem;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -151,7 +151,7 @@ export class DropdownItem {
     }
   }
   emitRequestedItem() {
-    this.calciteDropdownItemSelect.emit({
+    this.calciteInternalDropdownItemSelect.emit({
       requestedDropdownItem: this.el,
       requestedDropdownGroup: this.parentDropdownGroupEl
     });
@@ -309,8 +309,8 @@ export class DropdownItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteDropdownItemSelect",
-      "name": "calciteDropdownItemSelect",
+      "method": "calciteInternalDropdownItemSelect",
+      "name": "calciteInternalDropdownItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -327,8 +327,8 @@ export class DropdownItem {
         "references": {}
       }
     }, {
-      "method": "calciteDropdownItemKeyEvent",
-      "name": "calciteDropdownItemKeyEvent",
+      "method": "calciteInternalDropdownItemKeyEvent",
+      "name": "calciteInternalDropdownItemKeyEvent",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -350,8 +350,8 @@ export class DropdownItem {
         }
       }
     }, {
-      "method": "calciteDropdownCloseRequest",
-      "name": "calciteDropdownCloseRequest",
+      "method": "calciteInternalDropdownCloseRequest",
+      "name": "calciteInternalDropdownCloseRequest",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -400,7 +400,7 @@ export class DropdownItem {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteDropdownItemChange",
+      "name": "calciteInternalDropdownItemChange",
       "method": "updateActiveItemOnChange",
       "target": "body",
       "capture": false,

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

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

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

@@ -1,6 +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.83
  */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
@@ -27,6 +28,7 @@ export class Fab {
     this.disabled = false;
     /**
      * 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/.
+     *
      * @default "plus"
      */
     this.icon = ICONS.plus;

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

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

package/dist/collection/components/filter/filter.css

@@ -132,12 +132,12 @@ input[type=text] {
   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);
+  padding-inline-end: 0.25rem;
+  padding-inline-start: 1.5rem;
   transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
 input[type=text]::-ms-clear {

package/dist/collection/components/filter/filter.js

@@ -1,13 +1,13 @@
 /*!
  * 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.83
  */
 import { Component, Element, Event, Prop, h, Method, Fragment, Watch } from "@stencil/core";
 import { debounce, forIn } from "lodash-es";
-import { CSS, ICONS, TEXT } from "./resources";
+import { CSS, ICONS, TEXT, DEBOUNCE_TIMEOUT } from "./resources";
 import { focusElement } from "../../utils/dom";
 import { updateHostInteraction } from "../../utils/interactive";
-const filterDebounceInMs = 250;
 export class Filter {
   constructor() {
     // --------------------------------------------------------------------------
@@ -43,16 +43,16 @@ export class Filter {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.filter = debounce((value) => {
+    this.filter = debounce((value, emit = false) => {
       const regex = new RegExp(value, "i");
       if (this.items.length === 0) {
-        this.updateFiltered([]);
+        this.updateFiltered([], emit);
         return;
       }
       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)) {
@@ -69,19 +69,24 @@ export class Filter {
       const result = this.items.filter((item) => {
         return find(item, regex);
       });
-      this.updateFiltered(result);
-    }, filterDebounceInMs);
+      this.updateFiltered(result, emit);
+    }, DEBOUNCE_TIMEOUT);
     this.inputHandler = (event) => {
       const target = event.target;
       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 = "";
+      this.filter("", true);
       this.setFocus();
     };
   }
@@ -116,10 +121,12 @@ export class Filter {
   async setFocus() {
     focusElement(this.textInput);
   }
-  updateFiltered(filtered) {
+  updateFiltered(filtered, emit = false) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit();
+    if (emit) {
+      this.calciteFilterChange.emit();
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -131,11 +138,9 @@ export class Filter {
     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) => {
+          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 })))));
   }
   static get is() { return "calcite-filter"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/filter/resources.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.83
  */
 export const CSS = {
   container: "container",
-  searchIcon: "search-icon",
-  clearButton: "clear-button"
+  searchIcon: "search-icon"
 };
 export const TEXT = {
   filterLabel: "Filter",
@@ -15,3 +15,4 @@ export const ICONS = {
   search: "search",
   close: "x"
 };
+export const DEBOUNCE_TIMEOUT = 250;

package/dist/collection/components/flow/flow.css

@@ -95,8 +95,8 @@
   width: 100%;
   flex: 1 1 auto;
   align-items: stretch;
-  background-color: transparent;
   overflow: hidden;
+  background-color: transparent;
 }
 :host .frame {
   position: relative;
@@ -125,28 +125,20 @@
 @keyframes calcite-frame-advance {
   0% {
     --tw-bg-opacity: 0.5;
-  }
-  0% {
     transform: translate3d(50px, 0, 0);
   }
   100% {
     --tw-bg-opacity: 1;
-  }
-  100% {
     transform: translate3d(0, 0, 0);
   }
 }
 @keyframes calcite-frame-retreat {
   0% {
     --tw-bg-opacity: 0.5;
-  }
-  0% {
     transform: translate3d(-50px, 0, 0);
   }
   100% {
     --tw-bg-opacity: 1;
-  }
-  100% {
     transform: translate3d(0, 0, 0);
   }
 }

package/dist/collection/components/flow/flow.js

@@ -1,10 +1,10 @@
 /*!
  * 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.83
  */
 import { Component, Element, Listen, Method, State, h } from "@stencil/core";
 import { CSS } from "./resources";
-import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-panel`s to the flow.
  */
@@ -21,9 +21,13 @@ export class Flow {
       }
       return newPanelCount < oldPanelCount ? "retreating" : "advancing";
     };
-    this.updateFlowProps = () => {
+    this.updateFlowProps = (event) => {
       const { panels } = this;
-      const newPanels = Array.from(this.el.querySelectorAll("calcite-panel"));
+      const newPanels = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-panel"));
       const oldPanelCount = panels.length;
       const newPanelCount = newPanels.length;
       const activePanel = newPanels[newPanelCount - 1];
@@ -44,7 +48,6 @@ export class Flow {
         this.flowDirection = flowDirection;
       }
     };
-    this.panelItemMutationObserver = createObserver("mutation", this.updateFlowProps);
   }
   // --------------------------------------------------------------------------
   //
@@ -55,7 +58,8 @@ export class Flow {
    * Removes the currently active `calcite-panel`.
    */
   async back() {
-    const lastItem = this.el.querySelector("calcite-panel:last-child");
+    const { panels } = this;
+    const lastItem = panels[panels.length - 1];
     if (!lastItem) {
       return;
     }
@@ -72,15 +76,6 @@ export class Flow {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    this.updateFlowProps();
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -95,14 +90,14 @@ export class Flow {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { flowDirection, panelCount } = this;
+    const { flowDirection } = this;
     const frameDirectionClasses = {
       [CSS.frame]: true,
       [CSS.frameAdvancing]: flowDirection === "advancing",
       [CSS.frameRetreating]: flowDirection === "retreating"
     };
-    return (h("div", { class: frameDirectionClasses, key: panelCount },
-      h("slot", null)));
+    return (h("div", { class: frameDirectionClasses },
+      h("slot", { onSlotchange: this.updateFlowProps })));
   }
   static get is() { return "calcite-flow"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/flow/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * 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.83
  */
 export {};

package/dist/collection/components/flow/resources.js

@@ -1,6 +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.83
  */
 export const CSS = {
   frame: "frame",

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

@@ -1,6 +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.83
  */
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -18,7 +19,9 @@ export function toggleChildActionText({ parent, expanded }) {
   queryActions(parent)
     .filter((el) => el.slot !== ACTION_GROUP_SLOTS.menuActions)
     .forEach((action) => (action.textEnabled = expanded));
-  parent.querySelectorAll("calcite-action-group").forEach((group) => (group.expanded = expanded));
+  parent
+    .querySelectorAll("calcite-action-group, calcite-action-menu")
+    .forEach((el) => (el.expanded = expanded));
 }
 const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   if (tooltip) {
@@ -40,5 +43,5 @@ export const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, p
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
   const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
-  return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
+  return actionNode;
 };

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

@@ -1,6 +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.83
  */
 import { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {

package/dist/collection/components/graph/graph.css

@@ -80,6 +80,7 @@
 
 :host {
   display: block;
+  height: 100%;
 }
 
 .svg {

package/dist/collection/components/graph/graph.js

@@ -1,6 +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.83
  */
 import { Component, Element, Prop, h, forceUpdate } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/graph/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * 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.83
  */
 export {};

package/dist/collection/components/graph/util.js

@@ -1,11 +1,16 @@
 /*!
  * 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.83
  */
 /**
  * Calculate slope of the tangents
  * uses Steffen interpolation as it's monotonic
  * http://jrwalsh1.github.io/posts/interpolations/
+ *
+ * @param p0
+ * @param p1
+ * @param p2
  */
 function slope(p0, p1, p2) {
   const dx = p1[0] - p0[0];
@@ -19,6 +24,10 @@ function slope(p0, p1, p2) {
 }
 /**
  * Calculate slope for just one tangent (single-sided)
+ *
+ * @param p0
+ * @param p1
+ * @param m
  */
 function slopeSingle(p0, p1, m) {
   const dx = p1[0] - p0[0];
@@ -31,6 +40,12 @@ function slopeSingle(p0, p1, m) {
  *
  * Translates Hermite Spline to Beziér curve:
  * stackoverflow.com/questions/42574940/
+ *
+ * @param p0
+ * @param p1
+ * @param m0
+ * @param m1
+ * @param t
  */
 function bezier(p0, p1, m0, m1, t) {
   const [x0, y0] = p0;
@@ -44,6 +59,12 @@ function bezier(p0, p1, m0, m1, t) {
 /**
  * Generate a function which will translate a point
  * from the data coordinate space to svg viewbox oriented pixels
+ *
+ * @param root0
+ * @param root0.width
+ * @param root0.height
+ * @param root0.min
+ * @param root0.max
  */
 export function translate({ width, height, min, max }) {
   const rangeX = max[0] - min[0];
@@ -56,6 +77,8 @@ export function translate({ width, height, min, max }) {
 }
 /**
  * Get the min and max values from the dataset
+ *
+ * @param data
  */
 export function range(data) {
   const [startX, startY] = data[0];
@@ -69,6 +92,12 @@ export function range(data) {
 /**
  * Generate drawing commands for an area graph
  * returns a string can can be passed directly to a path element's `d` attribute
+ *
+ * @param root0
+ * @param root0.data
+ * @param root0.min
+ * @param root0.max
+ * @param root0.t
  */
 export function area({ data, min, max, t }) {
   if (data.length === 0) {

package/dist/collection/components/handle/handle.css

@@ -90,9 +90,7 @@
   align-self: stretch;
   border-style: none;
   background-color: transparent;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   color: var(--calcite-ui-border-3);
   padding: 0.75rem 0.25rem;
   line-height: 0;