@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

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

@@ -1,94 +1,26 @@
 /*!
  * 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.97
+ * v1.0.0-beta.99
  */
 import { forceUpdate, Host, h } from "@stencil/core";
-import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
+import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, defaultPopoverPlacement } from "./resources";
 import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultOffsetDistance, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
+import { connectFocusTrap, activateFocusTrap, deactivateFocusTrap, focusFirstTabbable } from "../../utils/focusTrapComponent";
 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";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 const manager = new PopoverManager();
 /**
  * @slot - A slot for adding custom content.
  */
 export class Popover {
   constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, clicking outside of the component automatically closes open `calcite-popover`s.
-     */
-    this.autoClose = false;
-    /**
-     * When `true`, a close button is added to the component.
-     *
-     * @deprecated use dismissible instead.
-     */
-    this.closeButton = false;
-    /**
-     * When `true`, a close button is added to the component.
-     *
-     * @deprecated use `closable` instead.
-     */
-    this.dismissible = false;
-    /** When `true`, display a close button within the component. */
-    this.closable = false;
-    /**
-     * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
-     */
-    this.disableFlip = false;
-    /**
-     * When `true`, removes the caret pointer.
-     */
-    this.disablePointer = false;
-    /**
-     * Offsets the position of the component away from the `referenceElement`.
-     *
-     * @default 6
-     */
-    this.offsetDistance = defaultOffsetDistance;
-    /**
-     * Offsets the position of the component along the `referenceElement`.
-     */
-    this.offsetSkidding = 0;
-    /**
-     * When `true`, displays and positions the component.
-     */
-    this.open = false;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"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`.
-     *
-     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
-     */
-    this.placement = defaultPopoverPlacement;
-    /**
-     * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.
-     *
-     * This property can be set to `true` to manage when the component is open.
-     */
-    this.triggerDisabled = false;
-    /**
-     * Accessible name for the component's close button.
-     *
-     * @default "Close"
-     */
-    this.intlClose = TEXT.close;
     this.guid = `calcite-popover-${guid()}`;
     this.openTransitionProp = "opacity";
     this.hasLoaded = false;
@@ -100,6 +32,8 @@ export class Popover {
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
       connectOpenCloseComponent(this);
+      this.focusTrapEl = el;
+      connectFocusTrap(this);
     };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
@@ -161,17 +95,42 @@ export class Popover {
       this.arrowEl = el;
       this.reposition(true);
     };
+    this.autoClose = false;
+    this.closable = false;
+    this.flipDisabled = false;
+    this.focusTrapDisabled = false;
+    this.pointerDisabled = false;
+    this.flipPlacements = undefined;
+    this.heading = undefined;
+    this.headingLevel = undefined;
+    this.label = undefined;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.offsetDistance = defaultOffsetDistance;
+    this.offsetSkidding = 0;
+    this.open = false;
+    this.overlayPositioning = "absolute";
+    this.placement = defaultPopoverPlacement;
+    this.referenceElement = undefined;
+    this.scale = "m";
+    this.triggerDisabled = false;
+    this.effectiveLocale = "";
+    this.effectiveReferenceElement = undefined;
+    this.defaultMessages = undefined;
   }
-  handleDismissible(value) {
-    this.closable = value;
-  }
-  handleClosable(value) {
-    this.dismissible = value;
+  handlefocusTrapDisabled(focusTrapDisabled) {
+    if (!this.open) {
+      return;
+    }
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
     this.reposition(true);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   offsetDistanceOffsetHandler() {
     this.reposition(true);
   }
@@ -197,6 +156,9 @@ export class Popover {
     this.setUpReferenceElement();
     this.reposition(true);
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -204,17 +166,17 @@ export class Popover {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.setFilteredPlacements();
+    connectLocalized(this);
+    connectMessages(this);
     connectOpenCloseComponent(this);
-    const closable = this.closable || this.dismissible;
-    if (closable) {
-      this.handleDismissible(closable);
-    }
-    if (closable) {
-      this.handleClosable(closable);
-    }
     this.setUpReferenceElement(this.hasLoaded);
   }
+  async componentWillLoad() {
+    await setUpMessages(this);
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
@@ -223,8 +185,11 @@ export class Popover {
   }
   disconnectedCallback() {
     this.removeReferences();
+    disconnectLocalized(this);
+    disconnectMessages(this);
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
     disconnectOpenCloseComponent(this);
+    deactivateFocusTrap(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -237,17 +202,17 @@ export class Popover {
    * @param delayed
    */
   async reposition(delayed = false) {
-    const { el, effectiveReferenceElement, placement, overlayPositioning, disableFlip, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl } = this;
+    const { el, effectiveReferenceElement, placement, overlayPositioning, flipDisabled, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl } = this;
     return reposition(this, {
       floatingEl: el,
       referenceEl: effectiveReferenceElement,
       overlayPositioning,
       placement,
-      disableFlip,
+      flipDisabled,
       flipPlacements: filteredFlipPlacements,
       offsetDistance,
       offsetSkidding,
-      includeArrow: !this.disablePointer,
+      includeArrow: !this.pointerDisabled,
       arrowEl,
       type: "popover"
     }, delayed);
@@ -258,14 +223,14 @@ export class Popover {
    * @param focusId
    */
   async setFocus(focusId) {
-    var _a;
+    await componentLoaded(this);
     const { closeButtonEl } = this;
     if (focusId === "close-button" && closeButtonEl) {
       forceUpdate(closeButtonEl);
       closeButtonEl.setFocus();
       return;
     }
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    focusFirstTabbable(this);
   }
   /**
    * Toggles the component's open property.
@@ -286,12 +251,14 @@ export class Popover {
   }
   onOpen() {
     this.calcitePopoverOpen.emit();
+    activateFocusTrap(this);
   }
   onBeforeClose() {
     this.calcitePopoverBeforeClose.emit();
   }
   onClose() {
     this.calcitePopoverClose.emit();
+    deactivateFocusTrap(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -299,19 +266,19 @@ export class Popover {
   //
   // --------------------------------------------------------------------------
   renderCloseButton() {
-    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;
+    const { messages, closable } = this;
+    return closable ? (h("div", { class: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: this.scale, text: messages.close }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
-    const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading)) : null;
+    const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel }, heading)) : null;
     return headingNode ? (h("div", { class: CSS.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
-    const { effectiveReferenceElement, heading, label, open, disablePointer } = this;
+    const { effectiveReferenceElement, heading, label, open, pointerDisabled } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    const arrowNode = !disablePointer ? h("div", { class: CSS.arrow, ref: this.storeArrowEl }) : null;
+    const arrowNode = !pointerDisabled ? h("div", { class: CSS.arrow, ref: this.storeArrowEl }) : null;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed
@@ -332,6 +299,7 @@ export class Popover {
       "$": ["popover.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "autoClose": {
@@ -352,28 +320,7 @@ export class Popover {
         "reflect": true,
         "defaultValue": "false"
       },
-      "closeButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use dismissible instead."
-            }],
-          "text": "When `true`, a close button is added to the component."
-        },
-        "attribute": "close-button",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "dismissible": {
+      "closable": {
         "type": "boolean",
         "mutable": true,
         "complexType": {
@@ -384,19 +331,16 @@ export class Popover {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `closable` instead."
-            }],
-          "text": "When `true`, a close button is added to the component."
+          "tags": [],
+          "text": "When `true`, display a close button within the component."
         },
-        "attribute": "dismissible",
+        "attribute": "closable",
         "reflect": true,
         "defaultValue": "false"
       },
-      "closable": {
+      "flipDisabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -406,13 +350,13 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, display a close button within the component."
+          "text": "When `true`, prevents flipping the component's placement when overlapping its `referenceElement`."
         },
-        "attribute": "closable",
+        "attribute": "flip-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
-      "disableFlip": {
+      "focusTrapDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -424,13 +368,13 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, prevents flipping the component's placement when overlapping its `referenceElement`."
+          "text": "When `true`, prevents focus trapping."
         },
-        "attribute": "disable-flip",
+        "attribute": "focus-trap-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
-      "disablePointer": {
+      "pointerDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -444,7 +388,7 @@ export class Popover {
           "tags": [],
           "text": "When `true`, removes the caret pointer."
         },
-        "attribute": "disable-pointer",
+        "attribute": "pointer-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -462,7 +406,7 @@ export class Popover {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Defines the available placements that can be used when a flip occurs."
@@ -477,7 +421,7 @@ export class Popover {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "The component header text."
@@ -524,6 +468,52 @@ export class Popover {
         "attribute": "label",
         "reflect": false
       },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<PopoverMessages>",
+          "resolved": "{ close?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "PopoverMessages": {
+              "location": "import",
+              "path": "./assets/popover/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "PopoverMessages",
+          "resolved": "{ close: string; }",
+          "references": {
+            "PopoverMessages": {
+              "location": "import",
+              "path": "./assets/popover/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
       "offsetDistance": {
         "type": "number",
         "mutable": false,
@@ -539,7 +529,7 @@ export class Popover {
               "name": "default",
               "text": "6"
             }],
-          "text": "Offsets the position of the component away from the `referenceElement`."
+          "text": "Offsets the position of the popover away from the `referenceElement`."
         },
         "attribute": "offset-distance",
         "reflect": true,
@@ -609,7 +599,7 @@ export class Popover {
         "mutable": false,
         "complexType": {
           "original": "LogicalPlacement",
-          "resolved": "Placement | VariationPlacement | AutoPlacement | DeprecatedPlacement",
+          "resolved": "\"auto\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto-start\" | \"auto-end\" | \"leading-start\" | \"leading\" | \"leading-end\" | \"trailing-end\" | \"trailing\" | \"trailing-start\"",
           "references": {
             "LogicalPlacement": {
               "location": "import",
@@ -620,10 +610,7 @@ export class Popover {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "see",
-              "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
-            }],
+          "tags": [],
           "text": "Determines where the component will be positioned relative to the `referenceElement`."
         },
         "attribute": "placement",
@@ -652,50 +639,54 @@ export class Popover {
         "attribute": "reference-element",
         "reflect": false
       },
-      "triggerDisabled": {
-        "type": "boolean",
+      "scale": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.\n\nThis property can be set to `true` to manage when the component is open."
+          "text": "Specifies the size of the component."
         },
-        "attribute": "trigger-disabled",
+        "attribute": "scale",
         "reflect": true,
-        "defaultValue": "false"
+        "defaultValue": "\"m\""
       },
-      "intlClose": {
-        "type": "string",
+      "triggerDisabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Close\""
-            }],
-          "text": "Accessible name for the component's close button."
+          "tags": [],
+          "text": "When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.\n\nThis property can be set to `true` to manage when the component is open."
         },
-        "attribute": "intl-close",
-        "reflect": false,
-        "defaultValue": "TEXT.close"
+        "attribute": "trigger-disabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
-      "effectiveReferenceElement": {}
+      "effectiveLocale": {},
+      "effectiveReferenceElement": {},
+      "defaultMessages": {}
     };
   }
   static get events() {
@@ -843,14 +834,14 @@ export class Popover {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "dismissible",
-        "methodName": "handleDismissible"
-      }, {
-        "propName": "closable",
-        "methodName": "handleClosable"
+        "propName": "focusTrapDisabled",
+        "methodName": "handlefocusTrapDisabled"
       }, {
         "propName": "flipPlacements",
         "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "offsetDistance",
         "methodName": "offsetDistanceOffsetHandler"
@@ -869,6 +860,9 @@ export class Popover {
       }, {
         "propName": "referenceElement",
         "methodName": "referenceElementHandler"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
 }

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.97
+ * v1.0.0-beta.99
  */
 export const CSS = {
   container: "container",
@@ -15,10 +15,6 @@ export const CSS = {
   headerContent: "header-content",
   heading: "heading"
 };
-export const TEXT = {
-  close: "Close"
-};
 export const defaultPopoverPlacement = "auto";
 export const ARIA_CONTROLS = "aria-controls";
 export const ARIA_EXPANDED = "aria-expanded";
-export const HEADING_LEVEL = 2;

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

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {
@@ -89,7 +90,7 @@
   inline-size: 100%;
 }
 
-.track, 
+.track,
 .bar {
   position: absolute;
   inset-block-start: 0px;

package/dist/collection/components/progress/progress.js

@@ -1,21 +1,15 @@
 /*!
  * 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.97
+ * v1.0.0-beta.99
  */
 import { h } from "@stencil/core";
 export class Progress {
   constructor() {
-    /**
-     * Specifies the component type.
-     *
-     * Use `"indeterminate"` if finding actual progress value is impossible.
-     *
-     */
     this.type = "determinate";
-    /** The component's progress value, with a range of 0.0 - 1.0. */
     this.value = 0;
-    /** When `true` and for `"indeterminate"` progress bars, reverses the animation direction. */
+    this.label = undefined;
+    this.text = undefined;
     this.reversed = false;
   }
   render() {

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

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {