@momentum-design/components 0.75.2 → 0.75.4

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

@@ -8,6 +8,10 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
+ * The dialog can be controlled solely through the `visible` property, no trigger element is required.
+ * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
+ * remember the previously focused element before the dialog was opened.
+ *
  * Dialog component have 2 variants: default and promotional.
  *
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
@@ -36,6 +40,7 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
  *
+ * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
  * @slot dialog-body - Slot for the dialog body content
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
@@ -109,6 +114,8 @@ declare class Dialog extends Dialog_base {
     private utils;
     /** @internal */
     backdropElement: HTMLElement | null;
+    /** @internal */
+    private lastActiveElement;
     constructor();
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     disconnectedCallback(): Promise<void>;
@@ -140,6 +147,11 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     hideDialog: () => void;
+    /**
+     * Shows the dialog.
+     * @internal
+     */
+    showDialog: () => void;
     /**
      * Sets the focusable elements inside the dialog.
      */

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

@@ -25,6 +25,10 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
+ * The dialog can be controlled solely through the `visible` property, no trigger element is required.
+ * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
+ * remember the previously focused element before the dialog was opened.
+ *
  * Dialog component have 2 variants: default and promotional.
  *
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
@@ -53,6 +57,7 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
  *
+ * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
  * @slot dialog-body - Slot for the dialog body content
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
@@ -126,6 +131,8 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         this.triggerElement = null;
         /** @internal */
         this.backdropElement = null;
+        /** @internal */
+        this.lastActiveElement = null;
         /**
          * Handles the escape keydown event to close the dialog.
          * @internal
@@ -145,6 +152,13 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         this.hideDialog = () => {
             this.visible = false;
         };
+        /**
+         * Shows the dialog.
+         * @internal
+         */
+        this.showDialog = () => {
+            this.visible = true;
+        };
         /** @internal */
         this.utils = new DialogUtils(this);
         document.addEventListener('keydown', this.onEscapeKeydown);
@@ -169,8 +183,10 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
      * Sets up the trigger listener for focus trap
      */
     setupTriggerListener() {
-        if (!this.triggerId)
+        if (!this.triggerId) {
+            this.addEventListener('focus-trap-exit', this.hideDialog);
             return;
+        }
         this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerId}"]`);
         if (!this.triggerElement)
             return;
@@ -180,8 +196,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
      * Removes the trigger event listener
      */
     removeEventListeners() {
-        if (!this.triggerElement)
-            return;
         this.removeEventListener('focus-trap-exit', this.hideDialog);
     }
     async updated(changedProperties) {
@@ -209,26 +223,38 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c;
-        if (oldValue === newValue || !this.triggerElement) {
+        var _a, _b;
+        if (oldValue === newValue) {
             return;
         }
-        if (newValue) {
+        if (newValue && !oldValue) {
+            // Store the currently focused element before opening the dialog
+            this.lastActiveElement = document.activeElement;
             this.enabledFocusTrap = true;
             this.enabledPreventScroll = true;
             this.utils.createBackdrop();
             await this.handleCreateDialogFirstUpdate();
-            this.triggerElement.setAttribute('aria-expanded', 'true');
-            this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
+            // If we have a trigger element, update its attributes
+            if (this.triggerElement) {
+                this.triggerElement.setAttribute('aria-expanded', 'true');
+                this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
+            }
             DialogEventManager.onShowDialog(this);
         }
-        else {
+        else if (!newValue && oldValue) {
             (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
             this.backdropElement = null;
             (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
-            this.triggerElement.removeAttribute('aria-expanded');
-            this.triggerElement.removeAttribute('aria-haspopup');
-            (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.focus();
+            // If we have a trigger element, restore focus to it
+            if (this.triggerElement) {
+                this.triggerElement.removeAttribute('aria-expanded');
+                this.triggerElement.removeAttribute('aria-haspopup');
+                this.triggerElement.focus();
+            }
+            else if (this.lastActiveElement && this.lastActiveElement.focus) {
+                // Otherwise restore focus to the last active element
+                this.lastActiveElement.focus();
+            }
             DialogEventManager.onHideDialog(this);
         }
     }
@@ -248,14 +274,17 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         return html `
       ${this.headerText
             ? html `
-      <div part="header">
-        <mdc-text
-          part="header-text"
-          tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
-          type="${TYPE.BODY_LARGE_BOLD}"  
-        >
-          ${this.headerText}
-        </mdc-text>
+      <div part="header-section">
+        <div part="header">
+          <slot name="header-prefix"></slot>
+          <mdc-text
+            part="header-text"
+            tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
+            type="${TYPE.BODY_LARGE_BOLD}"  
+          >
+            ${this.headerText}
+          </mdc-text>
+        </div>
         <mdc-text
           part="description-text"
           tagname="${VALID_TEXT_TAGS[this.descriptionTagName.toUpperCase()]}"

package/dist/components/dialog/dialog.styles.js

@@ -47,19 +47,25 @@ const styles = css `
     max-width: 100%;
   }
     
-  :host::part(header),
+  :host::part(header-section),
   :host::part(body),
   :host::part(footer) {
     display: flex;
     align-self: stretch;
   }
 
-  :host::part(header) {
+  :host::part(header-section) {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.5rem;
   }
 
+  :host::part(header) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
   :host::part(header-text) {
     width: 23.625rem;
     color: var(--mdc-dialog-header-text-color);