fix(react): present and dismiss hooks return promises (#24299)

packages/react/src/hooks/useIonActionSheet.ts

@@ -20,12 +20,12 @@ export function useIonActionSheet(): UseIonActionSheetResult {
       header?: string
     ) => {
       if (Array.isArray(buttonsOrOptions)) {
-        controller.present({
+        return controller.present({
           buttons: buttonsOrOptions,
           header,
         });
       } else {
-        controller.present(buttonsOrOptions);
+        return controller.present(buttonsOrOptions);
       }
     },
     [controller.present]
@@ -41,15 +41,15 @@ export type UseIonActionSheetResult = [
      * @param buttons An array of buttons for the action sheet
      * @param header Optional - Title for the action sheet
      */
-    (buttons: ActionSheetButton[], header?: string | undefined): void;
+    (buttons: ActionSheetButton[], header?: string | undefined): Promise<void>;
     /**
      * Presents the action sheet
      * @param options The options to pass to the IonActionSheet
      */
-    (options: ActionSheetOptions & HookOverlayOptions): void;
+    (options: ActionSheetOptions & HookOverlayOptions): Promise<void>;
   },
   /**
    * Dismisses the action sheet
    */
-  () => void
+  () => Promise<void>
 ];

packages/react/src/hooks/useIonAlert.ts

@@ -14,12 +14,12 @@ export function useIonAlert(): UseIonAlertResult {
   const present = useCallback(
     (messageOrOptions: string | (AlertOptions & HookOverlayOptions), buttons?: AlertButton[]) => {
       if (typeof messageOrOptions === 'string') {
-        controller.present({
+        return controller.present({
           message: messageOrOptions,
           buttons: buttons ?? [{ text: 'Ok' }],
         });
       } else {
-        controller.present(messageOrOptions);
+        return controller.present(messageOrOptions);
       }
     },
     [controller.present]
@@ -35,15 +35,15 @@ export type UseIonAlertResult = [
      * @param message The main message to be displayed in the alert
      * @param buttons Optional - Array of buttons to be added to the alert
      */
-    (message: string, buttons?: AlertButton[]): void;
+    (message: string, buttons?: AlertButton[]): Promise<void>;
     /**
      * Presents the alert
      * @param options The options to pass to the IonAlert
      */
-    (options: AlertOptions & HookOverlayOptions): void;
+    (options: AlertOptions & HookOverlayOptions): Promise<void>;
   },
   /**
    * Dismisses the alert
    */
-  () => void
+  () => Promise<void>
 ];

packages/react/src/hooks/useIonLoading.tsx

@@ -21,13 +21,13 @@ export function useIonLoading(): UseIonLoadingResult {
       spinner?: SpinnerTypes
     ) => {
       if (typeof messageOrOptions === 'string') {
-        controller.present({
+        return controller.present({
           message: messageOrOptions,
           duration,
           spinner: spinner ?? 'lines',
         });
       } else {
-        controller.present(messageOrOptions);
+        return controller.present(messageOrOptions);
       }
     },
     [controller.present]
@@ -44,15 +44,15 @@ export type UseIonLoadingResult = [
      * @param duration Optional - Number of milliseconds to wait before dismissing the loading indicator
      * @param spinner Optional - The name of the spinner to display, defaults to "lines"
      */
-    (message?: string, duration?: number, spinner?: SpinnerTypes): void;
+    (message?: string, duration?: number, spinner?: SpinnerTypes): Promise<void>;
     /**
      * Presents the loading indicator
      * @param options The options to pass to the IonLoading
      */
-    (options: LoadingOptions & HookOverlayOptions): void;
+    (options: LoadingOptions & HookOverlayOptions): Promise<void>;
   },
   /**
    * Dismisses the loading indicator
    */
-  () => void
+  () => Promise<void>
 ];

packages/react/src/hooks/useIonPicker.tsx

@@ -19,12 +19,12 @@ export function useIonPicker(): UseIonPickerResult {
     buttons?: PickerButton[]
   ) => {
     if (Array.isArray(columnsOrOptions)) {
-      controller.present({
+      return controller.present({
         columns: columnsOrOptions,
         buttons: buttons ?? [{ text: 'Ok' }],
       });
     } else {
-      controller.present(columnsOrOptions);
+      return controller.present(columnsOrOptions);
     }
   }, [controller.present]);
 
@@ -38,15 +38,15 @@ export type UseIonPickerResult = [
      * @param columns Array of columns to be displayed in the picker.
      * @param buttons Optional - Array of buttons to be displayed at the top of the picker.
      */
-    (columns: PickerColumn[], buttons?: PickerButton[]): void;
+    (columns: PickerColumn[], buttons?: PickerButton[]): Promise<void>;
     /**
      * Presents the picker
      * @param options The options to pass to the IonPicker
      */
-    (options: PickerOptions & HookOverlayOptions): void;
+    (options: PickerOptions & HookOverlayOptions): Promise<void>;
   },
   /**
    * Dismisses the picker
    */
-  () => void
+  () => Promise<void>
 ];

packages/react/src/hooks/useIonToast.ts

@@ -16,12 +16,12 @@ export function useIonToast(): UseIonToastResult {
 
   const present = useCallback((messageOrOptions: string | ToastOptions & HookOverlayOptions, duration?: number) => {
     if (typeof messageOrOptions === 'string') {
-      controller.present({
+      return controller.present({
         message: messageOrOptions,
         duration
       });
     } else {
-      controller.present(messageOrOptions);
+      return controller.present(messageOrOptions);
     }
   }, [controller.present]);
 
@@ -38,15 +38,15 @@ export type UseIonToastResult = [
      * @param message Message to be shown in the toast.
      * @param duration Optional - How many milliseconds to wait before hiding the toast. By default, it will show until dismissToast() is called.
      */
-    (message: string, duration?: number): void;
+    (message: string, duration?: number): Promise<void>;
     /**
      * Presents the Toast
      * @param options The options to pass to the IonToast.
      */
-    (options: ToastOptions & HookOverlayOptions): void;
+    (options: ToastOptions & HookOverlayOptions): Promise<void>;
   },
   /**
    * Dismisses the toast
    */
-  () => void
+  () => Promise<void>
 ];