refactor(MessageBox): refactor onClose event (#5989)

BREAKING CHANGE: `onClose` is now a plain callback and not a
`CustomEvent` event anymore. It now receives two params: `action` &
`escPressed`.

Author: Lukas742

docs/MigrationGuide.mdx

@@ -249,6 +249,35 @@ function MyComponent() {
 }
 ```
 
+### MessageBox
+
+- `onClose` is now a plain callback function and no `CustomEvent` anymore. It receives two parameters, `action` and `escPressed`.
+
+```jsx
+// v1
+// onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void;
+
+<MessageBox
+  onClose={(event) => {
+    console.log(event.detail.action);
+  }}
+>
+  {children}
+</MessageBox>
+
+// v2
+// onClose?: (action: MessageBoxActionType | undefined, escPressed?: true) => void;
+
+<MessageBox
+  onClose={(action, escPressed) => {
+    console.log(action, escPressed);
+  }}
+>
+  {children}
+</MessageBox>
+
+```
+
 ### ObjectPage
 
 The newly introduced `DynamicPage` web component comes with its own `DynamicPageHeader` and `DynamicPageTitle` components, which are unfortunately incompatible with our `ObjectPage` implementation.

packages/main/src/components/MessageBox/MessageBox.cy.tsx

@@ -19,14 +19,7 @@ describe('MessageBox', () => {
         </MessageBox>
       );
       cy.findByText(buttonText).click();
-      cy.wrap(callback).should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: buttonText
-          }
-        })
-      );
+      cy.wrap(callback).should('have.been.calledWith', Cypress.sinon.match(buttonText));
     });
   });
 
@@ -46,9 +39,9 @@ describe('MessageBox', () => {
           </Button>
           <MessageBox
             open={open}
-            onClose={(e) => {
-              callback(e);
-              setType(e.type);
+            onClose={(action, escPressed) => {
+              callback(action, escPressed);
+              setType(escPressed ? 'before-close' : 'click');
               setOpen(false);
             }}
           >
@@ -64,12 +57,6 @@ describe('MessageBox', () => {
     cy.findByText('Open').click();
     cy.findByText('OK').click();
     cy.get('@close').should('have.been.calledOnce');
-    cy.wrap(callback).should(
-      'have.been.calledWith',
-      Cypress.sinon.match({
-        type: 'click'
-      })
-    );
     cy.findByTestId('eventType').should('have.text', 'click');
 
     cy.findByText('Open').click();
@@ -105,14 +92,7 @@ describe('MessageBox', () => {
     cy.findByText('Custom').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledOnce')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: `1: custom action`
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match('1: custom action'));
     cy.get('@onButtonClick').should('have.been.calledOnce');
   });
 
@@ -127,14 +107,7 @@ describe('MessageBox', () => {
     cy.findByText('Cancel').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledOnce')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: MessageBoxAction.Cancel
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match(MessageBoxAction.Cancel));
   });
 
   it('Show', () => {
@@ -148,26 +121,12 @@ describe('MessageBox', () => {
     cy.findByText('Yes').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledOnce')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: MessageBoxAction.Yes
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match(MessageBoxAction.Yes));
 
     cy.findByText('No').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledTwice')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: MessageBoxAction.No
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match(MessageBoxAction.No));
   });
 
   it('Success w/ custom title', () => {
@@ -187,14 +146,7 @@ describe('MessageBox', () => {
     cy.findByText('OK').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledOnce')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: MessageBoxAction.OK
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match(MessageBoxAction.OK));
   });
 
   it('No Title', () => {
@@ -224,25 +176,11 @@ describe('MessageBox', () => {
     cy.findByText(MessageBoxAction.OK).should('be.visible').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledOnce')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: MessageBoxAction.OK
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match(MessageBoxAction.OK));
     cy.findByText('My Custom Action').should('be.visible').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledTwice')
-      .should(
-        'have.been.calledWith',
-        Cypress.sinon.match({
-          detail: {
-            action: 'My Custom Action'
-          }
-        })
-      );
+      .should('have.been.calledWith', Cypress.sinon.match('My Custom Action'));
   });
 
   it("Don't crash on unknown type", () => {

packages/main/src/components/MessageBox/index.tsx

@@ -6,7 +6,7 @@ import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRo
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import iconSysHelp from '@ui5/webcomponents-icons/dist/sys-help-2.js';
-import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 import { cloneElement, forwardRef, isValidElement } from 'react';
@@ -27,8 +27,7 @@ import {
   WARNING,
   YES
 } from '../../i18n/i18n-defaults.js';
-import type { Ui5CustomEvent } from '../../types/index.js';
-import type { ButtonDomRef, ButtonPropTypes, DialogDomRef, DialogPropTypes } from '../../webComponents/index.js';
+import type { ButtonPropTypes, DialogDomRef, DialogPropTypes } from '../../webComponents/index.js';
 import { Button, Dialog, Icon, Title } from '../../webComponents/index.js';
 import { Text } from '../Text/index.js';
 import { classNames, styleData } from './MessageBox.module.css.js';
@@ -90,17 +89,10 @@ export interface MessageBoxPropTypes
    */
   initialFocus?: MessageBoxActionType;
   /**
-   * Callback to be executed when the `MessageBox` is closed (either by pressing on one of the `actions` or by pressing the `ESC` key).
-   * `event.detail.action` contains the pressed action button.
-   *
-   * __Note:__ The target of the event differs according to how the user closed the dialog.
+   * Callback to be executed when the `MessageBox` is closed (either by pressing on one of the `actions` or by pressing the Escape key).
+   * `action` is the pressed action button, it's `undefined` when closed via ESC.
    */
-  onClose?: (
-    //todo adjust this once enrichEventWithDetails forwards the native `detail`
-    event:
-      | Ui5CustomEvent<DialogDomRef, { action: undefined }>
-      | (MouseEvent & ButtonDomRef & { detail: { action: MessageBoxActionType } })
-  ) => void;
+  onClose?: (action: MessageBoxActionType | undefined, escPressed?: true) => void;
 }
 
 const getIcon = (icon, type, classes) => {
@@ -201,14 +193,13 @@ const MessageBox = forwardRef<DialogDomRef, MessageBoxPropTypes>((props, ref) =>
       props.onBeforeClose(e);
     }
     if (e.detail.escPressed) {
-      // @ts-expect-error: todo check type
-      onClose(enrichEventWithDetails(e, { action: undefined }));
+      onClose(undefined, e.detail.escPressed);
     }
   };
 
   const handleOnClose: ButtonPropTypes['onClick'] = (e) => {
     const { action } = e.currentTarget.dataset;
-    onClose(enrichEventWithDetails(e, { action }));
+    onClose(action);
   };
 
   const messageBoxId = useIsomorphicId();