@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.89

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

@@ -1,14 +1,15 @@
 /*!
  * 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.86
+ * v1.0.0-beta.89
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { createPopper, CSS as PopperCSS, updatePopper, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { guid } from "../../utils/guid";
 /**
  * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
  * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
@@ -45,7 +46,7 @@ export class Dropdown {
     /**
      * Determines where the dropdown will be positioned relative to the button.
      *
-     * @default "bottom-leading"
+     * @default "bottom-start"
      */
     this.placement = defaultMenuPlacement;
     /** specify the scale of dropdown, defaults to m */
@@ -59,15 +60,22 @@ export class Dropdown {
     /** specify whether the dropdown is opened by hover or click of a trigger element */
     this.type = "click";
     this.items = [];
-    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.guid = `calcite-dropdown-${guid()}`;
+    this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.slotChangeHandler = (event) => {
+      this.defaultAssignedElements = event.target.assignedElements({
+        flatten: true
+      });
+      this.updateItems();
+    };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -81,19 +89,15 @@ export class Dropdown {
       this.reposition();
     };
     this.updateItems = () => {
-      this.items = this.groups
-        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+      const { defaultAssignedElements } = this;
+      this.items = defaultAssignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group, calcite-dropdown-item"))
+        .map((el) => el.matches("calcite-dropdown-group")
+        ? Array.from(el.querySelectorAll("calcite-dropdown-item"))
+        : [el])
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition();
     };
-    this.updateGroups = (event) => {
-      const groups = event.target
-        .assignedElements({ flatten: true })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
-      this.groups = groups;
-      this.updateItems();
-    };
     this.resizeObserverCallback = (entries) => {
       entries.forEach((entry) => {
         const { target } = entry;
@@ -127,34 +131,34 @@ export class Dropdown {
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
       this.scrollerEl = scrollerEl;
-      this.scrollerEl.addEventListener("transitionrun", this.transitionRunHandler);
+      this.scrollerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.open || this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
+        this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active || this.open
-          ? this.emitOpenCloseEvent("beforeOpen")
-          : this.emitOpenCloseEvent("beforeClose");
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
+        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
       this.resizeObserver.observe(el);
     };
-    this.setMenuEl = (el) => {
-      this.menuEl = el;
+    this.setFloatingEl = (el) => {
+      this.floatingEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
-    this.keyDownHandler = (e) => {
-      const target = e.target;
+    this.keyDownHandler = (event) => {
+      const target = event.target;
       if (target !== this.referenceEl) {
         return;
       }
-      const key = e.key;
-      if ((this.open || this.active) && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
+      const key = event.key;
+      if ((this.open || this.active) && (key === "Escape" || (event.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
       }
@@ -203,6 +207,9 @@ export class Dropdown {
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
+  overlayPositioningHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -214,8 +221,8 @@ export class Dropdown {
   connectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    this.createPopper();
     this.setFilteredPlacements();
+    this.reposition();
   }
   componentDidLoad() {
     this.reposition();
@@ -224,27 +231,25 @@ export class Dropdown {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    this.destroyPopper();
-    if (this.scrollerEl) {
-      this.scrollerEl.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   render() {
-    const { active, open } = this;
+    const { active, open, guid } = this;
     return (h(Host, null,
-      h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
-        h("slot", { "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
-      h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
-        h("div", { class: {
+      h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
+        h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
+      h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl },
+        h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
             ["calcite-dropdown-content"]: true,
-            [PopperCSS.animation]: true,
-            [PopperCSS.animationActive]: active || open
-          }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
+            [FloatingCSS.animation]: true,
+            [FloatingCSS.animationActive]: active || open
+          }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" },
           h("div", { hidden: !(open || active) },
-            h("slot", { onSlotchange: this.updateGroups }))))));
+            h("slot", { onSlotchange: this.slotChangeHandler }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -253,30 +258,28 @@ export class Dropdown {
   //--------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, menuEl, placement } = this;
-    const modifiers = this.getModifiers();
-    popper
-      ? await updatePopper({
-        el: menuEl,
-        modifiers,
-        placement,
-        popper
-      })
-      : this.createPopper();
-  }
-  closeCalciteDropdownOnClick(e) {
+    const { floatingEl, referenceEl, placement, overlayPositioning } = this;
+    return positionFloatingUI({
+      floatingEl,
+      referenceEl,
+      overlayPositioning,
+      placement,
+      type: "menu"
+    });
+  }
+  closeCalciteDropdownOnClick(event) {
     const isOpen = !(this.open || this.active);
-    if (isOpen || e.composedPath().includes(this.el)) {
+    if (isOpen || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
   }
-  closeCalciteDropdownOnEvent(e) {
+  closeCalciteDropdownOnEvent(event) {
     this.closeCalciteDropdown();
-    e.stopPropagation();
+    event.stopPropagation();
   }
-  closeCalciteDropdownOnOpenEvent(e) {
-    if (e.composedPath().includes(this.el)) {
+  closeCalciteDropdownOnOpenEvent(event) {
+    if (event.composedPath().includes(this.el)) {
       return;
     }
     this.active = false;
@@ -292,8 +295,8 @@ export class Dropdown {
       this.closeCalciteDropdown();
     }
   }
-  calciteInternalDropdownItemKeyEvent(e) {
-    const { keyboardEvent } = e.detail;
+  calciteInternalDropdownItemKeyEvent(event) {
+    const { keyboardEvent } = event.detail;
     // handle edge
     const target = keyboardEvent.target;
     const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
@@ -327,7 +330,7 @@ export class Dropdown {
         this.focusLastItem();
         break;
     }
-    e.stopPropagation();
+    event.stopPropagation();
   }
   handleItemSelect(event) {
     this.updateSelectedItems();
@@ -339,51 +342,17 @@ export class Dropdown {
     }
     event.stopPropagation();
   }
-  emitOpenCloseEvent(componentVisibilityState) {
-    const payload = {
-      el: this.el
-    };
-    const emitComponentState = {
-      beforeOpen: () => this.calciteDropdownBeforeOpen.emit(payload),
-      open: () => this.calciteDropdownOpen.emit(payload),
-      beforeClose: () => this.calciteDropdownBeforeClose.emit(payload),
-      close: () => this.calciteDropdownClose.emit(payload)
-    };
-    (emitComponentState[componentVisibilityState] ||
-      emitComponentState["The component state is unknown."])();
+  onBeforeOpen() {
+    this.calciteDropdownBeforeOpen.emit();
   }
-  getModifiers() {
-    const flipModifier = {
-      name: "flip",
-      enabled: true
-    };
-    flipModifier.options = {
-      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
-    };
-    const eventListenerModifier = {
-      name: "eventListeners",
-      enabled: this.open || this.active
-    };
-    return [flipModifier, eventListenerModifier];
-  }
-  createPopper() {
-    this.destroyPopper();
-    const { menuEl, referenceEl, placement, overlayPositioning } = this;
-    const modifiers = this.getModifiers();
-    this.popper = createPopper({
-      el: menuEl,
-      modifiers,
-      overlayPositioning,
-      placement,
-      referenceEl
-    });
+  onOpen() {
+    this.calciteDropdownOpen.emit();
   }
-  destroyPopper() {
-    const { popper } = this;
-    if (popper) {
-      popper.destroy();
-    }
-    this.popper = null;
+  onBeforeClose() {
+    this.calciteDropdownBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteDropdownClose.emit();
   }
   updateSelectedItems() {
     this.selectedItems = this.items.filter((item) => item.active);
@@ -393,22 +362,20 @@ export class Dropdown {
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    this.groups.forEach((group) => {
-      if (maxItems > 0 && itemsToProcess < maxItems) {
-        Array.from(group.children).forEach((item, index) => {
-          if (index === 0) {
-            if (isNaN(groupHeaderHeight)) {
-              groupHeaderHeight = item.offsetTop;
-            }
-            maxScrollerHeight += groupHeaderHeight;
-          }
-          if (itemsToProcess < maxItems) {
-            maxScrollerHeight += item.offsetHeight;
-            itemsToProcess += 1;
+    if (maxItems > 0 && itemsToProcess < maxItems) {
+      this.items.forEach((item) => {
+        if (item.matches("calcite-dropdown-group calcite-dropdown-item:first-child")) {
+          if (isNaN(groupHeaderHeight)) {
+            groupHeaderHeight = item.offsetTop;
           }
-        });
-      }
-    });
+          maxScrollerHeight += groupHeaderHeight;
+        }
+        if (itemsToProcess < maxItems) {
+          maxScrollerHeight += item.offsetHeight;
+          itemsToProcess += 1;
+        }
+      });
+    }
     return maxScrollerHeight;
   }
   closeCalciteDropdown(focusTrigger = true) {
@@ -426,18 +393,18 @@ export class Dropdown {
     const lastItem = this.items[this.items.length - 1];
     this.getFocusableElement(lastItem);
   }
-  focusNextItem(e) {
-    const index = this.itemIndex(e);
+  focusNextItem(el) {
+    const index = this.itemIndex(el);
     const nextItem = this.items[index + 1] || this.items[0];
     this.getFocusableElement(nextItem);
   }
-  focusPrevItem(e) {
-    const index = this.itemIndex(e);
+  focusPrevItem(el) {
+    const index = this.itemIndex(el);
     const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
     this.getFocusableElement(prevItem);
   }
-  itemIndex(e) {
-    return this.items.indexOf(e);
+  itemIndex(el) {
+    return this.items.indexOf(el);
   }
   getFocusableElement(item) {
     if (!item) {
@@ -536,12 +503,12 @@ export class Dropdown {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "ComputedPlacement[]",
-        "resolved": "ComputedPlacement[]",
+        "original": "EffectivePlacement[]",
+        "resolved": "Placement[]",
         "references": {
-          "ComputedPlacement": {
+          "EffectivePlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -579,7 +546,7 @@ export class Dropdown {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -598,11 +565,11 @@ export class Dropdown {
       "mutable": false,
       "complexType": {
         "original": "MenuPlacement",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
         "references": {
           "MenuPlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -611,7 +578,7 @@ export class Dropdown {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "\"bottom-leading\""
+            "text": "\"bottom-start\""
           }],
         "text": "Determines where the dropdown will be positioned relative to the button."
       },
@@ -722,80 +689,64 @@ export class Dropdown {
         "references": {}
       }
     }, {
-      "method": "calciteDropdownBeforeOpen",
-      "name": "calciteDropdownBeforeOpen",
+      "method": "calciteDropdownBeforeClose",
+      "name": "calciteDropdownBeforeClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteDropdownElement }",
-        "resolved": "{ el: HTMLCalciteDropdownElement; }",
-        "references": {
-          "HTMLCalciteDropdownElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
-      "method": "calciteDropdownOpen",
-      "name": "calciteDropdownOpen",
+      "method": "calciteDropdownClose",
+      "name": "calciteDropdownClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteDropdownElement }",
-        "resolved": "{ el: HTMLCalciteDropdownElement; }",
-        "references": {
-          "HTMLCalciteDropdownElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
-      "method": "calciteDropdownBeforeClose",
-      "name": "calciteDropdownBeforeClose",
+      "method": "calciteDropdownBeforeOpen",
+      "name": "calciteDropdownBeforeOpen",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteDropdownElement }",
-        "resolved": "{ el: HTMLCalciteDropdownElement; }",
-        "references": {
-          "HTMLCalciteDropdownElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
-      "method": "calciteDropdownClose",
-      "name": "calciteDropdownClose",
+      "method": "calciteDropdownOpen",
+      "name": "calciteDropdownOpen",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteDropdownElement }",
-        "resolved": "{ el: HTMLCalciteDropdownElement; }",
-        "references": {
-          "HTMLCalciteDropdownElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }]; }
   static get methods() { return {
@@ -832,6 +783,9 @@ export class Dropdown {
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"
+    }, {
+      "propName": "overlayPositioning",
+      "methodName": "overlayPositioningHandler"
     }, {
       "propName": "placement",
       "methodName": "placementHandler"

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.86
+ * v1.0.0-beta.89
  */
 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.86
+ * v1.0.0-beta.89
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -111,12 +111,12 @@
 }
 
 .dropdown-title {
-  margin-bottom: -1px;
+  margin-block-end: -1px;
   display: block;
   cursor: default;
   overflow-wrap: break-word;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   font-weight: var(--calcite-font-weight-bold);
@@ -125,6 +125,6 @@
 
 .dropdown-separator {
   display: block;
-  height: 1px;
+  block-size: 1px;
   background-color: var(--calcite-ui-border-3);
 }

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.86
+ * v1.0.0-beta.89
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
@@ -29,7 +29,7 @@ export class DropdownGroup {
     const scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
-    return (h(Host, { role: "menu" },
+    return (h(Host, { "aria-label": this.groupTitle, role: "group" },
       h("div", { class: {
           container: true,
           [CSS.containerSmall]: scale === "s",
@@ -147,9 +147,14 @@ export class DropdownGroup {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "RequestedItem",
+        "resolved": "RequestedItem",
+        "references": {
+          "RequestedItem": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "el"; }

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