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

package/dist/collection/components/input-date-picker/input-date-picker.js

@@ -1,15 +1,16 @@
 /*!
  * 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, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../date-picker/utils";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
 import { TEXT } from "../date-picker/resources";
+import { CSS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { createPopper, updatePopper, CSS as PopperCSS, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements } from "../../utils/floating-ui";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
 export class InputDatePicker {
@@ -23,8 +24,20 @@ export class InputDatePicker {
      * When false, the component won't be interactive.
      */
     this.disabled = false;
-    /** Expand or collapse when calendar does not have input */
+    /**
+     * When true, still focusable but controls are gone and the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
+    this.readOnly = false;
+    /**
+     * Expand or collapse when calendar does not have input
+     *
+     * @deprecated use open instead
+     */
     this.active = false;
+    /** Expand or collapse when calendar does not have input */
+    this.open = false;
     /**
      * Localized string for "previous month" (used for aria label)
      *
@@ -50,7 +63,7 @@ export class InputDatePicker {
     /**
      * Determines where the date-picker component will be positioned relative to the input.
      *
-     * @default "bottom-leading"
+     * @default "bottom-start"
      */
     this.placement = defaultMenuPlacement;
     /** Range mode activation */
@@ -69,6 +82,10 @@ export class InputDatePicker {
     this.layout = "horizontal";
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
+    };
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -80,11 +97,14 @@ export class InputDatePicker {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    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.active
-          ? this.calciteInternalInputDatePickerOpen.emit()
-          : this.calciteInternalInputDatePickerClose.emit();
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.open ? this.onOpen() : this.onClose();
       }
     };
     this.setStartInput = (el) => {
@@ -94,36 +114,39 @@ export class InputDatePicker {
       this.endInput = el;
     };
     this.deactivate = () => {
-      this.active = false;
+      this.open = false;
     };
-    this.keyDownHandler = (event) => {
-      if (event.key === "Enter" && !event.defaultPrevented) {
+    this.keyDownHandler = ({ defaultPrevented, key }) => {
+      if (key === "Enter" && !defaultPrevented) {
         submitForm(this);
       }
-    };
-    this.keyUpHandler = (e) => {
-      if (e.key === "Escape") {
+      else if (key === "Escape") {
         this.active = false;
+        this.open = false;
       }
     };
-    this.inputBlur = (e) => {
-      this.blur(e.detail);
+    this.inputBlur = (event) => {
+      this.blur(event.currentTarget);
     };
     this.startInputFocus = () => {
-      this.active = true;
+      if (!this.readOnly) {
+        this.open = true;
+      }
       this.focusedInput = "start";
     };
     this.endInputFocus = () => {
-      this.active = true;
+      if (!this.readOnly) {
+        this.open = true;
+      }
       this.focusedInput = "end";
     };
-    this.inputInput = (e) => {
-      this.input(e.detail.value);
+    this.inputInput = (event) => {
+      this.input(event.detail.value);
     };
-    this.setMenuEl = (el) => {
+    this.setFloatingEl = (el) => {
       if (el) {
-        this.menuEl = el;
-        this.createPopper();
+        this.floatingEl = el;
+        connectFloatingUI(this, this.referenceEl, this.floatingEl);
       }
     };
     this.setStartWrapper = (el) => {
@@ -162,9 +185,9 @@ export class InputDatePicker {
       }
     };
   }
-  handleDisabledChange(value) {
+  handleDisabledAndReadOnlyChange(value) {
     if (!value) {
-      this.active = false;
+      this.open = false;
     }
   }
   valueHandler(value) {
@@ -197,12 +220,19 @@ export class InputDatePicker {
       this.maxAsDate = dateFromISO(max);
     }
   }
-  activeHandler() {
-    if (!this.disabled) {
-      this.reposition();
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
+    if (this.disabled || this.readOnly) {
+      this.open = false;
       return;
     }
-    this.active = false;
+    this.reposition();
+  }
+  overlayPositioningHandler() {
+    this.reposition();
   }
   //--------------------------------------------------------------------------
   //
@@ -216,7 +246,7 @@ export class InputDatePicker {
     if (this.shouldFocusRangeStart() || this.shouldFocusRangeEnd()) {
       return;
     }
-    this.active = false;
+    this.open = false;
   }
   // --------------------------------------------------------------------------
   //
@@ -230,16 +260,14 @@ export class InputDatePicker {
   }
   /** Updates the position of the component. */
   async reposition() {
-    const { placement, popper, menuEl } = this;
-    const modifiers = this.getModifiers();
-    popper
-      ? await updatePopper({
-        el: menuEl,
-        modifiers,
-        placement,
-        popper
-      })
-      : this.createPopper();
+    const { floatingEl, referenceEl, placement, overlayPositioning } = this;
+    return positionFloatingUI({
+      floatingEl,
+      referenceEl,
+      overlayPositioning,
+      placement,
+      type: "menu"
+    });
   }
   // --------------------------------------------------------------------------
   //
@@ -247,6 +275,9 @@ export class InputDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    const isOpen = this.active || this.open;
+    isOpen && this.activeHandler(isOpen);
+    isOpen && this.openHandler(isOpen);
     if (Array.isArray(this.value)) {
       this.valueAsDate = this.value.map((v) => dateFromISO(v));
       this.start = this.value[0];
@@ -269,9 +300,9 @@ export class InputDatePicker {
     if (this.max) {
       this.maxAsDate = dateFromISO(this.max);
     }
-    this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.reposition();
     this.setFilteredPlacements();
   }
   async componentWillLoad() {
@@ -279,37 +310,42 @@ export class InputDatePicker {
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
   }
+  componentDidLoad() {
+    this.reposition();
+  }
   disconnectedCallback() {
-    this.destroyPopper();
+    var _a;
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     disconnectLabel(this);
     disconnectForm(this);
+    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
   render() {
     var _a, _b;
-    const { disabled } = this;
+    const { disabled, readOnly } = this;
     const date = dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const endDate = this.range
       ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, onKeyUp: this.keyUpHandler, role: "application" },
-      this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.active), class: "input-container", role: "application" },
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" },
+      this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" },
         h("div", { class: "input-wrapper", ref: this.setStartWrapper },
-          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
-        h("div", { "aria-hidden": toAriaBoolean(!this.active), class: {
-            "menu-container": true,
-            "menu-container--active": this.active
-          }, ref: this.setMenuEl },
+          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
+        h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+            [CSS.menu]: true,
+            [CSS.menuActive]: this.open
+          }, ref: this.setFloatingEl },
           h("div", { class: {
               ["calendar-picker-wrapper"]: true,
               ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
-              [PopperCSS.animation]: true,
-              [PopperCSS.animationActive]: this.active
-            }, onTransitionEnd: this.transitionEnd },
+              [FloatingCSS.animation]: true,
+              [FloatingCSS.animationActive]: this.open
+            }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
             h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
         this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" },
           h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))),
@@ -319,7 +355,7 @@ export class InputDatePicker {
           h("calcite-input", { class: {
               input: true,
               "border-top-color-one": this.layout === "vertical" && this.range
-            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
+            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
       h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
@@ -328,46 +364,22 @@ export class InputDatePicker {
       focusedInput === "end" || layout === "vertical"
         ? endWrapper || startWrapper
         : startWrapper || endWrapper;
-    this.createPopper();
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
   onLabelClick() {
     this.setFocus();
   }
-  getModifiers() {
-    const flipModifier = {
-      name: "flip",
-      enabled: true
-    };
-    flipModifier.options = {
-      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
-    };
-    const eventListenerModifier = {
-      name: "eventListeners",
-      enabled: this.active
-    };
-    return [flipModifier, eventListenerModifier];
+  onBeforeOpen() {
+    this.calciteInputDatePickerBeforeOpen.emit();
   }
-  createPopper() {
-    this.destroyPopper();
-    const { menuEl, placement, referenceEl, overlayPositioning } = this;
-    if (!menuEl || !referenceEl) {
-      return;
-    }
-    const modifiers = this.getModifiers();
-    this.popper = createPopper({
-      el: menuEl,
-      modifiers,
-      overlayPositioning,
-      placement,
-      referenceEl
-    });
+  onOpen() {
+    this.calciteInputDatePickerOpen.emit();
   }
-  destroyPopper() {
-    const { popper } = this;
-    if (popper) {
-      popper.destroy();
-    }
-    this.popper = null;
+  onBeforeClose() {
+    this.calciteInputDatePickerBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteInputDatePickerClose.emit();
   }
   startWatcher(start) {
     this.startAsDate = dateFromISO(start);
@@ -540,6 +552,27 @@ export class InputDatePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+          }],
+        "text": "When true, still focusable but controls are gone and the value cannot be modified."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "string",
       "mutable": true,
@@ -561,12 +594,12 @@ export class InputDatePicker {
       "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"
           }
         }
       },
@@ -745,13 +778,34 @@ export class InputDatePicker {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use open instead"
+          }],
         "text": "Expand or collapse when calendar does not have input"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Expand or collapse when calendar does not have input"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -873,11 +927,11 @@ export class InputDatePicker {
       "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"
           }
         }
       },
@@ -886,7 +940,7 @@ export class InputDatePicker {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "\"bottom-leading\""
+            "text": "\"bottom-start\""
           }],
         "text": "Determines where the date-picker component will be positioned relative to the input."
       },
@@ -982,7 +1036,7 @@ export class InputDatePicker {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -1101,39 +1155,63 @@ export class InputDatePicker {
         "references": {}
       }
     }, {
-      "method": "calciteInternalInputDatePickerOpen",
-      "name": "calciteInternalInputDatePickerOpen",
+      "method": "calciteInputDatePickerBeforeClose",
+      "name": "calciteInputDatePickerBeforeClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
-      "method": "calciteInternalInputDatePickerClose",
-      "name": "calciteInternalInputDatePickerClose",
+      "method": "calciteInputDatePickerClose",
+      "name": "calciteInputDatePickerClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calciteInputDatePickerBeforeOpen",
+      "name": "calciteInputDatePickerBeforeOpen",
+      "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": {}
+      }
+    }, {
+      "method": "calciteInputDatePickerOpen",
+      "name": "calciteInputDatePickerOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the component is open and animation is complete."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -1174,7 +1252,10 @@ export class InputDatePicker {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "disabled",
-      "methodName": "handleDisabledChange"
+      "methodName": "handleDisabledAndReadOnlyChange"
+    }, {
+      "propName": "readOnly",
+      "methodName": "handleDisabledAndReadOnlyChange"
     }, {
       "propName": "value",
       "methodName": "valueHandler"
@@ -1190,6 +1271,12 @@ export class InputDatePicker {
     }, {
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
+    }, {
+      "propName": "overlayPositioning",
+      "methodName": "overlayPositioningHandler"
     }, {
       "propName": "layout",
       "methodName": "setReferenceEl"

package/dist/collection/components/input-date-picker/resources.js

@@ -0,0 +1,9 @@
+/*!
+ * 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.87
+ */
+export const CSS = {
+  menu: "menu-container",
+  menuActive: "menu-container--active"
+};

package/dist/collection/components/input-message/input-message.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]) {
@@ -94,8 +94,8 @@
   visibility: hidden;
   box-sizing: border-box;
   display: flex;
-  height: 0px;
-  width: 100%;
+  block-size: 0px;
+  inline-size: 100%;
   align-items: center;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
@@ -105,14 +105,14 @@
 
 :host([active]) {
   visibility: visible;
-  height: auto;
+  block-size: auto;
   opacity: 1;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([active][scale=m]),
 :host([active][scale=l]) {
-  margin-top: var(--calcite-input-message-spacing-value);
+  margin-block-start: var(--calcite-input-message-spacing-value);
 }
 
 :host([calcite-hydrated-hidden]) {
@@ -154,13 +154,13 @@
 }
 
 :host([status][scale=m]) {
-  margin-top: 0.25rem;
+  margin-block-start: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([status][scale=l]) {
-  margin-top: 0.25rem;
+  margin-block-start: 0.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }

package/dist/collection/components/input-message/input-message.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, Host, h, Prop, Watch } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.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 var StatusIconDefaults;
 (function (StatusIconDefaults) {