@esri/calcite-components 1.0.0-next.415 → 1.0.0-next.418

package/dist/collection/components/action-menu/action-menu.js

@@ -263,10 +263,10 @@ export class ActionMenu {
     return getSlotted(el, SLOTS.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
   }
   renderMenuItems() {
-    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning } = this;
+    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-    return (h("calcite-popover", { disablePointer: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl },
+    return (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl },
       h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, onKeyUp: this.menuActionsContainerKeyUp, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 },
         h("slot", null))));
   }
@@ -315,12 +315,12 @@ export class ActionMenu {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Placement[]",
-        "resolved": "Placement[]",
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
         "references": {
-          "Placement": {
+          "ComputedPlacement": {
             "location": "import",
-            "path": "@popperjs/core"
+            "path": "../../utils/popper"
           }
         }
       },

package/dist/collection/components/combobox/combobox.js

@@ -5,9 +5,9 @@
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
-import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
+import { createPopper, updatePopper, CSS as PopperCSS, popperMenuFlipPlacements, defaultMenuPlacement } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement, TEXT } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -67,12 +67,10 @@ export class Combobox {
     this.groupItems = [];
     this.selectedItems = [];
     this.visibleItems = [];
-    this.hideList = !this.active;
     this.activeItemIndex = -1;
     this.activeChipIndex = -1;
     this.activeDescendant = "";
     this.text = "";
-    this.open = this.active;
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
@@ -161,11 +159,11 @@ export class Combobox {
       }
     };
     this.toggleCloseEnd = () => {
-      this.hideList = true;
+      this.active = false;
       this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
     };
     this.toggleOpenEnd = () => {
-      this.hideList = false;
+      this.active = true;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
@@ -199,9 +197,7 @@ export class Combobox {
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if ((!this.active && !this.open) ||
-        composedPath.includes(this.el) ||
-        composedPath.includes(this.referenceEl)) {
+      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text) {
@@ -216,7 +212,6 @@ export class Combobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
-      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -294,20 +289,11 @@ export class Combobox {
       this.setInactiveIfNotContained(event);
     };
   }
-  activeHandler(newValue, oldValue) {
+  activeHandler() {
     if (this.disabled) {
       this.active = false;
       return;
     }
-    // when closing, wait transition time then hide to prevent overscroll
-    if (oldValue && !newValue) {
-      this.el.addEventListener("calciteComboboxClose", this.toggleCloseEnd);
-      this.open = false;
-    }
-    else if (!oldValue && newValue) {
-      this.el.addEventListener("calciteComboboxOpen", this.toggleOpenEnd);
-      this.open = true;
-    }
     this.reposition();
   }
   handleDisabledChange(value) {
@@ -361,7 +347,7 @@ export class Combobox {
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: ComboboxDefaultPlacement,
+        placement: defaultMenuPlacement,
         popper
       })
       : this.createPopper();
@@ -425,9 +411,13 @@ export class Combobox {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+    };
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.active
     };
-    return [flipModifier];
+    return [flipModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -437,7 +427,7 @@ export class Combobox {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: ComboboxDefaultPlacement,
+      placement: defaultMenuPlacement,
       referenceEl
     });
   }
@@ -718,15 +708,15 @@ export class Combobox {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
-    const { active, setMenuEl, setListContainerEl, hideList, open } = this;
+    const { active, setMenuEl, setListContainerEl } = this;
     const classes = {
       "list-container": true,
       [PopperCSS.animation]: true,
       [PopperCSS.animationActive]: active
     };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl },
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": active }, ref: setMenuEl },
       h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl },
-        h("ul", { class: { list: true, "list--hide": hideList } },
+        h("ul", { class: { list: true, "list--hide": !active } },
           h("slot", null)))));
   }
   renderIconStart() {
@@ -740,13 +730,13 @@ export class Combobox {
       h("calcite-icon", { icon: "chevron-down", scale: "s" })));
   }
   render() {
-    const { guid, open, label } = this;
+    const { active, guid, label } = this;
     const single = this.selectionMode === "single";
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": active.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
-          "wrapper--active": open
+          "wrapper--active": active
         }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" },
         h("div", { class: "grid-input" },
           this.renderIconStart(),
@@ -1017,6 +1007,26 @@ export class Combobox {
       "attribute": "intl-remove-tag",
       "reflect": false,
       "defaultValue": "TEXT.removeTag"
+    },
+    "flipPlacements": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
+        "references": {
+          "ComputedPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the available placements that can be used when a flip occurs."
+      }
     }
   }; }
   static get states() { return {
@@ -1025,12 +1035,10 @@ export class Combobox {
     "selectedItems": {},
     "visibleItems": {},
     "needsIcon": {},
-    "hideList": {},
     "activeItemIndex": {},
     "activeChipIndex": {},
     "activeDescendant": {},
-    "text": {},
-    "open": {}
+    "text": {}
   }; }
   static get events() { return [{
       "method": "calciteLookupChange",

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

@@ -5,7 +5,6 @@
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
-export const ComboboxDefaultPlacement = "bottom-leading";
 export const TEXT = {
   removeTag: "Remove tag"
 };

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

@@ -4,8 +4,8 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, getSlotted } from "../../utils/dom";
-import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
-import { DefaultDropdownPlacement, SLOTS } from "./resources";
+import { createPopper, CSS as PopperCSS, updatePopper, popperMenuFlipPlacements, defaultMenuPlacement } from "../../utils/popper";
+import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -39,7 +39,7 @@ export class Dropdown {
      * Determines where the dropdown will be positioned relative to the button.
      * @default "bottom-leading"
      */
-    this.placement = DefaultDropdownPlacement;
+    this.placement = defaultMenuPlacement;
     /** specify the scale of dropdown, defaults to m */
     this.scale = "m";
     /**
@@ -284,9 +284,13 @@ export class Dropdown {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
     };
-    return [flipModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.active
+    };
+    return [flipModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -434,6 +438,26 @@ export class Dropdown {
       "reflect": true,
       "defaultValue": "false"
     },
+    "flipPlacements": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
+        "references": {
+          "ComputedPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the available placements that can be used when a flip occurs."
+      }
+    },
     "maxItems": {
       "type": "number",
       "mutable": false,
@@ -479,12 +503,12 @@ export class Dropdown {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DropdownPlacement",
+        "original": "MenuPlacement",
         "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
         "references": {
-          "DropdownPlacement": {
+          "MenuPlacement": {
             "location": "import",
-            "path": "./interfaces"
+            "path": "../../utils/popper"
           }
         }
       },
@@ -499,7 +523,7 @@ export class Dropdown {
       },
       "attribute": "placement",
       "reflect": true,
-      "defaultValue": "DefaultDropdownPlacement"
+      "defaultValue": "defaultMenuPlacement"
     },
     "scale": {
       "type": "string",

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

@@ -2,7 +2,6 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-export const DefaultDropdownPlacement = "bottom-leading";
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };

package/dist/collection/components/input-date-picker/input-date-picker.js

@@ -8,9 +8,8 @@ import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDa
 import { TEXT } from "../date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
-import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
+import { createPopper, updatePopper, CSS as PopperCSS, popperMenuFlipPlacements, defaultMenuPlacement } from "../../utils/popper";
 import { updateHostInteraction } from "../../utils/interactive";
-const DEFAULT_PLACEMENT = "bottom-leading";
 export class InputDatePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -198,7 +197,7 @@ export class InputDatePicker {
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: DEFAULT_PLACEMENT,
+        placement: defaultMenuPlacement,
         popper
       })
       : this.createPopper();
@@ -305,9 +304,13 @@ export class InputDatePicker {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
     };
-    return [flipModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.active
+    };
+    return [flipModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -320,7 +323,7 @@ export class InputDatePicker {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: DEFAULT_PLACEMENT,
+      placement: defaultMenuPlacement,
       referenceEl
     });
   }
@@ -504,6 +507,26 @@ export class InputDatePicker {
       "attribute": "value",
       "reflect": false
     },
+    "flipPlacements": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
+        "references": {
+          "ComputedPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the available placements that can be used when a flip occurs."
+      }
+    },
     "headingLevel": {
       "type": "number",
       "mutable": false,

package/dist/collection/components/popover/popover.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
-import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, POPOVER_REFERENCE, TEXT } from "./resources";
+import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, POPOVER_REFERENCE, TEXT, defaultPopoverPlacement } from "./resources";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
 import { queryElementRoots } from "../../utils/dom";
@@ -54,7 +54,7 @@ export class Popover {
      * Determines where the component will be positioned relative to the referenceElement.
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
-    this.placement = "auto";
+    this.placement = defaultPopoverPlacement;
     /** Text for close button.
      * @default "Close"
      */
@@ -213,7 +213,11 @@ export class Popover {
         offset: [offsetSkidding, offsetDistance]
       }
     };
-    return [arrowModifier, flipModifier, offsetModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.open
+    };
+    return [arrowModifier, flipModifier, offsetModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -360,12 +364,12 @@ export class Popover {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Placement[]",
-        "resolved": "Placement[]",
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
         "references": {
-          "Placement": {
+          "ComputedPlacement": {
             "location": "import",
-            "path": "@popperjs/core"
+            "path": "../../utils/popper"
           }
         }
       },
@@ -536,7 +540,7 @@ export class Popover {
       },
       "attribute": "placement",
       "reflect": true,
-      "defaultValue": "\"auto\""
+      "defaultValue": "defaultPopoverPlacement"
     },
     "referenceElement": {
       "type": "string",

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

@@ -17,6 +17,7 @@ export const CSS = {
 export const TEXT = {
   close: "Close"
 };
+export const defaultPopoverPlacement = "auto";
 export const POPOVER_REFERENCE = "data-calcite-popover-reference";
 export const ARIA_CONTROLS = "aria-controls";
 export const ARIA_EXPANDED = "aria-expanded";

package/dist/collection/components/tooltip/tooltip.js

@@ -147,7 +147,11 @@ export class Tooltip {
         offset: [offsetSkidding, offsetDistance]
       }
     };
-    return [arrowModifier, offsetModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.open
+    };
+    return [arrowModifier, offsetModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();

package/dist/collection/utils/popper.js

@@ -4,6 +4,72 @@
  */
 import { createPopper as setupPopper } from "@popperjs/core";
 import { getElementDir } from "./dom";
+export const popperPlacements = [
+  "auto",
+  "auto-start",
+  "auto-end",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end",
+  "leading-start",
+  "leading",
+  "leading-end",
+  "trailing-end",
+  "trailing",
+  "trailing-start",
+  "leading-leading",
+  "leading-trailing",
+  "trailing-leading",
+  "trailing-trailing",
+  "top-leading",
+  "top-trailing",
+  "bottom-leading",
+  "bottom-trailing",
+  "right-leading",
+  "right-trailing",
+  "left-leading",
+  "left-trailing"
+];
+export const popperFlipPlacements = [
+  "top",
+  "bottom",
+  "right",
+  "left",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end"
+];
+export const defaultMenuPlacement = "bottom-leading";
+export const popperMenuPlacements = [
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end",
+  "top-leading",
+  "top-trailing",
+  "bottom-leading",
+  "bottom-trailing"
+];
+export const popperMenuFlipPlacements = [
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end"
+];
 export const CSS = {
   animation: "calcite-popper-anim",
   animationActive: "calcite-popper-anim--active"

package/dist/components/action-group.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './action-menu.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -25,7 +25,7 @@ const ICONS = {
 
 const actionGroupCss = "@-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;-ms-flex-direction:column;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-top:0px}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
 
-let ActionGroup = class extends HTMLElement {
+const ActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -93,8 +93,7 @@ let ActionGroup = class extends HTMLElement {
     "expanded": ["expandedHandler"]
   }; }
   static get style() { return actionGroupCss; }
-};
-ActionGroup = /*@__PURE__*/ proxyCustomElement(ActionGroup, [1, "calcite-action-group", {
+}, [1, "calcite-action-group", {
     "expanded": [516],
     "layout": [513],
     "columns": [514],

package/dist/components/action-menu.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { b as getSlotted, f as focusElement } from './dom.js';
 import { g as getRoundRobinIndex } from './array.js';
 import { g as guid } from './guid.js';
@@ -30,7 +30,7 @@ const actionMenuCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 
 const SUPPORTED_BUTTON_NAV_KEYS = ["ArrowUp", "ArrowDown"];
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
-let ActionMenu = class extends HTMLElement {
+const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -279,10 +279,10 @@ let ActionMenu = class extends HTMLElement {
     return getSlotted(el, SLOTS.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
   }
   renderMenuItems() {
-    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning } = this;
+    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-    return (h("calcite-popover", { disablePointer: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, onKeyUp: this.menuActionsContainerKeyUp, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 }, h("slot", null))));
+    return (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, onKeyUp: this.menuActionsContainerKeyUp, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 }, h("slot", null))));
   }
   render() {
     return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS.tooltip })));
@@ -302,8 +302,7 @@ let ActionMenu = class extends HTMLElement {
     "activeMenuItemIndex": ["activeMenuItemIndexHandler"]
   }; }
   static get style() { return actionMenuCss; }
-};
-ActionMenu = /*@__PURE__*/ proxyCustomElement(ActionMenu, [1, "calcite-action-menu", {
+}, [1, "calcite-action-menu", {
     "expanded": [516],
     "flipPlacements": [16],
     "label": [1],