@momentum-design/components 0.129.5 → 0.129.7

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

@@ -181,6 +181,15 @@ declare class Dialog extends Dialog_base {
      * @default true
      */
     focusTrap: boolean;
+    /**
+     * Determines whether a backdrop should be displayed behind the dialog.
+     * By default, a backdrop is present and it will cover the rest of the page and prevent interaction
+     * with other elements while the dialog is open.
+     * When this attribute is set to true, no backdrop will be created.
+     *
+     * @default false
+     */
+    hideBackdrop: boolean;
     /**
      * 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.

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

@@ -186,6 +186,15 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          * @default true
          */
         this.focusTrap = DEFAULTS.FOCUS_TRAP;
+        /**
+         * Determines whether a backdrop should be displayed behind the dialog.
+         * By default, a backdrop is present and it will cover the rest of the page and prevent interaction
+         * with other elements while the dialog is open.
+         * When this attribute is set to true, no backdrop will be created.
+         *
+         * @default false
+         */
+        this.hideBackdrop = DEFAULTS.HIDE_BACKDROP;
         /**
          * 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.
@@ -358,9 +367,12 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
         if (newValue && !oldValue) {
             // Store the currently focused element before opening the dialog
             this.lastActiveElement = document.activeElement;
-            // remove any existing backdrop and create a new one
-            this.removeBackdrop();
-            this.createBackdrop('dialog');
+            // create backdrop if enabled
+            if (!this.hideBackdrop) {
+                // remove any existing backdrop and create a new one
+                this.removeBackdrop();
+                this.createBackdrop('dialog');
+            }
             this.activatePreventScroll();
             await this.updateComplete;
             if (this.focusTrap) {
@@ -372,6 +384,8 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             DialogEventManager.onShowDialog(this);
         }
         else if (!newValue && oldValue) {
+            // Always remove backdrop if it exists, regardless of current hideBackdrop value
+            // This handles the case where hideBackdrop was changed while dialog was open
             this.removeBackdrop();
             // Set aria-expanded attribute on the trigger element to false if it exists
             (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-expanded', 'false');
@@ -526,4 +540,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),
     __metadata("design:type", Boolean)
 ], Dialog.prototype, "focusTrap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-backdrop' }),
+    __metadata("design:type", Boolean)
+], Dialog.prototype, "hideBackdrop", void 0);
 export default Dialog;

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

@@ -15,6 +15,7 @@ declare const DEFAULTS: {
     readonly VARIANT: "default";
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly FOCUS_TRAP: true;
+    readonly HIDE_BACKDROP: false;
 };
 declare const DIALOG_SIZE: readonly ["small", "medium", "large", "xlarge", "fullscreen"];
 declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];

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

@@ -15,6 +15,7 @@ const DEFAULTS = {
     VARIANT: DIALOG_VARIANT.DEFAULT,
     DISABLE_ARIA_HAS_POPUP: false,
     FOCUS_TRAP: true,
+    HIDE_BACKDROP: false,
 };
 const DIALOG_SIZE = ['small', 'medium', 'large', 'xlarge', 'fullscreen'];
 const DIALOG_ROLE = ['dialog', 'alertdialog'];