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

package/dist/collection/components/modal/modal.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, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -54,7 +54,11 @@ export class Modal {
     this.width = "m";
     /** Sets the background color of the component's content. */
     this.backgroundColor = "white";
-    /** When true, disables spacing to the content area slot. */
+    /**
+     * When true, disables spacing to the content area slot.
+     *
+     * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
+     */
     this.noPadding = false;
     //--------------------------------------------------------------------------
     //
@@ -69,9 +73,18 @@ export class Modal {
     //  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) {
-        this.open || this.active ? this.calciteModalOpen.emit() : this.calciteModalClose.emit();
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
     this.openEnd = () => {
@@ -127,16 +140,17 @@ export class Modal {
     connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.removeOverflowHiddenClass();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     disconnectConditionalSlotComponent(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 },
+      h("div", { class: "modal", onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -191,8 +205,8 @@ export class Modal {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  handleEscape(e) {
-    if ((this.open || this.active) && !this.disableEscape && e.key === "Escape") {
+  handleEscape(event) {
+    if ((this.open || this.active) && !this.disableEscape && event.key === "Escape") {
       this.close();
     }
   }
@@ -242,6 +256,18 @@ export class Modal {
       }
     }
   }
+  onBeforeOpen() {
+    this.calciteModalBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteModalOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteModalBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteModalClose.emit();
+  }
   async toggleModal(value, oldValue) {
     if (value !== oldValue) {
       if (value) {
@@ -541,7 +567,10 @@ export class Modal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `--calcite-modal-padding` CSS variable instead."
+          }],
         "text": "When true, disables spacing to the content area slot."
       },
       "attribute": "no-padding",
@@ -553,18 +582,18 @@ export class Modal {
     "hasFooter": {}
   }; }
   static get events() { return [{
-      "method": "calciteModalOpen",
-      "name": "calciteModalOpen",
+      "method": "calciteModalBeforeClose",
+      "name": "calciteModalBeforeClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the component finishes the open animation."
+        "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": {}
       }
     }, {
@@ -575,11 +604,41 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the component finishes the close animation."
+        "text": "Fires when the component is closed and animation is complete."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calciteModalBeforeOpen",
+      "name": "calciteModalBeforeOpen",
+      "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": "calciteModalOpen",
+      "name": "calciteModalOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -684,7 +743,7 @@ export class Modal {
       "methodName": "toggleModal"
     }]; }
   static get listeners() { return [{
-      "name": "keyup",
+      "name": "keydown",
       "method": "handleEscape",
       "target": "window",
       "capture": false,

package/dist/collection/components/modal/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.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.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]) {
@@ -91,21 +91,18 @@
 }
 :host([scale=s]) .container slot[name=title]::slotted(*), 
 :host([scale=s]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
 :host([scale=s]) .container slot[name=message]::slotted(*), 
 :host([scale=s]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
 :host([scale=s]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
@@ -119,21 +116,18 @@
 }
 :host([scale=m]) .container slot[name=title]::slotted(*), 
 :host([scale=m]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
 :host([scale=m]) .container slot[name=message]::slotted(*), 
 :host([scale=m]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
 :host([scale=m]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
@@ -144,21 +138,18 @@
 }
 :host([scale=l]) .container slot[name=title]::slotted(*), 
 :host([scale=l]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
 :host([scale=l]) .container slot[name=message]::slotted(*), 
 :host([scale=l]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
 :host([scale=l]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
@@ -176,25 +167,23 @@
 }
 
 :host {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   display: none;
-  max-width: 100%;
+  max-inline-size: 100%;
   align-items: center;
-  width: var(--calcite-notice-width);
+  inline-size: var(--calcite-notice-width);
 }
 
 .container {
   pointer-events: none;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-block: 0px;
   box-sizing: border-box;
   display: none;
-  width: 100%;
+  inline-size: 100%;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  max-height: 0;
+  max-block-size: 0;
   text-align: start;
   border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
@@ -212,10 +201,10 @@
   display: flex;
 }
 
-:host([active]) .container {
+:host([open]) .container {
   pointer-events: auto;
   display: flex;
-  max-height: 100%;
+  max-block-size: 100%;
   align-items: center;
   border-width: 2px;
   opacity: 1;
@@ -243,10 +232,10 @@
 .notice-content {
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   flex-direction: column;
   overflow-wrap: break-word;
   flex: 1 1 0;
@@ -257,7 +246,8 @@
   padding-inline-start: var(--calcite-notice-spacing-token-large);
 }
 .notice-content:only-of-type {
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
 }
 
 .notice-icon {
@@ -265,7 +255,8 @@
   align-items: center;
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
 }
 
@@ -281,7 +272,8 @@
   outline-offset: 2px;
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   -webkit-appearance: none;
 }

package/dist/collection/components/notice/notice.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, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -27,12 +27,24 @@ export class Notice {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /**
+     * When true, the component is active.
+     *
+     * @deprecated Use open instead.
+     */
     this.active = false;
+    /** When true, the component is visible */
+    this.open = false;
     /** The color for the component's top border and icon. */
     this.color = "blue";
-    /** When true, a close button is added to the component. */
+    /**
+     * When true, a close button is added to the component.
+     *
+     * @deprecated use closable instead
+     */
     this.dismissible = false;
+    /** When true, displays a button user can click to dismiss the `calcite-notice` */
+    this.closable = false;
     /**
      * Accessible name for the close button.
      *
@@ -49,10 +61,16 @@ export class Notice {
     //
     //--------------------------------------------------------------------------
     this.close = () => {
-      this.active = false;
+      this.open = false;
       this.calciteNoticeClose.emit();
     };
   }
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
+  }
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
@@ -63,6 +81,11 @@ export class Notice {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    const isOpen = this.active || this.open;
+    if (isOpen) {
+      this.activeHandler(isOpen);
+      this.openHandler(isOpen);
+    }
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
@@ -84,7 +107,7 @@ export class Notice {
         h("slot", { name: SLOTS.link })),
       hasActionEnd ? (h("div", { class: CSS.actionsEnd },
         h("slot", { name: SLOTS.actionsEnd }))) : null,
-      this.dismissible ? closeButton : null));
+      this.closable || this.dismissible ? closeButton : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -124,13 +147,34 @@ export class Notice {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use open instead."
+          }],
         "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the component is visible"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "color": {
       "type": "string",
       "mutable": false,
@@ -165,13 +209,34 @@ export class Notice {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use closable instead"
+          }],
         "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
       "defaultValue": "false"
     },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When true, displays a button user can click to dismiss the `calcite-notice`"
+      },
+      "attribute": "closable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "icon": {
       "type": "any",
       "mutable": false,
@@ -184,7 +249,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies an icon to display - accepts Calcite UI icon names."
+        "text": "When present, shows a default recommended icon. You can\nalso pass a calcite-ui-icon name to display a requested icon."
       },
       "attribute": "icon",
       "reflect": true
@@ -268,8 +333,8 @@ export class Notice {
         "text": "Fired when the component is closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -283,8 +348,8 @@ export class Notice {
         "text": "Fired when the component is opened."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -308,6 +373,12 @@ export class Notice {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "active",
+      "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
+    }, {
       "propName": "icon",
       "methodName": "updateRequestedIcon"
     }, {

package/dist/collection/components/notice/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.84
+ * v1.0.0-beta.87
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.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/option/option.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, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -163,8 +163,8 @@ export class Option {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/option-group/option-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]) {

package/dist/collection/components/option-group/option-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.84
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**
@@ -91,8 +91,8 @@ export class OptionGroup {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }