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

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.86
+ * v1.0.0-beta.87
  */
 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;
@@ -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.86
+ * v1.0.0-beta.87
  */
 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.86
+ * v1.0.0-beta.87
  */
 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.86
+ * v1.0.0-beta.87
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

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

@@ -72,13 +72,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);
+}
+
 .scale--s{
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -115,13 +123,6 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-: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 */
@@ -146,8 +147,8 @@ ul:focus{
   position: relative;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
-  min-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
   cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
@@ -156,7 +157,8 @@ ul:focus{
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   outline-color: transparent;
-  padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: var(--calcite-combobox-item-spacing-unit-s);
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host([disabled]) .label{
@@ -185,7 +187,8 @@ ul:focus{
 }
 
 .title {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon{
@@ -201,7 +204,7 @@ ul:focus{
 }
 
 .icon--custom {
-  margin-top: -1px;
+  margin-block-start: -1px;
   color: var(--calcite-ui-text-3);
 }
 
@@ -212,7 +215,7 @@ ul:focus{
 .icon--dot{
   display: flex;
   justify-content: flex-end;
-  min-width: var(--calcite-combobox-item-spacing-unit-l);
+  min-inline-size: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon--dot:before {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -321,12 +321,17 @@ export class ComboboxItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the item is selected or unselected."
+        "text": "Emitted whenever the item is selected or unselected.\n\n**Note:**: The event's payload is deprecated, please use the event's target/currentTarget instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-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]) {
@@ -122,9 +122,9 @@
 .label {
   box-sizing: border-box;
   display: flex;
-  width: 100%;
-  min-width: 0px;
-  max-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0px;
+  max-inline-size: 100%;
   color: var(--calcite-ui-text-3);
 }
 
@@ -140,13 +140,13 @@
   border: 0 solid;
   display: block;
   flex: 1 1 0%;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-ui-text-2);
   word-wrap: break-word;
   word-break: break-word;
-  border-bottom-color: var(--calcite-ui-border-3);
-  padding: var(--calcite-combobox-item-spacing-unit-l) 0;
-  margin-left: var(--calcite-combobox-item-spacing-unit-s);
-  margin-right: var(--calcite-combobox-item-spacing-unit-s);
+  border-block-end-color: var(--calcite-ui-border-3);
+  padding-block: var(--calcite-combobox-item-spacing-unit-l);
+  padding-inline: 0;
+  margin-inline: var(--calcite-combobox-item-spacing-unit-s);
 }

package/dist/collection/components/combobox-item-group/combobox-item-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.87
  */
 import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-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.87
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/date-picker.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]) {
@@ -81,7 +81,7 @@
 :host {
   position: relative;
   display: inline-block;
-  width: 100%;
+  inline-size: 100%;
   overflow: visible;
   border-radius: 0px;
   border-width: 1px;
@@ -92,13 +92,13 @@
 }
 
 :host([scale=s]) {
-  max-width: 216px;
+  max-inline-size: 216px;
 }
 
 :host([scale=m]) {
-  max-width: 286px;
+  max-inline-size: 286px;
 }
 
 :host([scale=l]) {
-  max-width: 398px;
+  max-inline-size: 398px;
 }