@momentum-design/components 0.83.3 → 0.83.5

package/dist/react/dialog/index.d.ts

@@ -10,6 +10,11 @@ import Component from '../../components/dialog';
  * 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)**
@@ -30,6 +35,8 @@ import Component from '../../components/dialog';
  * @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
@@ -53,5 +60,6 @@ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onHidden: EventName<Event>;
     onCreated: EventName<Event>;
     onDestroyed: EventName<Event>;
+    onClose: EventName<Event>;
 }>;
 export default reactWrapper;

package/dist/react/dialog/index.js

@@ -12,6 +12,11 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * 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 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * @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
@@ -59,6 +66,7 @@ const reactWrapper = createComponent({
         onHidden: 'hidden',
         onCreated: 'created',
         onDestroyed: 'destroyed',
+        onClose: 'close',
     },
     displayName: 'Dialog',
 });

package/dist/react/index.d.ts

@@ -6,16 +6,16 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
+export { default as Button } from './button';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
-export { default as Chip } from './chip';
 export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';

package/dist/react/index.js

@@ -6,16 +6,16 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
+export { default as Button } from './button';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
-export { default as Chip } from './chip';
 export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.83.3"
+  "version": "0.83.5"
 }