feat: useOverlay

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

@@ -1,38 +1,42 @@
 import { type FC, useEffect, useRef } from 'react';
+import { type OverlayItemContext } from '../store';
 
-type OverlayControllerProps = {
+type OverlayControllerProps<C extends OverlayItemContext> = {
   overlayId: string;
   isOpen: boolean;
   close: () => void;
   unmount: () => void;
+  context: C;
 };
 
-type OverlayAsyncControllerProps<T> = Omit<OverlayControllerProps, 'close'> & {
+type OverlayAsyncControllerProps<T, C extends OverlayItemContext> = Omit<OverlayControllerProps<C>, 'close'> & {
   close: (param: T) => void;
 };
 
-export type OverlayControllerComponent = FC<OverlayControllerProps>;
-export type OverlayAsyncControllerComponent<T> = FC<OverlayAsyncControllerProps<T>>;
+export type OverlayControllerComponent<C extends OverlayItemContext> = FC<OverlayControllerProps<C>>;
+export type OverlayAsyncControllerComponent<T, C extends OverlayItemContext> = FC<OverlayAsyncControllerProps<T, C>>;
 
-type ContentOverlayControllerProps = {
+type ContentOverlayControllerProps<C extends OverlayItemContext> = {
   isOpen: boolean;
   current: string | null;
   overlayId: string;
   onMounted: () => void;
   onCloseModal: () => void;
   onExitModal: () => void;
-  controller: OverlayControllerComponent;
+  controller: OverlayControllerComponent<C>;
+  context: C;
 };
 
-export function ContentOverlayController({
+export function ContentOverlayController<C extends OverlayItemContext>({
   isOpen,
   current,
   overlayId,
   onMounted,
   onCloseModal,
   onExitModal,
   controller: Controller,
-}: ContentOverlayControllerProps) {
+  context,
+}: ContentOverlayControllerProps<C>) {
   const prevCurrent = useRef(current);
   const onMountedRef = useRef(onMounted);
 
@@ -51,5 +55,7 @@ export function ContentOverlayController({
     onMountedRef.current();
   }, []);
 
-  return <Controller overlayId={overlayId} isOpen={isOpen} close={onCloseModal} unmount={onExitModal} />;
+  return (
+    <Controller overlayId={overlayId} isOpen={isOpen} close={onCloseModal} unmount={onExitModal} context={context} />
+  );
 }

packages/src/context/provider/index.tsx

@@ -35,6 +35,7 @@ export function createOverlayProvider(overlayStore: OverlayStore) {
                   overlayStore.dispatchOverlay({ type: 'OPEN', overlayId: currentOverlayId });
                 });
               }}
+              context={overlayState.overlayData[currentOverlayId].context}
               onCloseModal={() => overlay.close(currentOverlayId)}
               onExitModal={() => overlay.unmount(currentOverlayId)}
               controller={currentController}

packages/src/context/reducer.ts

@@ -1,10 +1,11 @@
-import { type OverlayData, type OverlayItem } from './store';
+import { type OverlayItemContext, type OverlayData, type OverlayItem } from './store';
 
 export type OverlayReducerAction =
-  | { type: 'ADD'; overlay: OverlayItem }
+  | { type: 'ADD'; overlay: OverlayItem<OverlayItemContext> }
   | { type: 'OPEN'; overlayId: string }
   | { type: 'CLOSE'; overlayId: string }
   | { type: 'REMOVE'; overlayId: string }
+  | { type: 'UPDATE_CONTEXT'; overlayId: string; context: OverlayItemContext }
   | { type: 'CLOSE_ALL' }
   | { type: 'REMOVE_ALL' };
 
@@ -147,14 +148,23 @@ export function overlayReducer(state: OverlayData, action: OverlayReducerAction)
             [curr]: {
               ...state.overlayData[curr],
               isOpen: false,
-            } satisfies OverlayItem,
+            } satisfies OverlayItem<OverlayItemContext>,
           }),
-          {} satisfies Record<string, OverlayItem>
+          {} satisfies Record<string, OverlayItem<OverlayItemContext>>
         ),
       };
     }
     case 'REMOVE_ALL': {
       return { current: null, overlayOrderList: [], overlayData: {} };
     }
+    case 'UPDATE_CONTEXT': {
+      return {
+        ...state,
+        overlayData: {
+          ...state.overlayData,
+          [action.overlayId]: { ...state.overlayData[action.overlayId], context: action.context },
+        },
+      };
+    }
   }
 }

packages/src/context/store.ts

@@ -2,15 +2,20 @@ import { type OverlayControllerComponent } from './provider/content-overlay-cont
 import { type OverlayReducerAction, overlayReducer } from './reducer';
 
 type OverlayId = string;
-export type OverlayItem = {
+
+export type OverlayItemContext = Record<string, unknown>;
+
+export type OverlayItem<C extends OverlayItemContext> = {
   id: OverlayId;
   isOpen: boolean;
-  controller: OverlayControllerComponent;
+  controller: OverlayControllerComponent<C>;
+  context: C;
 };
+
 export type OverlayData = {
   current: OverlayId | null;
   overlayOrderList: OverlayId[];
-  overlayData: Record<OverlayId, OverlayItem>;
+  overlayData: Record<OverlayId, OverlayItem<OverlayItemContext>>;
 };
 
 export type OverlayStore = ReturnType<typeof createRegisterOverlaysStore>;

packages/src/event.ts

@@ -2,30 +2,39 @@ import {
   type OverlayAsyncControllerComponent,
   type OverlayControllerComponent,
 } from './context/provider/content-overlay-controller';
-import { type OverlayStore } from './context/store';
+import { type OverlayItemContext, type OverlayStore } from './context/store';
 import { randomId } from './utils/random-id';
 
-type OpenOverlayOptions = {
+type OpenOverlayOptions<C extends OverlayItemContext> = {
   overlayId?: string;
+  context?: C;
 };
 
 export function createOverlay(overlayStore: OverlayStore) {
-  function open(controller: OverlayControllerComponent, options?: OpenOverlayOptions) {
+  function open<C extends OverlayItemContext>(
+    controller: OverlayControllerComponent<C>,
+    options?: OpenOverlayOptions<C>
+  ) {
     const overlayId = options?.overlayId ?? randomId();
+    const context = options?.context;
 
     overlayStore.dispatchOverlay({
       type: 'ADD',
       overlay: {
         id: overlayId,
         isOpen: false,
-        controller: controller,
+        controller: controller as OverlayControllerComponent<OverlayItemContext>,
+        context: context ?? ({} as C),
       },
     });
 
     return overlayId;
   }
 
-  async function openAsync<T>(controller: OverlayAsyncControllerComponent<T>, options?: OpenOverlayOptions) {
+  async function openAsync<T, C extends OverlayItemContext>(
+    controller: OverlayAsyncControllerComponent<T, C>,
+    options?: OpenOverlayOptions<C>
+  ) {
     return new Promise<T>((resolve) => {
       open((overlayProps, ...deprecatedLegacyContext) => {
         /**
@@ -56,6 +65,9 @@ export function createOverlay(overlayStore: OverlayStore) {
   function unmountAll() {
     overlayStore.dispatchOverlay({ type: 'REMOVE_ALL' });
   }
+  function updateContext<C extends OverlayItemContext>(overlayId: string, context: C) {
+    overlayStore.dispatchOverlay({ type: 'UPDATE_CONTEXT', overlayId, context });
+  }
 
   return {
     open,
@@ -64,5 +76,6 @@ export function createOverlay(overlayStore: OverlayStore) {
     closeAll,
     unmountAll,
     openAsync,
+    updateContext,
   };
 }

packages/src/hook/use-overlay.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import {
+  type OverlayAsyncControllerComponent,
+  type OverlayControllerComponent,
+} from '../context/provider/content-overlay-controller';
+import { type OverlayItemContext } from '../context/store';
+import { overlay } from '../utils';
+import { randomId } from '../utils/random-id';
+
+export interface UseOverlayProps<C extends OverlayItemContext> {
+  context?: C;
+  overlayId?: string;
+}
+
+export function useOverlay<C extends OverlayItemContext>({ context, overlayId }: UseOverlayProps<C>) {
+  const [id] = useState(() => overlayId ?? randomId());
+
+  useEffect(() => {
+    overlay.updateContext(id, context ?? ({} as C));
+  }, [context, id]);
+
+  return {
+    open: (controller: OverlayControllerComponent<C>) => overlay.open(controller, { overlayId: id, context }),
+    openAsync: <T>(controller: OverlayAsyncControllerComponent<T, C>) =>
+      overlay.openAsync(controller, { overlayId: id, context }),
+    close: () => overlay.close(id),
+    unmount: () => overlay.unmount(id),
+  };
+}

packages/src/index.ts

@@ -1 +1,2 @@
 export * from './utils';
+export * from './hook/use-overlay';