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

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

@@ -1,6 +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.81
+ * v1.0.0-beta.84
  */
 export {};

package/dist/collection/components/dropdown-group/resources.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
  */
 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 {
@@ -154,10 +155,9 @@
   padding-inline-start: 0.25rem;
 }
 
-:host, .container--link a {
-  outline-offset: 0;
+:host, 
+.container--link a {
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) {
@@ -210,14 +210,16 @@
   padding-inline-start: 2.5rem;
 }
 
-:host(:hover) .container, :host(:active) .container {
+:host(:hover) .container, 
+:host(:active) .container {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
 
-:host(:hover) .container--link .dropdown-link, :host(:active) .container--link .dropdown-link {
+:host(:hover) .container--link .dropdown-link, 
+:host(:active) .container--link .dropdown-link {
   color: var(--calcite-ui-text-1);
 }
 
@@ -231,15 +233,19 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-:host(:hover) .container:before, :host(:active) .container:before, :host(:focus) .container:before {
+:host(:hover) .container:before, 
+:host(:active) .container:before, 
+:host(:focus) .container:before {
   opacity: 1;
 }
 
-:host([active]) .container:not(.container--none-selection), :host([active]) .container--link .dropdown-link {
+:host([active]) .container:not(.container--none-selection), 
+:host([active]) .container--link .dropdown-link {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .container:not(.container--none-selection):before, :host([active]) .container--link .dropdown-link:before {
+:host([active]) .container:not(.container--none-selection):before, 
+:host([active]) .container--link .dropdown-link:before {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
@@ -248,7 +254,8 @@
   color: var(--calcite-ui-brand);
 }
 
-.container--multi-selection:before, .container--none-selection:before {
+.container--multi-selection:before, 
+.container--none-selection:before {
   display: none;
 }
 

package/dist/collection/components/dropdown-item/dropdown-item.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.81
+ * v1.0.0-beta.84
  */
 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.
@@ -26,7 +26,8 @@ export class DropdownItem {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.el.focus();
+    var _a;
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -60,7 +61,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,
@@ -86,30 +87,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);
@@ -118,6 +117,7 @@ export class DropdownItem {
       this.requestedDropdownItem = event.detail.requestedDropdownItem;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -152,7 +152,7 @@ export class DropdownItem {
     }
   }
   emitRequestedItem() {
-    this.calciteDropdownItemSelect.emit({
+    this.calciteInternalDropdownItemSelect.emit({
       requestedDropdownItem: this.el,
       requestedDropdownGroup: this.parentDropdownGroupEl
     });
@@ -310,8 +310,8 @@ export class DropdownItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteDropdownItemSelect",
-      "name": "calciteDropdownItemSelect",
+      "method": "calciteInternalDropdownItemSelect",
+      "name": "calciteInternalDropdownItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -328,8 +328,8 @@ export class DropdownItem {
         "references": {}
       }
     }, {
-      "method": "calciteDropdownItemKeyEvent",
-      "name": "calciteDropdownItemKeyEvent",
+      "method": "calciteInternalDropdownItemKeyEvent",
+      "name": "calciteInternalDropdownItemKeyEvent",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -351,8 +351,8 @@ export class DropdownItem {
         }
       }
     }, {
-      "method": "calciteDropdownCloseRequest",
-      "name": "calciteDropdownCloseRequest",
+      "method": "calciteInternalDropdownCloseRequest",
+      "name": "calciteInternalDropdownCloseRequest",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -401,7 +401,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,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
  */
 export const CSS = {
   containerLink: "container--link",

package/dist/collection/components/fab/fab.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 { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
@@ -28,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,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
  */
 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 {
@@ -175,6 +175,6 @@ input[type=text]:focus ~ .search-icon {
   background-color: transparent;
   color: var(--calcite-ui-text-2);
 }
-.clear-button:hover, .clear-button:focus {
+.clear-button:hover,  .clear-button:focus {
   color: var(--calcite-ui-text-1);
 }

package/dist/collection/components/filter/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 { Component, Element, Event, Prop, h, Method, Fragment, Watch } from "@stencil/core";
 import { debounce, forIn } from "lodash-es";
@@ -52,7 +52,7 @@ export class Filter {
       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)) {
@@ -76,10 +76,13 @@ export class Filter {
       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 = "";
@@ -135,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,12 +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
  */
 export const CSS = {
   container: "container",
-  searchIcon: "search-icon",
-  clearButton: "clear-button"
+  searchIcon: "search-icon"
 };
 export const TEXT = {
   filterLabel: "Filter",

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,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 { Component, Element, Listen, Method, State, h } from "@stencil/core";
 import { CSS } from "./resources";
@@ -14,6 +14,7 @@ export class Flow {
     this.panelCount = 0;
     this.flowDirection = null;
     this.panels = [];
+    this.panelItemMutationObserver = createObserver("mutation", () => this.updateFlowProps());
     this.getFlowDirection = (oldPanelCount, newPanelCount) => {
       const allowRetreatingDirection = oldPanelCount > 1;
       const allowAdvancingDirection = oldPanelCount && newPanelCount > 1;
@@ -23,15 +24,15 @@ export class Flow {
       return newPanelCount < oldPanelCount ? "retreating" : "advancing";
     };
     this.updateFlowProps = () => {
-      const { panels } = this;
-      const newPanels = Array.from(this.el.querySelectorAll("calcite-panel"));
+      const { el, panels } = this;
+      const newPanels = Array.from(el.querySelectorAll("calcite-panel")).filter((panel) => !panel.matches("calcite-panel calcite-panel"));
       const oldPanelCount = panels.length;
       const newPanelCount = newPanels.length;
       const activePanel = newPanels[newPanelCount - 1];
       const previousPanel = newPanels[newPanelCount - 2];
       if (newPanelCount && activePanel) {
         newPanels.forEach((panelNode) => {
-          panelNode.showBackButton = newPanelCount > 1;
+          panelNode.showBackButton = panelNode === activePanel && newPanelCount > 1;
           panelNode.hidden = panelNode !== activePanel;
         });
       }
@@ -45,7 +46,6 @@ export class Flow {
         this.flowDirection = flowDirection;
       }
     };
-    this.panelItemMutationObserver = createObserver("mutation", this.updateFlowProps);
   }
   // --------------------------------------------------------------------------
   //
@@ -56,7 +56,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;
     }
@@ -96,13 +97,13 @@ 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 },
+    return (h("div", { class: frameDirectionClasses },
       h("slot", null)));
   }
   static get is() { return "calcite-flow"; }

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

@@ -1,6 +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.81
+ * v1.0.0-beta.84
  */
 export {};

package/dist/collection/components/flow/resources.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
  */
 export const CSS = {
   frame: "frame",

package/dist/collection/components/functional/ExpandToggle.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 { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -19,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) {
@@ -41,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,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 { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {
@@ -10,5 +10,5 @@ export function constrainHeadingLevel(level) {
 export const Heading = (props, children) => {
   const HeadingTag = `h${props.level}`;
   delete props.level;
-  return h(HeadingTag, Object.assign({}, props), children);
+  return h(HeadingTag, { ...props }, children);
 };

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

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

@@ -1,6 +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.81
+ * v1.0.0-beta.84
  */
 export {};

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

@@ -1,12 +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.81
+ * v1.0.0-beta.84
  */
 /**
  * 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];
@@ -20,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];
@@ -32,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;
@@ -45,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];
@@ -57,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];
@@ -70,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;