@getflip/swirl-components 0.442.0 → 0.443.0

package/dist/collection/components/swirl-dialog/swirl-dialog.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { tabbable } from "tabbable";
 /**
  * @slot slot - The dialog content
  * @slot left-controls - Controls displayed on the left side of the default ones
@@ -76,12 +77,27 @@ export class SwirlDialog {
         this.closing = true;
         setTimeout(() => {
             this.dialogEl.close();
+            if (this.returnFocusTo) {
+                this.customFocusReturn();
+            }
         }, 150);
     }
+    customFocusReturn() {
+        const element = typeof this.returnFocusTo === "string"
+            ? document.querySelector(this.returnFocusTo)
+            : this.returnFocusTo;
+        const focusableElements = tabbable(element, {
+            includeContainer: true,
+            getShadowRoot: true,
+        });
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
     render() {
         const className = classnames("dialog", { "dialog--closing": this.closing });
         const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
-        return (h(Host, { key: 'df291b77fd71b6e05fed9d91f7a27c322a507bf8' }, h("dialog", { key: 'cb8c34ccae0e348c0af1c0a7d0ed4a576a7b5841', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '903f4d97cf89835d10e6449ea06e647fae11cda6', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'a1dca2bd9a7c3970e2efd03dfed18b2982676d99', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '7546ed90a2f5b7245981e51a55a27517a02f86ab', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'ff31fb72b3193d6ff928673d906c8b69e9b98652', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: 'e3caee251a4ed708ca3f8dfb09aab24ea8572f0a' })), h("div", { key: 'b45667bbae90cfbc3cd291e32ab7c3970ebe3e06', class: "dialog__controls" }, hasLeftControls && (h("div", { key: '1f8cf4d5ed98df0cffb8552892bf517fb511e935', class: "dialog__left_controls" }, h("slot", { key: '0b3aebefa2a05ea3240311506083df2af2a3e44c', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'dc651e005c7ced14e64663eea32e99311337da81', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd0b0b7a07ed0093fe887d03e4ad1cd64eae4a45e', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: '96dda6293b1d08c47f87f939eacfb089f21f8e85' }, h("dialog", { key: '792f1f6afd587fae84fc52a62449a794e3f03e33', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '2bca81bc4a2e538f7e080a7d77dc648657938659', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f65ff30e4e5b968beb4173e80998a03e1ca39fca', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'e1f6baa4050471e29eec852df3a6e8e71925bd9c', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'd8f4cc8d93de3aad7d45d3699aa49b73ec5efdcb', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '729e24ecc1de0624279a38723a58ccd7e92f119f' })), h("div", { key: '5340b93042e36af091648b0893a4090d124e7f95', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'd7064763e1a2f3cd7e7b64f9c36cb0ccb72c595e', class: "dialog__left_controls" }, h("slot", { key: '52525262d65555376b3dc911265dc35f7c801cdb', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: '9adbe0bf902960014f25adcd8ab203a3e2e3a773', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '842263d779c24ecd30928d040cdaa4600eab3fc6', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get is() { return "swirl-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -180,6 +196,30 @@ export class SwirlDialog {
                 "setter": false,
                 "reflect": false
             },
+            "returnFocusTo": {
+                "type": "string",
+                "attribute": "return-focus-to",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | string",
+                    "resolved": "HTMLElement | string",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "secondaryActionLabel": {
                 "type": "string",
                 "attribute": "secondary-action-label",

package/dist/collection/components/swirl-dialog/swirl-dialog.stories.js

@@ -1,6 +1,12 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-dialog.mdx";
 export default {
+    argTypes: {
+        returnFocusTo: {
+            control: "text",
+            description: "Use when dialog trigger element is unmounted before the dialog is closed.",
+        },
+    },
     component: "swirl-dialog",
     tags: ["autodocs"],
     parameters: {