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

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

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.87
  */
 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";
@@ -45,7 +45,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 */
@@ -127,34 +127,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 +203,9 @@ export class Dropdown {
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
+  overlayPositioningHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -214,8 +217,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,24 +227,22 @@ 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;
     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", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl },
         h("div", { class: {
             ["calcite-dropdown-content"]: true,
-            [PopperCSS.animation]: true,
-            [PopperCSS.animationActive]: active || open
+            [FloatingCSS.animation]: true,
+            [FloatingCSS.animationActive]: active || open
           }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
           h("div", { hidden: !(open || active) },
             h("slot", { onSlotchange: this.updateGroups }))))));
@@ -253,30 +254,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 +291,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 +326,7 @@ export class Dropdown {
         this.focusLastItem();
         break;
     }
-    e.stopPropagation();
+    event.stopPropagation();
   }
   handleItemSelect(event) {
     this.updateSelectedItems();
@@ -339,51 +338,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);
@@ -426,18 +391,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 +501,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 +544,7 @@ export class Dropdown {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -598,11 +563,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 +576,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 +687,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 +781,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.84
+ * v1.0.0-beta.87
  */
 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.84
+ * v1.0.0-beta.87
  */
 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.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
@@ -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.84
+ * v1.0.0-beta.87
  */
 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.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   containerSmall: "container--s",

package/dist/collection/components/dropdown-item/dropdown-item.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]) {
@@ -79,8 +79,7 @@
 }
 
 .container--s {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   padding-inline-end: 0.5rem;
@@ -88,8 +87,7 @@
 }
 
 .container--m {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   padding-inline-end: 0.75rem;
@@ -97,8 +95,7 @@
 }
 
 .container--l {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   padding-inline-end: 1rem;
@@ -142,8 +139,6 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   text-align: start;
@@ -161,6 +156,7 @@
 }
 
 :host(:focus) {
+  outline: 2px solid transparent;
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -177,15 +173,12 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .container--s .dropdown-link {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   padding-inline-end: 0.5rem;
@@ -193,8 +186,7 @@
 }
 
 .container--m .dropdown-link {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   padding-inline-end: 0.75rem;
@@ -202,8 +194,7 @@
 }
 
 .container--l .dropdown-link {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   padding-inline-end: 1rem;