@esri/calcite-components 1.0.0-beta.85 → 1.0.0-beta.88

package/dist/collection/components/combobox/combobox.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --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);
+}
+
 /**
 * CSS Custom Properties
 *
@@ -90,13 +98,6 @@
   display: block;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -130,7 +131,8 @@
   color: var(--calcite-ui-text-1);
   outline-color: transparent;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
-  padding: calc(var(--calcite-combobox-item-spacing-unit-s) / 4) var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host(:focus-within) .wrapper, 
@@ -140,7 +142,8 @@
 }
 
 .wrapper--single {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
   cursor: pointer;
   flex-wrap: nowrap;
 }
@@ -166,10 +169,10 @@
   font-family: inherit;
   color: var(--calcite-ui-text-1);
   font-size: inherit;
-  height: var(--calcite-combobox-input-height);
+  block-size: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
-  min-width: 120px;
-  margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
+  min-inline-size: 120px;
+  margin-block-end: var(--calcite-combobox-item-spacing-unit-s);
 }
 .input:focus {
   outline: 2px solid transparent;
@@ -181,8 +184,7 @@
 }
 
 .input--single {
-  margin-bottom: 0px;
-  margin-top: 0px;
+  margin-block: 0px;
   padding: 0px;
 }
 
@@ -192,13 +194,14 @@
 
 .input--hidden {
   pointer-events: none;
-  width: 0px;
-  min-width: 0px;
+  inline-size: 0px;
+  min-inline-size: 0px;
   opacity: 0;
 }
 
 .input--icon {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .input-wrap {
@@ -214,28 +217,26 @@
 .label {
   pointer-events: none;
   display: flex;
-  max-width: 100%;
+  max-inline-size: 100%;
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0px;
   font-weight: var(--calcite-font-weight-normal);
-  height: var(--calcite-combobox-input-height);
+  block-size: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
 }
 
 .label--spaced {
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: var(--calcite-combobox-item-spacing-unit-l);
-  padding-right: var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0px;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon-end, 
 .icon-start {
   display: flex;
-  width: 1rem;
+  inline-size: 1rem;
   cursor: pointer;
   align-items: center;
 }
@@ -244,8 +245,8 @@
   flex: none;
 }
 
-.popper-container {
-  width: 100%;
+.floating-ui-container {
+  inline-size: 100%;
   display: block;
   position: absolute;
   z-index: 900;
@@ -254,43 +255,49 @@
   pointer-events: none;
 }
 
-.popper-container .calcite-popper-anim {
+.floating-ui-container .calcite-floating-ui-anim {
   position: relative;
   z-index: 1;
-  transition: var(--calcite-popper-transition);
+  transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-.popper-container[data-popper-placement^=bottom] .calcite-popper-anim {
+.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim {
   transform: translateY(-5px);
 }
-.popper-container[data-popper-placement^=top] .calcite-popper-anim {
+.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim {
   transform: translateY(5px);
 }
-.popper-container[data-popper-placement^=left] .calcite-popper-anim {
+.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim {
   transform: translateX(5px);
 }
-.popper-container[data-popper-placement^=right] .calcite-popper-anim {
+.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim {
   transform: translateX(-5px);
 }
-.popper-container[data-popper-placement] .calcite-popper-anim--active {
+.floating-ui-container[data-placement] .calcite-floating-ui-anim--active {
   opacity: 1;
   visibility: visible;
   transform: translate(0);
 }
 
-.popper-container--active {
+.floating-ui-container--active {
   pointer-events: initial;
   visibility: visible;
 }
 
+@media (forced-colors: active) {
+  .wrapper,
+.floating-ui-container--active {
+    border: 1px solid canvasText;
+  }
+}
 .screen-readers-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -300,10 +307,10 @@
 }
 
 .list-container {
-  max-height: 100vh;
+  max-block-size: 100vh;
   overflow-y: auto;
   background-color: var(--calcite-ui-foreground-1);
-  width: var(--calcite-dropdown-width);
+  inline-size: var(--calcite-dropdown-width);
 }
 
 .list {
@@ -313,14 +320,14 @@
 }
 
 .list--hide {
-  height: 0px;
+  block-size: 0px;
   overflow: hidden;
 }
 
 .chip {
   margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
   margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .chip--active {
@@ -332,15 +339,12 @@
 }
 
 ::slotted(input[slot=hidden-form-input]) {
-  bottom: 0 !important;
-  left: 0 !important;
   margin: 0 !important;
   opacity: 0 !important;
   outline: none !important;
   padding: 0 !important;
   position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
+  inset: 0 !important;
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;

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

@@ -1,12 +1,12 @@
 /*!
  * 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.85
+ * v1.0.0-beta.88
  */
 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, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
@@ -68,6 +68,12 @@ export class Combobox {
      * @default "Remove tag"
      */
     this.intlRemoveTag = TEXT.removeTag;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.placement = defaultMenuPlacement;
     this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
@@ -209,16 +215,12 @@ export class Combobox {
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
         this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
-    /* *
-    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
-    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
-    */
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
         this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
@@ -271,16 +273,18 @@ export class Combobox {
       this.active = false;
       this.open = false;
     };
-    this.setMenuEl = (el) => {
-      this.menuEl = el;
+    this.setFloatingEl = (el) => {
+      this.floatingEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
     this.setListContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
-      this.listContainerEl.addEventListener("transitionrun", this.transitionRunHandler);
+      this.listContainerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
     this.inputHandler = (event) => {
       const value = event.target.value;
@@ -375,6 +379,9 @@ export class Combobox {
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
+  overlayPositioningHandler() {
+    this.reposition();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -417,16 +424,14 @@ export class Combobox {
   //--------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, menuEl } = this;
-    const modifiers = this.getModifiers();
-    popper
-      ? await updatePopper({
-        el: menuEl,
-        modifiers,
-        placement: defaultMenuPlacement,
-        popper
-      })
-      : this.createPopper();
+    const { floatingEl, referenceEl, placement, overlayPositioning } = this;
+    return positionFloatingUI({
+      floatingEl,
+      referenceEl,
+      overlayPositioning,
+      placement,
+      type: "menu"
+    });
   }
   /** Sets focus on the component. */
   async setFocus() {
@@ -446,9 +451,9 @@ export class Combobox {
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.reposition();
     this.setFilteredPlacements();
   }
   componentWillLoad() {
@@ -456,6 +461,7 @@ export class Combobox {
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
+    this.reposition();
   }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
@@ -465,15 +471,13 @@ export class Combobox {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
-    if (this.listContainerEl) {
-      this.listContainerEl.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
+    (_c = this.listContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;
@@ -503,39 +507,6 @@ export class Combobox {
   onClose() {
     this.calciteComboboxClose.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, overlayPositioning } = this;
-    const modifiers = this.getModifiers();
-    this.popper = createPopper({
-      el: menuEl,
-      modifiers,
-      overlayPositioning,
-      placement: defaultMenuPlacement,
-      referenceEl
-    });
-  }
-  destroyPopper() {
-    const { popper } = this;
-    if (popper) {
-      popper.destroy();
-    }
-    this.popper = null;
-  }
   getMaxScrollerHeight() {
     const items = this.getCombinedItems().filter((item) => !item.hidden);
     const { maxItems } = this;
@@ -740,7 +711,7 @@ export class Combobox {
     this.visibleItems.forEach((el, i) => {
       if (i === index) {
         el.active = true;
-        activeDescendant = el.guid;
+        activeDescendant = `${itemUidPrefix}${el.guid}`;
       }
       else {
         el.active = false;
@@ -797,14 +768,17 @@ export class Combobox {
   renderListBoxOptions() {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
-  renderPopperContainer() {
-    const { active, setMenuEl, setListContainerEl, open } = this;
+  renderFloatingUIContainer() {
+    const { active, setFloatingEl, setListContainerEl, open } = this;
     const classes = {
       "list-container": true,
-      [PopperCSS.animation]: true,
-      [PopperCSS.animationActive]: open || active
+      [FloatingCSS.animation]: true,
+      [FloatingCSS.animationActive]: open || active
     };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open || active }, ref: setMenuEl },
+    return (h("div", { "aria-hidden": "true", class: {
+        "floating-ui-container": true,
+        "floating-ui-container--active": open || active
+      }, ref: setFloatingEl },
       h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl },
         h("ul", { class: { list: true, "list--hide": !(open || active) } },
           h("slot", null)))));
@@ -826,12 +800,12 @@ export class Combobox {
   render() {
     const { active, guid, label, open } = this;
     const single = this.selectionMode === "single";
-    return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+    return (h(Host, null,
+      h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
           "wrapper--active": open || active
-        }, onClick: this.clickHandler, ref: this.setReferenceEl, role: "combobox" },
+        }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, ref: this.setReferenceEl, role: "combobox", tabindex: "0" },
         h("div", { class: "grid-input" },
           this.renderIconStart(),
           !single && this.renderChips(),
@@ -839,7 +813,7 @@ export class Combobox {
           this.renderInput()),
         this.renderIconEnd()),
       h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
-      this.renderPopperContainer(),
+      this.renderFloatingUIContainer(),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-combobox"; }
@@ -1020,7 +994,7 @@ export class Combobox {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -1144,12 +1118,12 @@ export class Combobox {
       "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"
           }
         }
       },
@@ -1240,12 +1214,17 @@ export class Combobox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Called when a selected item in the combobox is dismissed via its chip"
+        "text": "Called when a selected item in the combobox is dismissed via its chip\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteComboboxBeforeClose",
@@ -1255,16 +1234,12 @@ export class Combobox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteComboboxElement }",
-        "resolved": "{ el: HTMLCalciteComboboxElement; }",
-        "references": {
-          "HTMLCalciteComboboxElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteComboboxClose",
@@ -1274,16 +1249,12 @@ export class Combobox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteComboboxElement }",
-        "resolved": "{ el: HTMLCalciteComboboxElement; }",
-        "references": {
-          "HTMLCalciteComboboxElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteComboboxBeforeOpen",
@@ -1293,16 +1264,12 @@ export class Combobox {
       "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: HTMLCalciteComboboxElement }",
-        "resolved": "{ el: HTMLCalciteComboboxElement; }",
-        "references": {
-          "HTMLCalciteComboboxElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteComboboxOpen",
@@ -1312,16 +1279,12 @@ export class Combobox {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
-        "original": "{ el: HTMLCalciteComboboxElement }",
-        "resolved": "{ el: HTMLCalciteComboboxElement; }",
-        "references": {
-          "HTMLCalciteComboboxElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }]; }
   static get methods() { return {
@@ -1371,6 +1334,9 @@ export class Combobox {
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"
+    }, {
+      "propName": "overlayPositioning",
+      "methodName": "overlayPositioningHandler"
     }, {
       "propName": "value",
       "methodName": "valueHandler"

package/dist/collection/components/combobox/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.85
+ * v1.0.0-beta.88
  */
 export {};

package/dist/collection/components/combobox/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.85
+ * v1.0.0-beta.88
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/utils.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.85
+ * v1.0.0-beta.88
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";