@esri/calcite-components 1.0.0-beta.89 → 1.0.0-beta.91

package/dist/collection/components/input-text/resources.js

@@ -0,0 +1,24 @@
+/*!
+ * 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.91
+ */
+export const CSS = {
+  loader: "loader",
+  clearButton: "clear-button",
+  editingEnabled: "editing-enabled",
+  inlineChild: "inline-child",
+  inputIcon: "icon",
+  prefix: "prefix",
+  suffix: "suffix",
+  wrapper: "element-wrapper",
+  inputWrapper: "wrapper",
+  actionWrapper: "action-wrapper",
+  resizeIconWrapper: "resize-icon-wrapper"
+};
+export const SLOTS = {
+  action: "action"
+};
+export const TEXT = {
+  clear: "Clear value"
+};

package/dist/collection/components/input-time-picker/input-time-picker.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/input-time-picker/input-time-picker.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

package/dist/collection/components/label/label.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/label/label.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -230,7 +230,7 @@ export class Label {
       "method": "calciteInternalLabelClick",
       "name": "calciteInternalLabelClick",
       "bubbles": false,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{

package/dist/collection/components/label/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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/link/link.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";

package/dist/collection/components/list/list.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/list/list.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/list/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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   container: "container"

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/list-item/list-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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";

package/dist/collection/components/list-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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item-group/list-item-group.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {

package/dist/collection/components/list-item-group/list-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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/list-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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/loader/loader.css

@@ -76,7 +76,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 /**

package/dist/collection/components/loader/loader.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/modal/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.89
+ * v1.0.0-beta.91
  */
 export {};

package/dist/collection/components/modal/modal.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 /**
@@ -92,6 +92,7 @@
 :host {
   position: fixed;
   inset: 0px;
+  z-index: 700;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -99,8 +100,7 @@
   color: var(--calcite-ui-text-2);
   opacity: 0;
   visibility: hidden !important;
-  transition: visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
-  z-index: 101;
+  transition: visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
 }
 
 :host([scale=s]) {
@@ -146,6 +146,7 @@
 
 .modal {
   pointer-events: none;
+  z-index: 800;
   float: none;
   margin: 1.5rem;
   box-sizing: border-box;
@@ -159,25 +160,34 @@
   --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
   --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
-  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
-  transform: translate3d(0, 20px, 0);
+  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  --calcite-modal-hidden-position: translate3d(0, 20px, 0);
+  --calcite-modal-shown-position: translate3d(0, 0, 0);
+}
+.modal--opening-idle {
+  transform: var(--calcite-modal-hidden-position);
+}
+.modal--opening-active {
+  transform: var(--calcite-modal-shown-position);
+}
+.modal--closing-idle {
+  transform: var(--calcite-modal-shown-position);
+}
+.modal--closing-active {
+  transform: var(--calcite-modal-hidden-position);
 }
 
-:host([active]), 
 :host([open]) {
   opacity: 1;
   visibility: visible !important;
   transition-delay: 0ms;
 }
-:host([active]) .modal, 
 :host([open]) .modal {
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
-  transform: translate3d(0, 0, 0);
   transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transition-delay: 0ms;
 }
@@ -186,6 +196,7 @@
  * Header
  */
 .header {
+  z-index: 400;
   display: flex;
   min-inline-size: 0px;
   max-inline-size: 100%;
@@ -197,7 +208,6 @@
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
-  z-index: 2;
 }
 
 .close {
@@ -258,7 +268,6 @@ slot[name=header]::slotted(*),
   background-color: var(--calcite-ui-foreground-1);
   padding: 0px;
   max-block-size: calc(100vh - 12rem);
-  z-index: 1;
 }
 
 .content--spaced {
@@ -283,6 +292,7 @@ slot[name=content]::slotted(*),
  * Footer
  */
 .footer {
+  z-index: 400;
   margin-block-start: auto;
   box-sizing: border-box;
   display: flex;
@@ -298,7 +308,6 @@ slot[name=content]::slotted(*),
   flex: 0 0 auto;
   padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
   padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
-  z-index: 2;
 }
 
 .footer--hide-back .back, 
@@ -405,22 +414,17 @@ slot[name=primary] {
   max-block-size: 100%;
   inline-size: 100%;
   max-inline-size: 100%;
-  transform: translate3D(0, 20px, 0) scale(0.95);
+  --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95);
+  --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1);
 }
 :host([fullscreen]) .content {
   max-block-size: 100%;
   flex: 1 1 auto;
 }
 
-:host([active][fullscreen]) .modal,
-:host([open][fullscreen]) .modal {
-  transform: translate3D(0, 0, 0) scale(1);
-}
-:host([active][fullscreen]) .header,
 :host([open][fullscreen]) .header {
   border-radius: 0;
 }
-:host([active][fullscreen]) .footer,
 :host([open][fullscreen]) .footer {
   border-radius: 0;
 }

package/dist/collection/components/modal/modal.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
 import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
-import { TEXT, SLOTS, CSS, ICONS } from "./resources";
+import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 const isFocusableExtended = (el) => {
   return isCalciteFocusable(el) || isFocusable(el);
 };
@@ -67,25 +68,15 @@ export class Modal {
     //--------------------------------------------------------------------------
     this.hasFooter = true;
     this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open || this.active ? this.onOpen() : this.onClose();
-      }
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.openEnd = () => {
       this.setFocus();
@@ -100,7 +91,6 @@ export class Modal {
     /** Close the modal, first running the `beforeClose` method */
     this.close = () => {
       return this.beforeClose(this.el).then(() => {
-        this.active = false;
         this.open = false;
         focusElement(this.previousActiveElement);
         this.removeOverflowHiddenClass();
@@ -129,7 +119,7 @@ export class Modal {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
-    if (this.open || this.active) {
+    if (this.open) {
       this.openModal();
     }
   }
@@ -138,19 +128,26 @@ export class Modal {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
     connectConditionalSlotComponent(this);
+    connectOpenCloseComponent(this);
+    if (this.open) {
+      this.active = this.open;
+    }
+    if (this.active) {
+      this.activeHandler(this.active);
+    }
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
+    var _a;
     this.removeOverflowHiddenClass();
-    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectConditionalSlotComponent(this);
+    disconnectOpenCloseComponent(this);
   }
   render() {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
       h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }),
       this.renderStyle(),
-      h("div", { class: "modal", onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
+      h("div", { class: CSS.modal, ref: this.setTransitionEl },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -181,11 +178,11 @@ export class Modal {
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
     return hasCustomWidth ? (h("style", null, `
-        .modal {
+        .${CSS.modal} {
           max-width: ${this.width}px !important;
         }
         @media screen and (max-width: ${this.width}px) {
-          .modal {
+          .${CSS.modal} {
             height: 100% !important;
             max-height: 100% !important;
             width: 100% !important;
@@ -206,7 +203,7 @@ export class Modal {
   //
   //--------------------------------------------------------------------------
   handleEscape(event) {
-    if ((this.open || this.active) && !this.disableEscape && event.key === "Escape") {
+    if (this.open && !this.disableEscape && event.key === "Escape") {
       this.close();
     }
   }
@@ -257,32 +254,40 @@ export class Modal {
     }
   }
   onBeforeOpen() {
+    this.transitionEl.classList.add(CSS.openingActive);
     this.calciteModalBeforeOpen.emit();
   }
   onOpen() {
+    this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);
     this.calciteModalOpen.emit();
   }
   onBeforeClose() {
+    this.transitionEl.classList.add(CSS.closingActive);
     this.calciteModalBeforeClose.emit();
   }
   onClose() {
+    this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);
     this.calciteModalClose.emit();
   }
-  async toggleModal(value, oldValue) {
-    if (value !== oldValue) {
-      if (value) {
-        this.openModal();
-      }
-      else if (!value) {
-        this.close();
-      }
+  activeHandler(value) {
+    this.open = value;
+  }
+  async toggleModal(value) {
+    var _a, _b;
+    this.active = value;
+    if (value) {
+      (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);
+      this.openModal();
+    }
+    else {
+      (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);
+      this.close();
     }
   }
   /** Open the modal */
   openModal() {
     this.previousActiveElement = document.activeElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
-    this.active = true;
     this.open = true;
     const titleEl = getSlotted(this.el, SLOTS.header);
     const contentEl = getSlotted(this.el, SLOTS.content);
@@ -585,7 +590,7 @@ export class Modal {
       "method": "calciteModalBeforeClose",
       "name": "calciteModalBeforeClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -600,7 +605,7 @@ export class Modal {
       "method": "calciteModalClose",
       "name": "calciteModalClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -615,7 +620,7 @@ export class Modal {
       "method": "calciteModalBeforeOpen",
       "name": "calciteModalBeforeOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -630,7 +635,7 @@ export class Modal {
       "method": "calciteModalOpen",
       "name": "calciteModalOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -737,7 +742,7 @@ export class Modal {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "active",
-      "methodName": "toggleModal"
+      "methodName": "activeHandler"
     }, {
       "propName": "open",
       "methodName": "toggleModal"

package/dist/collection/components/modal/resources.js

@@ -1,9 +1,10 @@
 /*!
  * 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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
+  modal: "modal",
   title: "title",
   header: "header",
   footer: "footer",
@@ -12,7 +13,13 @@ export const CSS = {
   close: "close",
   secondary: "secondary",
   primary: "primary",
-  overflowHidden: "overflow-hidden"
+  overflowHidden: "overflow-hidden",
+  // these classes help apply the animation in phases to only set transform on open/close
+  // this helps avoid a positioning issue for any floating-ui-owning children
+  openingIdle: "modal--opening-idle",
+  openingActive: "modal--opening-active",
+  closingIdle: "modal--closing-idle",
+  closingActive: "modal--closing-active"
 };
 export const ICONS = {
   close: "x"

package/dist/collection/components/notice/notice.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 /**