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

package/dist/collection/components/modal/modal.js

@@ -1,22 +1,18 @@
 /*!
  * 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, Host } from "@stencil/core";
-import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
-import { queryShadowRoot } from "@a11y/focus-trap/shadow";
-import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
-import { CSS, ICONS, SLOTS, TEXT } from "./resources";
+import { ensureId, focusElement, getSlotted } from "../../utils/dom";
+import { CSS, ICONS, SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
-const isFocusableExtended = (el) => {
-  return isCalciteFocusable(el) || isFocusable(el);
-};
-const getFocusableElements = (el) => {
-  return queryShadowRoot(el, isHidden, isFocusableExtended);
-};
+import { onToggleOpenCloseComponent } from "../../utils/openCloseComponent";
+import { connectFocusTrap, activateFocusTrap, deactivateFocusTrap, focusFirstTabbable } from "../../utils/focusTrapComponent";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 /**
  * @slot header - A slot for adding header text.
  * @slot content - A slot for adding the component's content.
@@ -26,53 +22,6 @@ const getFocusableElements = (el) => {
  */
 export class Modal {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated use `open` instead.
-     */
-    this.active = false;
-    /** When `true`, displays and positions the component.  */
-    this.open = false;
-    /** Passes a function to run before the component closes. */
-    this.beforeClose = () => Promise.resolve();
-    /** When `true`, disables the component's close button. */
-    this.disableCloseButton = false;
-    /** When `true`, disables the closing of the component when clicked outside. */
-    this.disableOutsideClose = false;
-    /** Accessible name for the component's close button. */
-    this.intlClose = TEXT.close;
-    /** When `true`, disables the default close on escape behavior. */
-    this.disableEscape = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
-    this.width = "m";
-    /** Sets the background color of the component's content. */
-    this.backgroundColor = "white";
-    /**
-     * When `true`, disables spacing to the content area slot.
-     *
-     * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
-     */
-    this.noPadding = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Variables
-    //
-    //--------------------------------------------------------------------------
-    this.hasFooter = true;
-    /**
-     * We use internal variable to make sure initially open modal can transition from closed state when rendered
-     *
-     * @private
-     */
-    this.isOpen = false;
     this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
@@ -82,14 +31,15 @@ export class Modal {
     //--------------------------------------------------------------------------
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
-      connectOpenCloseComponent(this);
+      this.focusTrapEl = el;
+      connectFocusTrap(this);
     };
     this.openEnd = () => {
       this.setFocus();
       this.el.removeEventListener("calciteModalOpen", this.openEnd);
     };
     this.handleOutsideClose = () => {
-      if (this.disableOutsideClose) {
+      if (this.outsideCloseDisabled) {
         return;
       }
       this.close();
@@ -99,72 +49,87 @@ export class Modal {
       return this.beforeClose(this.el).then(() => {
         this.open = false;
         this.isOpen = false;
-        focusElement(this.previousActiveElement);
         this.removeOverflowHiddenClass();
       });
     };
-    this.focusFirstElement = () => {
-      focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);
-    };
-    this.focusLastElement = () => {
-      const focusableElements = getFocusableElements(this.el).filter((el) => !el.getAttribute("data-focus-fence"));
-      if (focusableElements.length > 0) {
-        focusElement(focusableElements[focusableElements.length - 1]);
-      }
-      else {
-        focusElement(this.closeButtonEl);
-      }
-    };
     this.updateFooterVisibility = () => {
       this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
+    this.open = false;
+    this.beforeClose = () => Promise.resolve();
+    this.closeButtonDisabled = false;
+    this.focusTrapDisabled = false;
+    this.outsideCloseDisabled = false;
+    this.docked = undefined;
+    this.escapeDisabled = false;
+    this.scale = "m";
+    this.width = "m";
+    this.fullscreen = undefined;
+    this.kind = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.slottedInShell = undefined;
+    this.hasFooter = true;
+    this.isOpen = false;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
+  }
+  handlefocusTrapDisabled(focusTrapDisabled) {
+    if (!this.open) {
+      return;
+    }
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    await setUpMessages(this);
+    setUpLoadableComponent(this);
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
+      onToggleOpenCloseComponent(this);
       requestAnimationFrame(() => this.openModal());
     }
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
     connectConditionalSlotComponent(this);
-    connectOpenCloseComponent(this);
-    if (this.open) {
-      this.active = this.open;
-    }
-    if (this.active) {
-      this.activeHandler(this.active);
-    }
+    connectLocalized(this);
+    connectMessages(this);
   }
   disconnectedCallback() {
-    var _a;
     this.removeOverflowHiddenClass();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     disconnectConditionalSlotComponent(this);
-    disconnectOpenCloseComponent(this);
+    deactivateFocusTrap(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    this.slottedInShell = false;
   }
   render() {
-    return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: {
+    return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("div", { class: { [CSS.container]: true, [CSS.slottedInShell]: this.slottedInShell } }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: {
         [CSS.modal]: true,
         [CSS.modalOpen]: this.isOpen
-      }, ref: this.setTransitionEl }, h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), h("div", { class: {
+      }, ref: this.setTransitionEl }, h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), h("div", { class: {
         content: true,
-        "content--spaced": !this.noPadding,
         "content--no-footer": !this.hasFooter
-      }, ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderFooter(), h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
+      }, ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderFooter()))));
   }
   renderFooter() {
     return this.hasFooter ? (h("div", { class: CSS.footer, key: "footer" }, h("span", { class: CSS.back }, h("slot", { name: SLOTS.back })), h("span", { class: CSS.secondary }, h("slot", { name: SLOTS.secondary })), h("span", { class: CSS.primary }, h("slot", { name: SLOTS.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+    return !this.closeButtonDisabled ? (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.messages.close }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
@@ -188,13 +153,16 @@ export class Modal {
         }
       `)) : null;
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
   handleEscape(event) {
-    if (this.open && !this.disableEscape && event.key === "Escape" && !event.defaultPrevented) {
+    if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
       this.close();
       event.preventDefault();
     }
@@ -204,18 +172,6 @@ export class Modal {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /**
-   * Focus the first interactive element.
-   *
-   * @param el
-   * @deprecated use `setFocus` instead.
-   */
-  async focusElement(el) {
-    if (el) {
-      el.focus();
-    }
-    return this.setFocus();
-  }
   /**
    * Sets focus on the component.
    *
@@ -225,8 +181,12 @@ export class Modal {
    * @param focusId
    */
   async setFocus(focusId) {
-    const closeButton = this.closeButtonEl;
-    return focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
+    await componentLoaded(this);
+    const { closeButtonEl } = this;
+    if (closeButtonEl && focusId === "close-button") {
+      return focusElement(closeButtonEl);
+    }
+    focusFirstTabbable(this);
   }
   /**
    * Sets the scroll top of the component's content.
@@ -252,6 +212,7 @@ export class Modal {
   onOpen() {
     this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);
     this.calciteModalOpen.emit();
+    activateFocusTrap(this);
   }
   onBeforeClose() {
     this.transitionEl.classList.add(CSS.closingActive);
@@ -260,25 +221,21 @@ export class Modal {
   onClose() {
     this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);
     this.calciteModalClose.emit();
-  }
-  activeHandler(value) {
-    this.open = value;
+    deactivateFocusTrap(this);
   }
   async toggleModal(value) {
-    var _a, _b;
-    this.active = value;
+    onToggleOpenCloseComponent(this);
     if (value) {
-      (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);
+      this.transitionEl?.classList.add(CSS.openingIdle);
       this.openModal();
     }
     else {
-      (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);
+      this.transitionEl?.classList.add(CSS.closingIdle);
       this.close();
     }
   }
   /** Open the modal */
   openModal() {
-    this.previousActiveElement = document.activeElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.open = true;
     this.isOpen = true;
@@ -286,7 +243,9 @@ export class Modal {
     const contentEl = getSlotted(this.el, SLOTS.content);
     this.titleId = ensureId(titleEl);
     this.contentId = ensureId(contentEl);
-    document.documentElement.classList.add(CSS.overflowHidden);
+    if (!this.slottedInShell) {
+      document.documentElement.classList.add(CSS.overflowHidden);
+    }
   }
   removeOverflowHiddenClass() {
     document.documentElement.classList.remove(CSS.overflowHidden);
@@ -303,29 +262,9 @@ export class Modal {
       "$": ["modal.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `open` instead."
-            }],
-          "text": "When `true`, the component is active."
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -360,14 +299,14 @@ export class Modal {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Passes a function to run before the component closes."
         },
         "defaultValue": "() => Promise.resolve()"
       },
-      "disableCloseButton": {
+      "closeButtonDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -381,11 +320,11 @@ export class Modal {
           "tags": [],
           "text": "When `true`, disables the component's close button."
         },
-        "attribute": "disable-close-button",
+        "attribute": "close-button-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
-      "disableOutsideClose": {
+      "focusTrapDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -397,29 +336,29 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, disables the closing of the component when clicked outside."
+          "text": "When `true`, prevents focus trapping."
         },
-        "attribute": "disable-outside-close",
+        "attribute": "focus-trap-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
-      "intlClose": {
-        "type": "string",
+      "outsideCloseDisabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Accessible name for the component's close button."
+          "text": "When `true`, disables the closing of the component when clicked outside."
         },
-        "attribute": "intl-close",
-        "reflect": false,
-        "defaultValue": "TEXT.close"
+        "attribute": "outside-close-disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "docked": {
         "type": "boolean",
@@ -438,7 +377,7 @@ export class Modal {
         "attribute": "docked",
         "reflect": true
       },
-      "disableEscape": {
+      "escapeDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -452,7 +391,7 @@ export class Modal {
           "tags": [],
           "text": "When `true`, disables the default close on escape behavior."
         },
-        "attribute": "disable-escape",
+        "attribute": "escape-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -519,49 +458,77 @@ export class Modal {
         "attribute": "fullscreen",
         "reflect": true
       },
-      "color": {
+      "kind": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"red\" | \"blue\"",
-          "resolved": "\"blue\" | \"red\"",
-          "references": {}
+          "original": "Kind",
+          "resolved": "\"brand\" | \"danger\" | \"info\" | \"inverse\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {
+            "Kind": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Adds a color bar to the top of component for visual impact.\nUse color to add importance to destructive or workflow dialogs."
+          "text": "Specifies the kind of the component (will apply to top border)."
         },
-        "attribute": "color",
+        "attribute": "kind",
         "reflect": true
       },
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
         "complexType": {
-          "original": "ModalBackgroundColor",
-          "resolved": "\"grey\" | \"white\"",
+          "original": "ModalMessages",
+          "resolved": "{ close: string; }",
           "references": {
-            "ModalBackgroundColor": {
+            "ModalMessages": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "./assets/modal/t9n"
             }
           }
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "Sets the background color of the component's content."
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<ModalMessages>",
+          "resolved": "{ close?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "ModalMessages": {
+              "location": "import",
+              "path": "./assets/modal/t9n"
+            }
+          }
         },
-        "attribute": "background-color",
-        "reflect": true,
-        "defaultValue": "\"white\""
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
       },
-      "noPadding": {
+      "slottedInShell": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -571,21 +538,22 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "deprecated",
-              "text": "Use `--calcite-modal-padding` CSS variable instead."
+              "name": "internal",
+              "text": undefined
             }],
-          "text": "When `true`, disables spacing to the content area slot."
+          "text": "This internal property, managed by a containing calcite-shell, is used\nto inform the component if special configuration or styles are needed"
         },
-        "attribute": "no-padding",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "slotted-in-shell",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
       "hasFooter": {},
-      "isOpen": {}
+      "isOpen": {},
+      "effectiveLocale": {},
+      "defaultMessages": {}
     };
   }
   static get events() {
@@ -653,37 +621,6 @@ export class Modal {
   }
   static get methods() {
     return {
-      "focusElement": {
-        "complexType": {
-          "signature": "(el?: HTMLElement) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "el"
-                }],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focus the first interactive element.",
-          "tags": [{
-              "name": "param",
-              "text": "el"
-            }, {
-              "name": "deprecated",
-              "text": "use `setFocus` instead."
-            }]
-        }
-      },
       "setFocus": {
         "complexType": {
           "signature": "(focusId?: \"close-button\") => Promise<void>",
@@ -748,8 +685,14 @@ export class Modal {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "active",
-        "methodName": "activeHandler"
+        "propName": "focusTrapDisabled",
+        "methodName": "handlefocusTrapDisabled"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }, {
         "propName": "open",
         "methodName": "toggleModal"

package/dist/collection/components/modal/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 = {
   modal: "modal",
@@ -15,6 +15,8 @@ export const CSS = {
   secondary: "secondary",
   primary: "primary",
   overflowHidden: "overflow-hidden",
+  container: "container",
+  slottedInShell: "slotted-in-shell",
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children
   openingIdle: "modal--opening-idle",
@@ -22,6 +24,12 @@ export const CSS = {
   closingIdle: "modal--closing-idle",
   closingActive: "modal--closing-active"
 };
+export const DURATIONS = {
+  slow: 14000,
+  medium: 10000,
+  fast: 6000,
+  test: 300 / 1000
+};
 export const ICONS = {
   close: "x"
 };
@@ -32,6 +40,3 @@ export const SLOTS = {
   secondary: "secondary",
   primary: "primary"
 };
-export const TEXT = {
-  close: "Close"
-};

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

@@ -0,0 +1,3 @@
+export type NoticeMessages = {
+  close: string;
+};

package/dist/collection/components/notice/assets/notice/t9n/messages.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/dist/collection/components/notice/assets/notice/t9n/messages_ar.json

@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}

package/dist/collection/components/notice/assets/notice/t9n/messages_bg.json

@@ -0,0 +1,3 @@
+{
+  "close": "Затваряне"
+}