feat: enhance overlay async controller with reject handler (#199)

* feat: enhance overlay async controller with reject handler

* test: add tests for reject handling in overlay.openAsync

* Create loud-houses-hear.md

---------

Co-authored-by: Yongbeen Im <[email protected]>
Co-authored-by: Yongbeen Im <[email protected]>

Author: ojj1123

.changeset/loud-houses-hear.md

@@ -0,0 +1,5 @@
+---
+"overlay-kit": minor
+---
+
+feat: enhance overlay async controller with reject handler

packages/src/context/provider/content-overlay-controller.tsx

@@ -1,15 +1,16 @@
 import { type FC, type ActionDispatch, memo, useEffect } from 'react';
 import { type OverlayReducerAction } from '../reducer';
 
-type OverlayControllerProps = {
+export type OverlayControllerProps = {
   overlayId: string;
   isOpen: boolean;
   close: () => void;
   unmount: () => void;
 };
 
-type OverlayAsyncControllerProps<T> = Omit<OverlayControllerProps, 'close'> & {
+export type OverlayAsyncControllerProps<T> = Omit<OverlayControllerProps, 'close'> & {
   close: (param: T) => void;
+  reject: (reason?: unknown) => void;
 };
 
 export type OverlayControllerComponent = FC<OverlayControllerProps>;

packages/src/event.test.tsx

@@ -134,6 +134,71 @@ describe('overlay object', () => {
     });
   });
 
+  it('The reason passed as an argument to reject is passed to reject. overlay.openAsync', async () => {
+    const overlayDialogContent = 'context-modal-dialog-content';
+    const overlayTriggerContent = 'context-modal-overlay-trigger-content';
+    const rejectedReason = 'rejected';
+    const mockFn = vi.fn();
+
+    function Component() {
+      return (
+        <button
+          onClick={async () => {
+            try {
+              await overlay.openAsync<boolean>(
+                ({ isOpen, reject }) =>
+                  isOpen && <button onClick={() => reject(rejectedReason)}>{overlayDialogContent}</button>
+              );
+            } catch (error) {
+              mockFn(error);
+            }
+          }}
+        >
+          {overlayTriggerContent}
+        </button>
+      );
+    }
+
+    const { user } = renderWithUser(<Component />);
+    await user.click(await screen.findByRole('button', { name: overlayTriggerContent }));
+    await user.click(await screen.findByRole('button', { name: overlayDialogContent }));
+
+    await waitFor(() => {
+      expect(mockFn).toHaveBeenCalledWith(rejectedReason);
+    });
+  });
+
+  it('should be able to turn off overlay through reject overlay.openAsync', async () => {
+    const overlayTriggerContent = 'context-modal-test-content';
+    const overlayDialogContent = 'context-modal-dialog-content';
+
+    function Component() {
+      return (
+        <button
+          onClick={async () => {
+            try {
+              await overlay.openAsync<boolean>(
+                ({ isOpen, reject }) =>
+                  isOpen && <button onClick={() => reject('rejected')}>{overlayDialogContent}</button>
+              );
+            } catch (error) {
+              //
+            }
+          }}
+        >
+          {overlayTriggerContent}
+        </button>
+      );
+    }
+
+    const { user } = renderWithUser(<Component />, { wrapper });
+    await user.click(await screen.findByRole('button', { name: overlayTriggerContent }));
+    await user.click(await screen.findByRole('button', { name: overlayDialogContent }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: overlayDialogContent })).not.toBeInTheDocument();
+    });
+  });
   it('should handle current overlay correctly when unmounting overlays in different orders', async () => {
     const contents = {
       first: 'overlay-content-1',

packages/src/event.ts

@@ -1,4 +1,5 @@
 import {
+  type OverlayAsyncControllerProps,
   type OverlayAsyncControllerComponent,
   type OverlayControllerComponent,
 } from './context/provider/content-overlay-controller';
@@ -30,19 +31,28 @@ export function createOverlay(overlayId: string) {
   };
 
   const openAsync = async <T>(controller: OverlayAsyncControllerComponent<T>, options?: OpenOverlayOptions) => {
-    return new Promise<T>((resolve) => {
+    return new Promise<T>((_resolve, _reject) => {
       open((overlayProps, ...deprecatedLegacyContext) => {
         /**
          * @description close the overlay with resolve
          */
         const close = (param: T) => {
-          resolve(param);
+          _resolve(param);
           overlayProps.close();
         };
+
+        /**
+         * @description close the overlay with reject
+         */
+        const reject = (reason?: unknown) => {
+          _reject(reason);
+          overlayProps.close();
+        };
+
         /**
          * @description Passing overridden methods
          */
-        const props = { ...overlayProps, close };
+        const props: OverlayAsyncControllerProps<T> = { ...overlayProps, close, reject };
         return controller(props, ...deprecatedLegacyContext);
       }, options);
     });