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

package/dist/collection/components/popover/popover.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
-import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS, filterComputedPlacements } from "../../utils/popper";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, filterComputedPlacements } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
@@ -66,7 +66,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)
+     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
      */
     this.placement = defaultPopoverPlacement;
     /**
@@ -81,6 +81,10 @@ export class Popover {
     this.intlClose = TEXT.close;
     this.guid = `calcite-popover-${guid()}`;
     this.activeTransitionProp = "opacity";
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
+    };
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -95,6 +99,7 @@ export class Popover {
     this.setUpReferenceElement = () => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
+      connectFloatingUI(this, this.effectiveReferenceElement, this.el);
       const { el, referenceElement, effectiveReferenceElement } = this;
       if (referenceElement && !effectiveReferenceElement) {
         console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
@@ -102,7 +107,6 @@ export class Popover {
         });
       }
       this.addReferences();
-      this.createPopper();
     };
     this.getId = () => {
       return this.el.id || this.guid;
@@ -142,11 +146,20 @@ export class Popover {
     this.hide = () => {
       this.open = false;
     };
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.open ? this.onBeforeOpen() : this.onBeforeClose();
+      }
+    };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.open ? this.calcitePopoverOpen.emit() : this.calcitePopoverClose.emit();
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.open ? this.onOpen() : this.onClose();
       }
     };
+    this.storeArrowEl = (el) => {
+      this.arrowEl = el;
+      this.reposition();
+    };
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
@@ -161,11 +174,15 @@ export class Popover {
     this.reposition();
     this.setExpandedAttr();
   }
+  overlayPositioningHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
+    this.reposition();
   }
   // --------------------------------------------------------------------------
   //
@@ -173,6 +190,7 @@ export class Popover {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
     this.setFilteredPlacements();
   }
   componentWillLoad() {
@@ -182,8 +200,10 @@ export class Popover {
     this.reposition();
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.removeReferences();
-    this.destroyPopper();
+    disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
   }
   // --------------------------------------------------------------------------
   //
@@ -192,16 +212,19 @@ export class Popover {
   // --------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, el, placement } = this;
-    const modifiers = this.getModifiers();
-    popper
-      ? await updatePopper({
-        el,
-        modifiers,
-        placement,
-        popper
-      })
-      : this.createPopper();
+    const { el, effectiveReferenceElement, placement, overlayPositioning, disableFlip, flipPlacements, offsetDistance, offsetSkidding, arrowEl } = this;
+    return positionFloatingUI({
+      floatingEl: el,
+      referenceEl: effectiveReferenceElement,
+      overlayPositioning,
+      placement,
+      disableFlip,
+      flipPlacements,
+      offsetDistance,
+      offsetSkidding,
+      arrowEl,
+      type: "popover"
+    });
   }
   /**
    * Sets focus on the component.
@@ -232,57 +255,17 @@ export class Popover {
       ? queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
-  getModifiers() {
-    const { arrowEl, disableFlip, disablePointer, offsetDistance, offsetSkidding, filteredFlipPlacements } = this;
-    const flipModifier = {
-      name: "flip",
-      enabled: !disableFlip
-    };
-    if (filteredFlipPlacements) {
-      flipModifier.options = {
-        fallbackPlacements: filteredFlipPlacements
-      };
-    }
-    const arrowModifier = {
-      name: "arrow",
-      enabled: !disablePointer
-    };
-    if (arrowEl) {
-      arrowModifier.options = {
-        element: arrowEl
-      };
-    }
-    const offsetModifier = {
-      name: "offset",
-      enabled: true,
-      options: {
-        offset: [offsetSkidding, offsetDistance]
-      }
-    };
-    const eventListenerModifier = {
-      name: "eventListeners",
-      enabled: this.open
-    };
-    return [arrowModifier, flipModifier, offsetModifier, eventListenerModifier];
+  onBeforeOpen() {
+    this.calcitePopoverBeforeOpen.emit();
   }
-  createPopper() {
-    this.destroyPopper();
-    const { el, placement, effectiveReferenceElement: referenceEl, overlayPositioning } = this;
-    const modifiers = this.getModifiers();
-    this.popper = createPopper({
-      el,
-      modifiers,
-      overlayPositioning,
-      placement,
-      referenceEl
-    });
+  onOpen() {
+    this.calcitePopoverOpen.emit();
   }
-  destroyPopper() {
-    const { popper } = this;
-    if (popper) {
-      popper.destroy();
-    }
-    this.popper = null;
+  onBeforeClose() {
+    this.calcitePopoverBeforeClose.emit();
+  }
+  onClose() {
+    this.calcitePopoverClose.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -306,12 +289,12 @@ export class Popover {
     const { effectiveReferenceElement, heading, label, open, disablePointer } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
+    const arrowNode = !disablePointer ? h("div", { class: CSS.arrow, ref: this.storeArrowEl }) : null;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
       h("div", { class: {
-          [PopperCSS.animation]: true,
-          [PopperCSS.animationActive]: displayed
-        }, onTransitionEnd: this.transitionEnd },
+          [FloatingCSS.animation]: true,
+          [FloatingCSS.animationActive]: displayed
+        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
         arrowNode,
         h("div", { class: {
             [CSS.hasHeader]: !!heading,
@@ -449,12 +432,12 @@ export class Popover {
       "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"
           }
         }
       },
@@ -587,7 +570,7 @@ export class Popover {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -605,12 +588,12 @@ export class Popover {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "PopperPlacement",
-        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "original": "LogicalPlacement",
+        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
         "references": {
-          "PopperPlacement": {
+          "LogicalPlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -619,7 +602,7 @@ export class Popover {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
@@ -632,11 +615,11 @@ export class Popover {
       "mutable": false,
       "complexType": {
         "original": "ReferenceElement | string",
-        "resolved": "Element | string | ({ getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; })",
+        "resolved": "Element | VirtualElement | string",
         "references": {
           "ReferenceElement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -693,6 +676,21 @@ export class Popover {
     "effectiveReferenceElement": {}
   }; }
   static get events() { return [{
+      "method": "calcitePopoverBeforeClose",
+      "name": "calcitePopoverBeforeClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
       "method": "calcitePopoverClose",
       "name": "calcitePopoverClose",
       "bubbles": true,
@@ -700,11 +698,26 @@ export class Popover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the component is closed."
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calcitePopoverBeforeOpen",
+      "name": "calcitePopoverBeforeOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -715,11 +728,11 @@ export class Popover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the component is opened."
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -804,6 +817,9 @@ export class Popover {
     }, {
       "propName": "open",
       "methodName": "openHandler"
+    }, {
+      "propName": "overlayPositioning",
+      "methodName": "overlayPositioningHandler"
     }, {
       "propName": "placement",
       "methodName": "placementHandler"

package/dist/collection/components/popover/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 = {
   container: "container",

package/dist/collection/components/popover-manager/popover-manager.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]) {

package/dist/collection/components/popover-manager/popover-manager.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, h, Prop, Element, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/progress/progress.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,19 +81,19 @@
 :host {
   position: relative;
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .track, 
 .bar {
   position: absolute;
-  top: 0px;
-  height: 2px;
+  inset-block-start: 0px;
+  block-size: 2px;
 }
 
 .track {
   z-index: 0;
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
   background: var(--calcite-ui-border-3);
 }
@@ -113,7 +113,7 @@
   }
 }
 .indeterminate {
-  width: 20%;
+  inline-size: 20%;
   animation: looping-progress-bar-ani 2200ms linear infinite;
 }
 
@@ -122,10 +122,8 @@
 }
 
 .text {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 1rem;
-  padding-bottom: 0px;
+  padding-inline: 0px;
+  padding-block: 1rem 0px;
   text-align: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -137,7 +135,7 @@
     transform: translate3d(-100%, 0, 0);
   }
   50% {
-    width: 40%;
+    inline-size: 40%;
   }
   100% {
     transform: translate3d(600%, 0, 0);

package/dist/collection/components/progress/progress.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, h, Prop } from "@stencil/core";
 export class Progress {

package/dist/collection/components/radio-button/radio-button.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);
+}
+
 :host {
   display: block;
   cursor: pointer;
@@ -106,13 +114,6 @@
   outline-offset: 2px;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) .radio {
   cursor: default;
   opacity: var(--calcite-ui-opacity-disabled);
@@ -140,9 +141,9 @@
 }
 
 .radio {
-  height: var(--calcite-radio-size);
-  max-width: var(--calcite-radio-size);
-  min-width: var(--calcite-radio-size);
+  block-size: var(--calcite-radio-size);
+  max-inline-size: var(--calcite-radio-size);
+  min-inline-size: var(--calcite-radio-size);
 }
 
 :host([scale=s][checked]) .radio,
@@ -176,22 +177,19 @@
   :host([checked]) .radio::after,
 :host([checked][disabled]) .radio::after {
     content: "";
-    width: var(--calcite-radio-size);
-    height: var(--calcite-radio-size);
+    inline-size: var(--calcite-radio-size);
+    block-size: var(--calcite-radio-size);
     background-color: windowText;
     display: block;
   }
 }
 ::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/radio-button/radio-button.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, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -130,7 +130,7 @@ export class RadioButton {
     if (newChecked) {
       this.uncheckOtherRadioButtonsInGroup();
     }
-    this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
+    this.calciteInternalRadioButtonCheckedChange.emit();
   }
   nameChanged() {
     this.checkLastRadioButton();
@@ -484,8 +484,8 @@ export class RadioButton {
         "text": "Fires when the radio button is blurred."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -499,8 +499,8 @@ export class RadioButton {
         "text": "Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -517,8 +517,8 @@ export class RadioButton {
         "text": "Fires when the checked property changes.  This is an internal event used for styling purposes only.\nUse calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -535,8 +535,8 @@ export class RadioButton {
         "text": "Fires when the radio button is focused."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/radio-button/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 = {
   container: "container"

package/dist/collection/components/radio-button-group/radio-button-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]) {
@@ -80,7 +80,7 @@
 
 :host {
   display: flex;
-  max-width: 100vw;
+  max-inline-size: 100vw;
 }
 
 :host([layout=horizontal]) {

package/dist/collection/components/radio-button-group/radio-button-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, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -230,8 +230,8 @@ export class RadioButtonGroup {
         "text": "Emitted when the radio button group has changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/radio-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.87
  */
 export {};