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

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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 */
@@ -109,7 +110,7 @@
 }
 
 :host([filter-enabled]) header {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   display: flex;
   align-items: stretch;
   justify-content: flex-end;
@@ -120,14 +121,14 @@
 }
 :host([filter-enabled]) header.sticky-pos {
   position: sticky;
-  top: 0px;
+  inset-block-start: 0px;
   z-index: 1;
 }
 
 calcite-filter {
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 
 :host([loading][disabled]) {
-  min-height: 2rem;
+  min-block-size: 2rem;
 }

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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]) {
@@ -79,7 +79,7 @@
 }
 
 :host {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   box-sizing: border-box;
   display: block;
   background-color: transparent;
@@ -91,7 +91,7 @@
 }
 
 :host(:last-child) {
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 
 /* Shared styles for header elements */
@@ -137,10 +137,8 @@ h5.heading {
 }
 
 h3.heading {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-block: 0.5rem;
+  margin-inline: 1rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
   color: var(--calcite-ui-text-3);

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   heading: "heading",

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

@@ -72,16 +72,24 @@
 * 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{
   margin: 0px;
-  margin-bottom: 1px;
+  margin-block-end: 1px;
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
@@ -125,8 +133,7 @@
 }
 
 .icon{
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-block: 0px;
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -141,7 +148,7 @@
 
 .icon-dot{
   display: flex;
-  width: 1.5rem;
+  inline-size: 1.5rem;
   align-items: center;
   padding: 0.5rem;
 }
@@ -166,10 +173,8 @@
   flex-direction: column;
   flex-wrap: nowrap;
   overflow: hidden;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   word-wrap: break-word;
@@ -182,7 +187,7 @@
 }
 
 .description{
-  margin-top: 0.125rem;
+  margin-block-start: 0.125rem;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
@@ -199,13 +204,6 @@
   padding-inline-start: 0.25rem;
 }
 
-: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-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-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -285,7 +285,7 @@ export class PickListItem {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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;
@@ -131,8 +126,8 @@
 .arrow,
 .arrow::before {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  inline-size: 8px;
+  block-size: 8px;
   z-index: -1;
 }
 
@@ -145,20 +140,22 @@
   background: var(--calcite-ui-foreground-1);
 }
 
-:host([data-popper-placement^=top]) .arrow {
-  bottom: -4px;
+:host([data-placement^=top]) .arrow {
+  inset-block-end: -4px;
 }
 
-:host([data-popper-placement^=bottom]) .arrow {
-  top: -4px;
+:host([data-placement^=bottom]) .arrow {
+  inset-block-start: -4px;
 }
 
-:host([data-popper-placement^=left]) .arrow {
-  right: -4px;
+:host([data-placement^=left]) .arrow {
+  direction: ltr;
+  inset-inline-end: -4px;
 }
 
-:host([data-popper-placement^=right]) .arrow {
-  left: -4px;
+:host([data-placement^=right]) .arrow {
+  direction: ltr;
+  inset-inline-start: -4px;
 }
 
 :host {
@@ -169,7 +166,7 @@
   pointer-events: initial;
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;
@@ -187,10 +184,10 @@
   align-items: stretch;
   justify-content: flex-start;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-foreground-1);
-  border-bottom-color: var(--calcite-ui-border-3);
+  border-block-end-color: var(--calcite-ui-border-3);
 }
 
 .heading {
@@ -199,10 +196,8 @@
   flex: 1 1 auto;
   align-self: center;
   white-space: normal;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 1rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
@@ -214,7 +209,7 @@
 .container {
   position: relative;
   display: flex;
-  height: 100%;
+  block-size: 100%;
   flex-direction: row;
   flex-wrap: nowrap;
   border-radius: 0.25rem;
@@ -227,8 +222,8 @@
 
 .content {
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
   align-self: center;
@@ -246,5 +241,5 @@
 
 ::slotted(calcite-panel), 
 ::slotted(calcite-flow) {
-  height: 100%;
+  block-size: 100%;
 }