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

package/dist/collection/components/popover/popover.js

@@ -1,13 +1,14 @@
 /*!
  * 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.90
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
 import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, filterComputedPlacements } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { Heading } from "../functional/Heading";
 import PopoverManager from "./PopoverManager";
 const manager = new PopoverManager();
@@ -61,7 +62,12 @@ export class Popover {
      * When true, displays and positions the component.
      */
     this.open = false;
-    /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the `referenceElement`.
@@ -80,16 +86,16 @@ export class Popover {
      */
     this.intlClose = TEXT.close;
     this.guid = `calcite-popover-${guid()}`;
-    this.activeTransitionProp = "opacity";
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
+    };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -146,21 +152,17 @@ export class Popover {
     this.hide = () => {
       this.open = false;
     };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
     this.storeArrowEl = (el) => {
       this.arrowEl = el;
       this.reposition();
     };
   }
+  handleDismissible(value) {
+    this.closable = value;
+  }
+  handleClosable(value) {
+    this.dismissible = value;
+  }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
   }
@@ -192,6 +194,13 @@ export class Popover {
   connectedCallback() {
     connectFloatingUI(this, this.effectiveReferenceElement, this.el);
     this.setFilteredPlacements();
+    connectOpenCloseComponent(this);
+    if (this.dismissible) {
+      this.handleDismissible(this.dismissible);
+    }
+    if (this.closable) {
+      this.handleClosable(this.closable);
+    }
   }
   componentWillLoad() {
     this.setUpReferenceElement();
@@ -200,10 +209,9 @@ export class Popover {
     this.reposition();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.removeReferences();
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
+    disconnectOpenCloseComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -273,8 +281,8 @@ export class Popover {
   //
   // --------------------------------------------------------------------------
   renderCloseButton() {
-    const { dismissible, closeButton, intlClose, heading, closable } = this;
-    return closable || dismissible || closeButton ? (h("div", { class: CSS.closeButtonContainer },
+    const { closeButton, intlClose, heading, closable } = this;
+    return closable || closeButton ? (h("div", { class: CSS.closeButtonContainer },
       h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: heading ? "s" : "m", text: intlClose },
         h("calcite-icon", { icon: "x", scale: heading ? "s" : "m" })))) : null;
   }
@@ -294,7 +302,7 @@ export class Popover {
       h("div", { class: {
           [FloatingCSS.animation]: true,
           [FloatingCSS.animationActive]: displayed
-        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
+        }, ref: this.setTransitionEl },
         arrowNode,
         h("div", { class: {
             [CSS.hasHeader]: !!heading,
@@ -355,7 +363,7 @@ export class Popover {
     },
     "dismissible": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -376,7 +384,7 @@ export class Popover {
     },
     "closable": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -578,7 +586,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the \"fixed\" value."
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -679,7 +687,7 @@ export class Popover {
       "method": "calcitePopoverBeforeClose",
       "name": "calcitePopoverBeforeClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -694,7 +702,7 @@ export class Popover {
       "method": "calcitePopoverClose",
       "name": "calcitePopoverClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -709,7 +717,7 @@ export class Popover {
       "method": "calcitePopoverBeforeOpen",
       "name": "calcitePopoverBeforeOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -724,7 +732,7 @@ export class Popover {
       "method": "calcitePopoverOpen",
       "name": "calcitePopoverOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -806,6 +814,12 @@ export class Popover {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "dismissible",
+      "methodName": "handleDismissible"
+    }, {
+      "propName": "closable",
+      "methodName": "handleClosable"
+    }, {
       "propName": "flipPlacements",
       "methodName": "flipPlacementsHandler"
     }, {

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

package/dist/collection/components/popover-manager/popover-manager.css

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

package/dist/collection/components/popover-manager/popover-manager.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.90
+ * v1.0.0-beta.91
  */
 import { Component, h, Prop, Element, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/progress/progress.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {
@@ -92,14 +92,14 @@
 }
 
 .track {
-  z-index: 0;
+  z-index: 1;
   inline-size: 100%;
   overflow: hidden;
   background: var(--calcite-ui-border-3);
 }
 
 .bar {
-  z-index: 0;
+  z-index: 1;
   background-color: var(--calcite-ui-brand);
 }
 

package/dist/collection/components/progress/progress.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.90
+ * v1.0.0-beta.91
  */
 import { Component, Element, h, Prop } from "@stencil/core";
 export class Progress {

package/dist/collection/components/radio-button/radio-button.css

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

package/dist/collection/components/radio-button/radio-button.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.90
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -18,27 +18,27 @@ export class RadioButton {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The checked state of the radio button. */
+    /** When true, the component is checked. */
     this.checked = false;
-    /** The disabled state of the radio button. */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * The focused state of the radio button.
+     * The focused state of the component.
      *
      * @internal
      */
     this.focused = false;
-    /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
+    /** When true, the component is not displayed and is not focusable or checkable. */
     this.hidden = false;
     /**
-     * The hovered state of the radio button.
+     * The hovered state of the component.
      *
      * @internal
      */
     this.hovered = false;
-    /** Requires that a value is selected for the radio button group before the parent form will submit. */
+    /** When true, the component must have a value selected from the `calcite-radio-button-group` on form submission. */
     this.required = false;
-    /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
+    /** Specifies the size of the component inherited from the `calcite-radio-button-group`. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -73,7 +73,7 @@ export class RadioButton {
     };
     this.handleKeyDown = (event) => {
       const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-      const key = event.key;
+      const { key } = event;
       const { el } = this;
       if (keys.indexOf(key) === -1) {
         return;
@@ -273,7 +273,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The checked state of the radio button."
+        "text": "When true, the component is checked."
       },
       "attribute": "checked",
       "reflect": true,
@@ -291,7 +291,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The disabled state of the radio button."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -312,7 +312,7 @@ export class RadioButton {
             "name": "internal",
             "text": undefined
           }],
-        "text": "The focused state of the radio button."
+        "text": "The focused state of the component."
       },
       "attribute": "focused",
       "reflect": true,
@@ -330,7 +330,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id attribute of the radio button.  When omitted, a globally unique identifier is used."
+        "text": "The id attribute of the component. When omitted, a globally unique identifier is used."
       },
       "attribute": "guid",
       "reflect": true
@@ -347,7 +347,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable."
+        "text": "When true, the component is not displayed and is not focusable or checkable."
       },
       "attribute": "hidden",
       "reflect": true,
@@ -368,7 +368,7 @@ export class RadioButton {
             "name": "internal",
             "text": undefined
           }],
-        "text": "The hovered state of the radio button."
+        "text": "The hovered state of the component."
       },
       "attribute": "hovered",
       "reflect": true,
@@ -389,7 +389,7 @@ export class RadioButton {
             "name": "internal",
             "text": undefined
           }],
-        "text": "The label of the radio input"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -406,7 +406,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`."
+        "text": "Specifies the name of the component, passed from the `calcite-radio-button-group` on form submission."
       },
       "attribute": "name",
       "reflect": true
@@ -423,7 +423,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Requires that a value is selected for the radio button group before the parent form will submit."
+        "text": "When true, the component must have a value selected from the `calcite-radio-button-group` on form submission."
       },
       "attribute": "required",
       "reflect": true,
@@ -446,7 +446,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`."
+        "text": "Specifies the size of the component inherited from the `calcite-radio-button-group`."
       },
       "attribute": "scale",
       "reflect": true,
@@ -464,7 +464,7 @@ export class RadioButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The value of the radio button."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -474,7 +474,7 @@ export class RadioButton {
       "method": "calciteInternalRadioButtonBlur",
       "name": "calciteInternalRadioButtonBlur",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -492,7 +492,7 @@ export class RadioButton {
       "method": "calciteRadioButtonChange",
       "name": "calciteRadioButtonChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -507,7 +507,7 @@ export class RadioButton {
       "method": "calciteInternalRadioButtonCheckedChange",
       "name": "calciteInternalRadioButtonCheckedChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -525,7 +525,7 @@ export class RadioButton {
       "method": "calciteInternalRadioButtonFocus",
       "name": "calciteInternalRadioButtonFocus",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{

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

package/dist/collection/components/radio-button-group/radio-button-group.css

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

package/dist/collection/components/radio-button-group/radio-button-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.90
+ * v1.0.0-beta.91
  */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -15,15 +15,15 @@ export class RadioButtonGroup {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The disabled state of the radio button group. */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** The radio button group's hidden status.  When a radio button group is hidden none of its options are focusable or checkable. */
+    /** When true, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. */
     this.hidden = false;
-    /** The layout direction of the radio buttons in a group. */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** Requires that a value is selected for the radio button group before the parent form will submit. */
+    /** When true, the component must have a value on form submission. */
     this.required = false;
-    /** The scale (size) of the radio button group. */
+    /** Specifies the size of the component. */
     this.scale = "m";
     // --------------------------------------------------------------------------
     //
@@ -113,7 +113,7 @@ export class RadioButtonGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The disabled state of the radio button group."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -131,7 +131,7 @@ export class RadioButtonGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The radio button group's hidden status.  When a radio button group is hidden none of its options are focusable or checkable."
+        "text": "When true, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable."
       },
       "attribute": "hidden",
       "reflect": true,
@@ -154,7 +154,7 @@ export class RadioButtonGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The layout direction of the radio buttons in a group."
+        "text": "Defines the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -172,7 +172,7 @@ export class RadioButtonGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The name of the radio button group. `name` must be unique to other radio button group instances."
+        "text": "Specifies the name of the component on form submission. Must be unique to other component instances."
       },
       "attribute": "name",
       "reflect": true
@@ -189,7 +189,7 @@ export class RadioButtonGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Requires that a value is selected for the radio button group before the parent form will submit."
+        "text": "When true, the component must have a value on form submission."
       },
       "attribute": "required",
       "reflect": true,
@@ -212,7 +212,7 @@ export class RadioButtonGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The scale (size) of the radio button group."
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -223,11 +223,11 @@ export class RadioButtonGroup {
       "method": "calciteRadioButtonGroupChange",
       "name": "calciteRadioButtonGroupChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the radio button group has changed."
+        "text": "Fires when the component has changed."
       },
       "complexType": {
         "original": "void",

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

package/dist/collection/components/radio-group/radio-group.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {
@@ -120,11 +120,6 @@
   justify-content: flex-start;
 }
 
-::slotted(calcite-radio-group-item[checked]), 
-::slotted(calcite-radio-group-item:focus) {
-  z-index: 0;
-}
-
 ::slotted(input[slot=hidden-form-input]) {
   margin: 0 !important;
   opacity: 0 !important;