@momentum-design/components 0.83.3 → 0.83.4

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

@@ -12,6 +12,11 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * 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.
  *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
  * Dialog component have 2 variants: default and promotional.
  *
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
@@ -32,6 +37,8 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
  * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
  * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
  *
  * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
  * @cssproperty --mdc-dialog-border-color - border color of the dialog
@@ -63,6 +70,8 @@ declare class Dialog extends Dialog_base {
     triggerId?: string;
     /**
      * The visibility of the dialog
+     *
+     * Dialog is a controlled component, visible is the only property that controls the visibility of the dialog.
      * @default false
      */
     visible: boolean;
@@ -176,6 +185,12 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     private createBackdrop;
+    /**
+     * Fired when Close Button is clicked or Escape key is pressed.
+     * This method dispatches the close event. Setting visible to false
+     * has to be done by the consumer of the component.
+     */
+    private closeDialog;
     /**
      * Handles the escape keydown event to close the dialog.
      * @internal
@@ -197,16 +212,6 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     private focusBackToTrigger;
-    /**
-     * Hides the dialog.
-     * @internal
-     */
-    hideDialog: () => void;
-    /**
-     * Shows the dialog.
-     * @internal
-     */
-    showDialog: () => void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -29,6 +29,11 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * 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.
  *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
  * Dialog component have 2 variants: default and promotional.
  *
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
@@ -49,6 +54,8 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
  * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
  * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
  *
  * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
  * @cssproperty --mdc-dialog-border-color - border color of the dialog
@@ -76,6 +83,8 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.id = '';
         /**
          * The visibility of the dialog
+         *
+         * Dialog is a controlled component, visible is the only property that controls the visibility of the dialog.
          * @default false
          */
         this.visible = DEFAULTS.VISIBLE;
@@ -167,21 +176,7 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
             // Prevent the event from propagating to the document level
             // pressing escape on a dialog should only close the dialog, nothing else
             event.stopPropagation();
-            this.hideDialog();
-        };
-        /**
-         * Hides the dialog.
-         * @internal
-         */
-        this.hideDialog = () => {
-            this.visible = false;
-        };
-        /**
-         * Shows the dialog.
-         * @internal
-         */
-        this.showDialog = () => {
-            this.visible = true;
+            this.closeDialog();
         };
     }
     connectedCallback() {
@@ -307,6 +302,14 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
         this.backdropElement = backdrop;
     }
+    /**
+     * Fired when Close Button is clicked or Escape key is pressed.
+     * This method dispatches the close event. Setting visible to false
+     * has to be done by the consumer of the component.
+     */
+    closeDialog() {
+        DialogEventManager.onCloseDialog(this, false);
+    }
     /**
      * Handles the dialog visibility change.
      * Handles the exit event to close the dialog.
@@ -390,7 +393,7 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         variant="${BUTTON_VARIANTS.TERTIARY}"
         size="${ICON_BUTTON_SIZES[20]}"
         aria-label="${ifDefined(this.closeButtonAriaLabel) || ''}"
-        @click="${this.hideDialog}"
+        @click="${this.closeDialog}"
       ></mdc-button>
       <div part="body">
         <slot name="dialog-body"></slot>

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

@@ -6,7 +6,7 @@ export declare class DialogEventManager {
      * @param eventName - The name of the event.
      * @param instance - The dialog instance.
      */
-    static dispatchDialogEvent(eventName: string, instance: Dialog): void;
+    static dispatchDialogEvent(eventName: string, instance: Dialog, bubbles?: boolean): void;
     /**
      * Custom event that is fired when the dialog is shown.
      *
@@ -19,6 +19,14 @@ export declare class DialogEventManager {
      * @param instance - The dialog instance.
      */
     static onHideDialog(instance: Dialog): void;
+    /**
+     * Custom event that is fired when the dialog is closed.
+     * This gets fired when the Close Button is clicked or
+     * when Escape key is pressed.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onCloseDialog(instance: Dialog, bubbles?: boolean): void;
     /**
      * Custom event that is fired when the dialog is created.
      *

package/dist/components/dialog/dialog.events.js

@@ -5,11 +5,11 @@ export class DialogEventManager {
      * @param eventName - The name of the event.
      * @param instance - The dialog instance.
      */
-    static dispatchDialogEvent(eventName, instance) {
+    static dispatchDialogEvent(eventName, instance, bubbles = true) {
         instance.dispatchEvent(new CustomEvent(eventName, {
             detail: { show: instance.visible },
             composed: true,
-            bubbles: true,
+            bubbles,
         }));
     }
     /**
@@ -28,6 +28,16 @@ export class DialogEventManager {
     static onHideDialog(instance) {
         this.dispatchDialogEvent('hidden', instance);
     }
+    /**
+     * Custom event that is fired when the dialog is closed.
+     * This gets fired when the Close Button is clicked or
+     * when Escape key is pressed.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onCloseDialog(instance, bubbles = true) {
+        this.dispatchDialogEvent('close', instance, bubbles);
+    }
     /**
      * Custom event that is fired when the dialog is created.
      *

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

@@ -8,5 +8,6 @@ interface Events {
     onHiddenEvent: Event;
     onCreatedEvent: Event;
     onDestroyedEvent: Event;
+    onCloseEvent: Event;
 }
 export type { DialogSize, DialogRole, DialogVariant, Events };