@esri/calcite-components 1.0.0-next.536 → 1.0.0-next.539

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-next.536
+ * v1.0.0-next.539
  */
 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;
     //--------------------------------------------------------------------------
     //
@@ -201,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();
     }
   }
@@ -563,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",
@@ -582,7 +589,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
         "original": "void",
@@ -597,7 +604,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
         "original": "void",
@@ -612,7 +619,7 @@ export class Modal {
       "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": "void",
@@ -627,7 +634,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
         "original": "void",
@@ -736,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-next.536
+ * v1.0.0-next.539
  */
 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]) {
@@ -201,7 +201,7 @@
   display: flex;
 }
 
-:host([active]) .container {
+:host([open]) .container {
   pointer-events: auto;
   display: flex;
   max-block-size: 100%;

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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -27,8 +27,14 @@ 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";
     /**
@@ -55,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);
   }
@@ -69,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);
@@ -130,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,
@@ -295,8 +333,8 @@ export class Notice {
         "text": "Fired when the component is closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -310,8 +348,8 @@ export class Notice {
         "text": "Fired when the component is opened."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -335,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-next.536
+ * v1.0.0-next.539
  */
 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-next.536
+ * v1.0.0-next.539
  */
 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-next.536
+ * v1.0.0-next.539
  */
 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": {}
       }
     }]; }

package/dist/collection/components/pagination/pagination.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/pagination/pagination.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";

package/dist/collection/components/pagination/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-next.536
+ * v1.0.0-next.539
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -82,13 +82,21 @@
 }
 
 :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);
+}
+
 /**
 * CSS Custom Properties
 *
@@ -111,13 +119,6 @@
   --calcite-panel-max-width: unset;
 }
 
-: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 */

package/dist/collection/components/panel/panel.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -78,19 +78,18 @@ export class Panel {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.setDismissRef = (node) => {
-      this.dismissButtonEl = node;
+    this.setCloseRef = (node) => {
+      this.closeButtonEl = node;
     };
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
     this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
-        this.dismiss();
+        this.close();
       }
     };
-    this.dismiss = () => {
-      this.dismissed = true;
+    this.close = () => {
       this.closed = true;
       this.calcitePanelDismiss.emit();
     };
@@ -110,9 +109,19 @@ export class Panel {
       }
     };
   }
-  dismissedHandler() {
+  dismissedHandler(value) {
+    this.closed = value;
     this.calcitePanelDismissedChange.emit();
   }
+  closedHandler(value) {
+    this.dismissed = value;
+  }
+  dismissibleHandler(value) {
+    this.closable = value;
+  }
+  closableHandler(value) {
+    this.dismissible = value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -128,6 +137,16 @@ export class Panel {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    const isClosed = this.dismissed || this.closed;
+    const isClosable = this.dismissible || this.closable;
+    if (isClosed) {
+      this.dismissedHandler(isClosed);
+      this.closedHandler(isClosed);
+    }
+    if (isClosable) {
+      this.dismissibleHandler(isClosable);
+      this.closableHandler(isClosable);
+    }
   }
   disconnectedCallback() {
     var _a;
@@ -147,7 +166,7 @@ export class Panel {
   async setFocus(focusId) {
     var _a, _b, _c;
     if (focusId === "dismiss-button") {
-      (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      (_a = this.closeButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
       return;
     }
     if (focusId === "back-button") {
@@ -208,14 +227,14 @@ export class Panel {
       h("slot", { name: SLOTS.headerActionsStart }))) : null;
   }
   renderHeaderActionsEnd() {
-    const { dismiss, dismissible, el, intlClose, closable } = this;
+    const { close, el, intlClose, closable } = this;
     const text = intlClose || TEXT.close;
-    const dismissibleNode = closable || dismissible ? (h("calcite-action", { "aria-label": text, icon: ICONS.close, onClick: dismiss, ref: this.setDismissRef, text: text })) : null;
+    const closableNode = closable ? (h("calcite-action", { "aria-label": text, icon: ICONS.close, onClick: close, ref: this.setCloseRef, text: text })) : null;
     const slotNode = h("slot", { name: SLOTS.headerActionsEnd });
     const hasEndActions = getSlotted(el, SLOTS.headerActionsEnd);
-    return hasEndActions || dismissibleNode ? (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, key: "header-actions-end" },
+    return hasEndActions || closableNode ? (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, key: "header-actions-end" },
       slotNode,
-      dismissibleNode)) : null;
+      closableNode)) : null;
   }
   renderMenu() {
     const { el, intlOptions, menuOpen } = this;
@@ -267,8 +286,8 @@ export class Panel {
       h("slot", { name: SLOTS.fab })));
   }
   render() {
-    const { dismissed, dismissible, loading, panelKeyDownHandler, closed, closable } = this;
-    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: (closable || dismissible) && (closed || dismissed), onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: closable || dismissible ? 0 : -1 },
+    const { loading, panelKeyDownHandler, closed, closable } = this;
+    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: closed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: closable ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterNode()));
@@ -363,7 +382,7 @@ export class Panel {
     },
     "dismissible": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -384,7 +403,7 @@ export class Panel {
     },
     "closable": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -637,8 +656,8 @@ export class Panel {
         "text": "Fires when the close button is clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -652,11 +671,11 @@ export class Panel {
             "name": "deprecated",
             "text": "use calcitePanelDismiss instead."
           }],
-        "text": "Fires when the close button is clicked."
+        "text": "Fires when there is a change to the `dismissed` property value ."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -670,8 +689,8 @@ export class Panel {
         "text": "Fires when the content is scrolled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -685,8 +704,8 @@ export class Panel {
         "text": "Fires when the back button is clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -751,6 +770,12 @@ export class Panel {
       "methodName": "dismissedHandler"
     }, {
       "propName": "closed",
-      "methodName": "dismissedHandler"
+      "methodName": "closedHandler"
+    }, {
+      "propName": "dismissible",
+      "methodName": "dismissibleHandler"
+    }, {
+      "propName": "closable",
+      "methodName": "closableHandler"
     }]; }
 }

package/dist/collection/components/panel/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-next.536
+ * v1.0.0-next.539
  */
 export const CSS = {
   backButton: "back-button",

package/dist/collection/components/pick-list/pick-list.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 {
   position: relative;
   box-sizing: border-box;
@@ -95,13 +103,6 @@
   box-sizing: border-box;
 }
 
-: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 */

package/dist/collection/components/pick-list/pick-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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";

package/dist/collection/components/pick-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-next.536
+ * v1.0.0-next.539
  */
 export const CSS = {
   sticky: "sticky-pos"

package/dist/collection/components/pick-list/shared-list-logic.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-next.536
+ * v1.0.0-next.539
  */
 import { debounce } from "lodash-es";
 import { focusElement, getSlotted } from "../../utils/dom";

package/dist/collection/components/pick-list/shared-list-render.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-next.536
+ * v1.0.0-next.539
  */
 import { h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/pick-list-group/pick-list-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/pick-list-group/pick-list-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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";