@momentum-design/components 0.84.4 → 0.85.0

package/dist/components/dialog/dialog.component.d.ts

@@ -142,8 +142,13 @@ declare class Dialog extends Dialog_base {
      */
     disableAriaHasPopup: boolean;
     /**
-     * For now FocusTrap is always true as the dialog is a modal component only.
-     * This means it will always trap focus within the dialog when it is open.
+     * Determines whether the focus trap is enabled.
+     * If true, focus will be restricted to the content within this component.
+     *
+     * NOTE: this should only be disabled in rare cases! By default a Modal Dialog
+     * should trap focus always.
+     *
+     * @default true
      */
     focusTrap: boolean;
     /**

package/dist/components/dialog/dialog.component.js

@@ -147,10 +147,15 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
          */
         this.disableAriaHasPopup = DEFAULTS.DISABLE_ARIA_HAS_POPUP;
         /**
-         * For now FocusTrap is always true as the dialog is a modal component only.
-         * This means it will always trap focus within the dialog when it is open.
+         * Determines whether the focus trap is enabled.
+         * If true, focus will be restricted to the content within this component.
+         *
+         * NOTE: this should only be disabled in rare cases! By default a Modal Dialog
+         * should trap focus always.
+         *
+         * @default true
          */
-        this.focusTrap = true;
+        this.focusTrap = DEFAULTS.FOCUS_TRAP;
         /**
          * For now preventScroll is always true as the dialog is a modal component only.
          * This means scroll will be prevented when the dialog is open.
@@ -328,7 +333,9 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
             this.createBackdrop();
             this.activatePreventScroll();
             await this.updateComplete;
-            (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
+            if (this.focusTrap) {
+                (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
             // Set aria-expanded attribute on the trigger element to true if it exists
             (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'true');
@@ -470,4 +477,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-haspopup' }),
     __metadata("design:type", Boolean)
 ], Dialog.prototype, "disableAriaHasPopup", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),
+    __metadata("design:type", Boolean)
+], Dialog.prototype, "focusTrap", void 0);
 export default Dialog;

package/dist/components/dialog/dialog.constants.d.ts

@@ -13,6 +13,7 @@ declare const DEFAULTS: {
     readonly CANCEL_ICON: "cancel-bold";
     readonly VARIANT: "default";
     readonly DISABLE_ARIA_HAS_POPUP: false;
+    readonly FOCUS_TRAP: true;
 };
 declare const DIALOG_SIZE: readonly ["small", "medium", "large"];
 declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];

package/dist/components/dialog/dialog.constants.js

@@ -14,6 +14,7 @@ const DEFAULTS = {
     CANCEL_ICON: 'cancel-bold',
     VARIANT: DIALOG_VARIANT.DEFAULT,
     DISABLE_ARIA_HAS_POPUP: false,
+    FOCUS_TRAP: true,
 };
 const DIALOG_SIZE = ['small', 'medium', 'large'];
 const DIALOG_ROLE = ['dialog', 'alertdialog'];