fix(react): useIonModal/useIonPopover dismiss accepts data and role (#25209)

Resolves #25208

packages/react/src/hooks/useIonModal.ts

@@ -40,5 +40,5 @@ export type UseIonModalResult = [
   /**
    * Dismisses the modal
    */
-  () => void
+  (data?: any, role?: string) => void
 ];

packages/react/src/hooks/useOverlay.ts

@@ -81,8 +81,8 @@ export function useOverlay<OptionsType, OverlayType extends OverlayBase>(
     }
   }, []);
 
-  const dismiss = useCallback(async () => {
-    overlayRef.current && (await overlayRef.current.dismiss());
+  const dismiss = useCallback(async (data?: any, role?: string) => {
+    overlayRef.current && (await overlayRef.current.dismiss(data, role));
     overlayRef.current = undefined;
     containerElRef.current = undefined;
   }, []);

packages/react/test-app/cypress/integration/overlay-hooks/useIonModal.spec.ts

@@ -48,6 +48,18 @@ describe('useIonModal', () => {
     cy.get('ion-modal').should('not.exist');
   });
 
+  it('display modal and dismiss with data and role', () => {
+    //show modal
+    cy.get('ion-button').contains('Show Modal using component param').click();
+
+    //close modal
+    cy.get('ion-button').contains('Close').click();
+    cy.get('ion-modal').should('not.exist');
+
+    //verify role and data on main page was updated
+    cy.contains('Dismissed with role: close');
+    cy.contains('Data: {"test":true}');
+  });
 
   // This test should pass in v6, skipping until merged with v6
   it.skip('display modal with context', () => {

packages/react/test-app/src/pages/overlay-hooks/ModalHook.tsx

@@ -13,7 +13,7 @@ import { useContext } from 'react';
 const Body: React.FC<{
   type: string;
   count: number;
-  onDismiss: () => void;
+  onDismiss: (data?: any, role?: string) => void;
   onIncrement: () => void;
 }> = ({ count, onDismiss, onIncrement, type }) => (
   <IonPage>
@@ -27,7 +27,7 @@ const Body: React.FC<{
       <IonButton expand="block" onClick={() => onIncrement()}>
         Increment Count
       </IonButton>
-      <IonButton expand="block" onClick={() => onDismiss()}>
+      <IonButton expand="block" onClick={() => onDismiss({ test: true }, 'close')}>
         Close
       </IonButton>
     </IonContent>
@@ -42,13 +42,16 @@ const ModalWithContext: React.FC = () => {
 const ModalHook: React.FC = () => {
   const [count, setCount] = useState(0);
 
+  const [dismissedRole, setDismissedRole] = useState<string | undefined>();
+  const [dismissedData, setDismissedData] = useState();
+
   const handleIncrement = useCallback(() => {
     setCount(count + 1);
   }, [count, setCount]);
 
-  const handleDismissWithComponent = useCallback(() => {
-    dismissWithComponent();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleDismissWithComponent = useCallback((data, role) => {
+    dismissWithComponent(data, role);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleDismissWithElement = useCallback(() => {
@@ -89,6 +92,11 @@ const ModalHook: React.FC = () => {
             onClick={() => {
               presentWithComponent({
                 cssClass: 'my-class',
+                onDidDismiss: (ev) => {
+                  const { data, role } = ev.detail;
+                  setDismissedData(data);
+                  setDismissedRole(role);
+                },
               });
             }}
           >
@@ -127,6 +135,8 @@ const ModalHook: React.FC = () => {
           </IonButton>
 
           <div>Count: {count}</div>
+          <div>Dismissed with role: {dismissedRole}</div>
+          <div>Data: {dismissedData && JSON.stringify(dismissedData)}</div>
         </IonContent>
       </IonPage>
     </MyContext.Provider>