@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

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

@@ -1,17 +1,18 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements } from "../../utils/floating-ui";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
+import { debounce } from "lodash-es";
 /**
  * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
@@ -78,6 +79,7 @@ export class Dropdown {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.slotChangeHandler = (event) => {
       this.defaultAssignedElements = event.target.assignedElements({
         flatten: true
@@ -94,14 +96,14 @@ export class Dropdown {
       this.triggers = event.target.assignedElements({
         flatten: true
       });
-      this.reposition();
+      this.debouncedReposition();
     };
     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.reposition();
+      this.debouncedReposition();
     };
     this.updateGroups = (event) => {
       const groups = event.target
@@ -130,14 +132,14 @@ export class Dropdown {
       scrollerEl.style.minWidth = `${referenceElWidth}px`;
     };
     this.setMaxScrollerHeight = () => {
-      const { scrollerEl, open } = this;
-      if (!scrollerEl || !open) {
+      const { scrollerEl } = this;
+      if (!scrollerEl) {
         return;
       }
-      this.reposition();
+      this.debouncedReposition();
       const maxScrollerHeight = this.getMaxScrollerHeight();
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-      this.reposition();
+      this.debouncedReposition();
     };
     this.setScrollerAndTransitionEl = (el) => {
       this.resizeObserver.observe(el);
@@ -203,7 +205,7 @@ export class Dropdown {
   }
   openHandler(value) {
     if (!this.disabled) {
-      this.reposition();
+      this.debouncedReposition();
       this.active = value;
       return;
     }
@@ -216,15 +218,16 @@ export class Dropdown {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
+    this.debouncedReposition();
   }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
   overlayPositioningHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   placementHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   //--------------------------------------------------------------------------
   //
@@ -235,7 +238,7 @@ export class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    this.reposition();
+    this.debouncedReposition();
     if (this.open) {
       this.openHandler(this.open);
     }
@@ -245,7 +248,7 @@ export class Dropdown {
     connectOpenCloseComponent(this);
   }
   componentDidLoad() {
-    this.reposition();
+    this.debouncedReposition();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -268,8 +271,7 @@ export class Dropdown {
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: open
           }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" },
-          h("div", { hidden: !open },
-            h("slot", { onSlotchange: this.updateGroups }))))));
+          h("slot", { onSlotchange: this.updateGroups })))));
   }
   //--------------------------------------------------------------------------
   //
@@ -278,12 +280,13 @@ export class Dropdown {
   //--------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { floatingEl, referenceEl, placement, overlayPositioning } = this;
+    const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
     return positionFloatingUI({
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
+      flipPlacements: filteredFlipPlacements,
       type: "menu"
     });
   }
@@ -378,7 +381,7 @@ export class Dropdown {
     this.selectedItems = this.items.filter((item) => item.selected);
   }
   getMaxScrollerHeight() {
-    const { maxItems } = this;
+    const { maxItems, items } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
@@ -398,7 +401,7 @@ export class Dropdown {
         });
       }
     });
-    return maxScrollerHeight;
+    return items.length > maxItems ? maxScrollerHeight : 0;
   }
   closeCalciteDropdown(focusTrigger = true) {
     this.open = false;
@@ -555,7 +558,7 @@ export class Dropdown {
         "text": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group"
       },
       "attribute": "max-items",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "0"
     },
     "overlayPositioning": {
@@ -578,7 +581,7 @@ export class Dropdown {
         "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"absolute\""
     },
     "placement": {
@@ -586,7 +589,7 @@ export class Dropdown {
       "mutable": false,
       "complexType": {
         "original": "MenuPlacement",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
         "references": {
           "MenuPlacement": {
             "location": "import",

package/dist/collection/components/dropdown/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.92
+ * v1.0.0-beta.94
  */
 export {};

package/dist/collection/components/dropdown/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.92
+ * v1.0.0-beta.94
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

package/dist/collection/components/dropdown-group/dropdown-group.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

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.92
+ * v1.0.0-beta.94
  */
 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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   containerSmall: "container--s",

package/dist/collection/components/dropdown-item/dropdown-item.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -327,7 +327,7 @@ export class DropdownItem {
         "text": "The rel attribute to apply to the hyperlink"
       },
       "attribute": "rel",
-      "reflect": false
+      "reflect": true
     },
     "target": {
       "type": "string",
@@ -344,7 +344,7 @@ export class DropdownItem {
         "text": "The target attribute to apply to the hyperlink"
       },
       "attribute": "target",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get events() { return [{

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.92
+ * v1.0.0-beta.94
  */
 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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
@@ -168,7 +168,7 @@ export class Fab {
         "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/."
       },
       "attribute": "icon",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "ICONS.plus"
     },
     "label": {

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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   button: "button"

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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { debounce } from "lodash-es";

package/dist/collection/components/filter/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   container: "container",

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

@@ -108,6 +108,7 @@
   align-items: stretch;
   padding: 0px;
 }
+:host ::slotted(calcite-flow-item), 
 :host ::slotted(calcite-panel) {
   block-size: 100%;
 }

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

@@ -1,48 +1,48 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
 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.
+ * @slot - A slot for adding `calcite-flow-item` or `calcite-panel`s (deprecated) to the flow.
  */
 export class Flow {
   constructor() {
-    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;
+    this.itemCount = 0;
+    this.items = [];
+    this.itemMutationObserver = createObserver("mutation", () => this.updateFlowProps());
+    this.getFlowDirection = (oldFlowItemCount, newFlowItemCount) => {
+      const allowRetreatingDirection = oldFlowItemCount > 1;
+      const allowAdvancingDirection = oldFlowItemCount && newFlowItemCount > 1;
       if (!allowAdvancingDirection && !allowRetreatingDirection) {
         return null;
       }
-      return newPanelCount < oldPanelCount ? "retreating" : "advancing";
+      return newFlowItemCount < oldFlowItemCount ? "retreating" : "advancing";
     };
     this.updateFlowProps = () => {
-      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 = panelNode === activePanel && newPanelCount > 1;
-          panelNode.hidden = panelNode !== activePanel;
+      const { el, items } = this;
+      const newItems = Array.from(el.querySelectorAll("calcite-flow-item, calcite-panel")).filter((flowItem) => !flowItem.matches("calcite-flow-item calcite-flow-item, calcite-panel calcite-panel"));
+      const oldItemCount = items.length;
+      const newItemCount = newItems.length;
+      const activeItem = newItems[newItemCount - 1];
+      const previousItem = newItems[newItemCount - 2];
+      if (newItemCount && activeItem) {
+        newItems.forEach((itemNode) => {
+          itemNode.showBackButton = itemNode === activeItem && newItemCount > 1;
+          itemNode.hidden = itemNode !== activeItem;
         });
       }
-      if (previousPanel) {
-        previousPanel.menuOpen = false;
+      if (previousItem) {
+        previousItem.menuOpen = false;
       }
-      this.panels = newPanels;
-      if (oldPanelCount !== newPanelCount) {
-        const flowDirection = this.getFlowDirection(oldPanelCount, newPanelCount);
-        this.panelCount = newPanelCount;
+      this.items = newItems;
+      if (oldItemCount !== newItemCount) {
+        const flowDirection = this.getFlowDirection(oldItemCount, newItemCount);
+        this.itemCount = newItemCount;
         this.flowDirection = flowDirection;
       }
     };
@@ -53,11 +53,11 @@ export class Flow {
   //
   // --------------------------------------------------------------------------
   /**
-   * Removes the currently active `calcite-panel`.
+   * Removes the currently active `calcite-flow-item` or `calcite-panel`.
    */
   async back() {
-    const { panels } = this;
-    const lastItem = panels[panels.length - 1];
+    const { items } = this;
+    const lastItem = items[items.length - 1];
     if (!lastItem) {
       return;
     }
@@ -76,19 +76,19 @@ export class Flow {
   // --------------------------------------------------------------------------
   connectedCallback() {
     var _a;
-    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    (_a = this.itemMutationObserver) === 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();
+    (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Private Methods
   //
   // --------------------------------------------------------------------------
-  handleCalcitePanelBackClick() {
+  handleItemBackClick() {
     this.back();
   }
   // --------------------------------------------------------------------------
@@ -115,35 +115,41 @@ export class Flow {
     "$": ["flow.css"]
   }; }
   static get states() { return {
-    "panelCount": {},
     "flowDirection": {},
-    "panels": {}
+    "itemCount": {},
+    "items": {}
   }; }
   static get methods() { return {
     "back": {
       "complexType": {
-        "signature": "() => Promise<HTMLCalcitePanelElement>",
+        "signature": "() => Promise<HTMLCalciteFlowItemElement>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
           },
-          "HTMLCalcitePanelElement": {
+          "HTMLCalciteFlowItemElement": {
             "location": "global"
           }
         },
-        "return": "Promise<HTMLCalcitePanelElement>"
+        "return": "Promise<HTMLCalciteFlowItemElement>"
       },
       "docs": {
-        "text": "Removes the currently active `calcite-panel`.",
+        "text": "Removes the currently active `calcite-flow-item` or `calcite-panel`.",
         "tags": []
       }
     }
   }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
+      "name": "calciteFlowItemBackClick",
+      "method": "handleItemBackClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "calcitePanelBackClick",
-      "method": "handleCalcitePanelBackClick",
+      "method": "handleItemBackClick",
       "target": undefined,
       "capture": false,
       "passive": false

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.92
+ * v1.0.0-beta.94
  */
 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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   frame: "frame",

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

@@ -0,0 +1,119 @@
+/* mixins & extensions */
+@keyframes in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes in-down {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, -5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-scale {
+  0% {
+    opacity: 0;
+    transform: scale3D(0.95, 0.95, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3D(1, 1, 1);
+  }
+}
+:root {
+  --calcite-animation-timing: 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;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
+}
+
+/**
+* Currently only used in Checkbox.
+*/
+:host {
+  /* Base ":host" styles for the component */
+  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 * {
+  box-sizing: border-box;
+}
+
+:root {
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
+:host {
+  position: relative;
+  display: flex;
+  inline-size: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
+.back-button {
+  border-width: 0px;
+  border-style: solid;
+  border-color: var(--calcite-ui-border-3);
+  border-inline-end-width: 1px;
+}