@esri/calcite-components 1.0.0-next.701 → 1.0.0-next.702

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.701
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
@@ -262,10 +262,10 @@ export class Notice {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "NoticeMessages",
           "resolved": "{ close: string; }",
           "references": {
-            "Messages": {
+            "NoticeMessages": {
               "location": "import",
               "path": "./assets/notice/t9n"
             }
@@ -285,13 +285,13 @@ export class Notice {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<NoticeMessages>",
           "resolved": "{ close?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "NoticeMessages": {
               "location": "import",
               "path": "./assets/notice/t9n"
             }

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.701
+ * v1.0.0-next.702
  */
 export const SLOTS = {
   title: "title",

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.701
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

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.701
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/assets/pagination/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type PaginationMessages = {
   next: string;
   previous: string;
 };

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.701
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
@@ -205,13 +205,13 @@ export class Pagination {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<PaginationMessages>",
           "resolved": "{ next?: string; previous?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "PaginationMessages": {
               "location": "import",
               "path": "./assets/pagination/t9n"
             }
@@ -327,10 +327,10 @@ export class Pagination {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "PaginationMessages",
           "resolved": "{ next: string; previous: string; }",
           "references": {
-            "Messages": {
+            "PaginationMessages": {
               "location": "import",
               "path": "./assets/pagination/t9n"
             }

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.701
+ * v1.0.0-next.702
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/assets/panel/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type PanelMessages = {
   close: string;
   options: string;
 };

package/dist/collection/components/panel/panel.js

@@ -1,11 +1,11 @@
 /*!
  * 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.701
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS } from "./resources";
-import { toAriaBoolean } from "../../utils/dom";
+import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -171,29 +171,10 @@ export class Panel {
   // --------------------------------------------------------------------------
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  async setFocus(focusId) {
+  async setFocus() {
     await componentLoaded(this);
-    const { backButtonEl, closeButtonEl, containerEl } = this;
-    if (focusId === "back-button") {
-      backButtonEl?.setFocus();
-      return;
-    }
-    if (focusId === "dismiss-button") {
-      closeButtonEl?.setFocus();
-      return;
-    }
-    if (backButtonEl) {
-      backButtonEl.setFocus();
-      return;
-    }
-    if (closeButtonEl) {
-      closeButtonEl.setFocus();
-      return;
-    }
-    containerEl?.focus();
+    focusFirstTabbable(this.containerEl);
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.
@@ -485,13 +466,13 @@ export class Panel {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<PanelMessages>",
           "resolved": "{ close?: string; options?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "PanelMessages": {
               "location": "import",
               "path": "./assets/panel/t9n"
             }
@@ -508,10 +489,10 @@ export class Panel {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "PanelMessages",
           "resolved": "{ close: string; options: string; }",
           "references": {
-            "Messages": {
+            "PanelMessages": {
               "location": "import",
               "path": "./assets/panel/t9n"
             }
@@ -579,14 +560,8 @@ export class Panel {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(focusId?: \"back-button\" | \"dismiss-button\") => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "focusId"
-                }],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
@@ -596,10 +571,7 @@ export class Panel {
         },
         "docs": {
           "text": "Sets focus on the component.",
-          "tags": [{
-              "name": "param",
-              "text": "focusId"
-            }]
+          "tags": []
         }
       },
       "scrollContentTo": {

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

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.701
+ * v1.0.0-next.702
  */
 import { 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.701
+ * v1.0.0-next.702
  */
 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.701
+ * v1.0.0-next.702
  */
 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.701
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

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.701
+ * v1.0.0-next.702
  */
 import { 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.701
+ * v1.0.0-next.702
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/pick-list-item/assets/pick-list-item/t9n/index.d.ts

@@ -1,3 +1,3 @@
-export type Messages = {
+export type PickListItemMessages = {
   remove: string;
 };

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.701
+ * v1.0.0-next.702
  */
 import { Fragment, h } from "@stencil/core";
 import { CSS, ICONS, SLOTS } from "./resources";
@@ -315,13 +315,13 @@ export class PickListItem {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<PickListItemMessages>",
           "resolved": "{ remove?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "PickListItemMessages": {
               "location": "import",
               "path": "./assets/pick-list-item/t9n"
             }
@@ -338,10 +338,10 @@ export class PickListItem {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "PickListItemMessages",
           "resolved": "{ remove: string; }",
           "references": {
-            "Messages": {
+            "PickListItemMessages": {
               "location": "import",
               "path": "./assets/pick-list-item/t9n"
             }

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.701
+ * v1.0.0-next.702
  */
 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.701
+ * v1.0.0-next.702
  */
 import { isPrimaryPointerButton } from "../../utils/dom";
 import { isActivationKey } from "../../utils/key";
@@ -28,11 +28,11 @@ export default class PopoverManager {
       const composedPath = event.composedPath();
       const togglePopover = this.queryPopover(composedPath);
       if (togglePopover && !togglePopover.triggerDisabled) {
-        togglePopover.toggle();
+        togglePopover.open = !togglePopover.open;
       }
       Array.from(this.registeredElements.values())
         .filter((popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover))
-        .forEach((popover) => popover.toggle(false));
+        .forEach((popover) => (popover.open = false));
     };
     this.keyHandler = (event) => {
       if (event.defaultPrevented) {
@@ -72,7 +72,7 @@ export default class PopoverManager {
     }
   }
   closeAllPopovers() {
-    Array.from(this.registeredElements.values()).forEach((popover) => popover.toggle(false));
+    Array.from(this.registeredElements.values()).forEach((popover) => (popover.open = false));
   }
   addListeners() {
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });

package/dist/collection/components/popover/assets/popover/t9n/index.d.ts

@@ -1,3 +1,3 @@
-export type Messages = {
+export type PopoverMessages = {
   close: string;
 };

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

@@ -1,14 +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-next.701
+ * v1.0.0-next.702
  */
 import { forceUpdate, Host, h } from "@stencil/core";
 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 { connectFocusTrap, activateFocusTrap, deactivateFocusTrap, updateFocusTrapElements } from "../../utils/focusTrapComponent";
 import { guid } from "../../utils/guid";
-import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { focusFirstTabbable, queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { Heading } from "../functional/Heading";
 import PopoverManager from "./PopoverManager";
@@ -219,26 +219,17 @@ export class Popover {
   }
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  async setFocus(focusId) {
+  async setFocus() {
     await componentLoaded(this);
-    const { closeButtonEl } = this;
-    if (focusId === "close-button" && closeButtonEl) {
-      forceUpdate(closeButtonEl);
-      closeButtonEl.setFocus();
-      return;
-    }
-    focusFirstTabbable(this);
+    forceUpdate(this.el);
+    focusFirstTabbable(this.focusTrapEl);
   }
   /**
-   * Toggles the component's open property.
-   *
-   * @param value
+   * Updates the element(s) that are used within the focus-trap of the component.
    */
-  async toggle(value = !this.open) {
-    this.open = value;
+  async updateFocusTrapElements() {
+    updateFocusTrapElements(this);
   }
   getReferenceElement() {
     const { referenceElement, el } = this;
@@ -267,12 +258,12 @@ export class Popover {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     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;
+    return closable ? (h("div", { class: CSS.closeButtonContainer, key: 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)) : null;
-    return headingNode ? (h("div", { class: CSS.header }, headingNode, this.renderCloseButton())) : null;
+    return headingNode ? (h("div", { class: CSS.header, key: CSS.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
     const { effectiveReferenceElement, heading, label, open, pointerDisabled } = this;
@@ -472,13 +463,13 @@ export class Popover {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<PopoverMessages>",
           "resolved": "{ close?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "PopoverMessages": {
               "location": "import",
               "path": "./assets/popover/t9n"
             }
@@ -495,10 +486,10 @@ export class Popover {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "PopoverMessages",
           "resolved": "{ close: string; }",
           "references": {
-            "Messages": {
+            "PopoverMessages": {
               "location": "import",
               "path": "./assets/popover/t9n"
             }
@@ -781,14 +772,8 @@ export class Popover {
       },
       "setFocus": {
         "complexType": {
-          "signature": "(focusId?: \"close-button\") => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "focusId"
-                }],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
@@ -798,22 +783,13 @@ export class Popover {
         },
         "docs": {
           "text": "Sets focus on the component.",
-          "tags": [{
-              "name": "param",
-              "text": "focusId"
-            }]
+          "tags": []
         }
       },
-      "toggle": {
+      "updateFocusTrapElements": {
         "complexType": {
-          "signature": "(value?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "value"
-                }],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
@@ -822,11 +798,8 @@ export class Popover {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Toggles the component's open property.",
-          "tags": [{
-              "name": "param",
-              "text": "value"
-            }]
+          "text": "Updates the element(s) that are used within the focus-trap of the component.",
+          "tags": []
         }
       }
     };

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-next.701
+ * v1.0.0-next.702
  */
 export const CSS = {
   container: "container",

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-next.701
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 export class Progress {

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-next.701
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

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-next.701
+ * v1.0.0-next.702
  */
 export const CSS = {
   container: "container"