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

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.538
+ * 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.538
+ * v1.0.0-next.539
  */
 export const CSS = {
   backButton: "back-button",

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

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

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

@@ -72,7 +72,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-item/pick-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-next.538
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";

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

package/dist/collection/components/popover/PopoverManager.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.538
+ * v1.0.0-next.539
  */
 export default class PopoverManager {
   constructor() {

package/dist/collection/components/popover/popover.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]) {
@@ -85,10 +85,10 @@
   transform: scale(0);
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   position: relative;
   z-index: 1;
-  transition: var(--calcite-popper-transition);
+  transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
@@ -96,33 +96,28 @@
   border-radius: 0.25rem;
 }
 
-:host([data-popper-placement^=bottom]) .calcite-popper-anim {
+:host([data-placement^=bottom]) .calcite-floating-ui-anim {
   transform: translateY(-5px);
 }
 
-:host([data-popper-placement^=top]) .calcite-popper-anim {
+:host([data-placement^=top]) .calcite-floating-ui-anim {
   transform: translateY(5px);
 }
 
-:host([data-popper-placement^=left]) .calcite-popper-anim {
+:host([data-placement^=left]) .calcite-floating-ui-anim {
   transform: translateX(5px);
 }
 
-:host([data-popper-placement^=right]) .calcite-popper-anim {
+:host([data-placement^=right]) .calcite-floating-ui-anim {
   transform: translateX(-5px);
 }
 
-:host([data-popper-placement]) .calcite-popper-anim--active {
+:host([data-placement]) .calcite-floating-ui-anim--active {
   opacity: 1;
   visibility: visible;
   transform: translate(0);
 }
 
-:host([data-popper-placement][data-popper-reference-hidden]) {
-  pointer-events: none;
-  opacity: 0;
-}
-
 :host([calcite-hydrated-hidden]) {
   visibility: hidden !important;
   pointer-events: none;
@@ -145,20 +140,20 @@
   background: var(--calcite-ui-foreground-1);
 }
 
-:host([data-popper-placement^=top]) .arrow {
+:host([data-placement^=top]) .arrow {
   inset-block-end: -4px;
 }
 
-:host([data-popper-placement^=bottom]) .arrow {
+:host([data-placement^=bottom]) .arrow {
   inset-block-start: -4px;
 }
 
-:host([data-popper-placement^=left]) .arrow {
+:host([data-placement^=left]) .arrow {
   direction: ltr;
   inset-inline-end: -4px;
 }
 
-:host([data-popper-placement^=right]) .arrow {
+:host([data-placement^=right]) .arrow {
   direction: ltr;
   inset-inline-start: -4px;
 }
@@ -171,7 +166,7 @@
   pointer-events: initial;
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;