Modal props are now directly in the props instead of data, types are now more restrictive when using the component

Author: AlexDemzz

src/context.tsx

@@ -1,8 +1,7 @@
-"use client";
-import { createContext, ReactNode, useContext, ReactElement } from "react";
+import { createContext, useContext } from "react";
+import { ModalItemProvider } from "./item-context";
 import { ModalManager, ModalProviderProps } from "./types";
 import { useModalManager } from "./use-modal-manager";
-import { ModalItemProvider } from "./item-context";
 
 const ModalContext = createContext<ModalManager | null>(null);
 
@@ -39,7 +38,7 @@ function Modals({
             modal(modalInstance, modalManager)
           ) : (
             <modalInstance.component
-              data={modalInstance.data}
+              {...modalInstance.props}
               close={modalInstance.close}
               isOpen={modalInstance.isOpen}
               id={modalInstance.id}

src/index.ts

@@ -1,4 +1,4 @@
 export { ModalProvider, useModals } from "./context";
-export { useModalManager } from "./use-modal-manager";
 export { useBeforeClose } from "./item-context";
 export type { ModalProps } from "./types";
+export { useModalManager } from "./use-modal-manager";

src/item-context.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext, useEffect } from "react";
 import { ModalInstance } from "./types";
 

src/types.ts

@@ -12,31 +12,44 @@ export interface ModalProviderProps {
   modal?: (modal: ModalInstance, modals: ModalManager) => ReactElement;
 }
 
-export interface ModalProps<ReturnValue = any> extends Record<string, any> {
+export interface ModalProps<ReturnValue = any> {
   index: number;
   id: string;
   isOpen: boolean;
   close: (value?: ReturnValue) => void;
 }
 
-export interface ModalInstance<ReturnValue = any> {
-  component: ComponentType<any>;
+// Type commun pour les composants modaux
+export type ModalComponent<T = any, ReturnValue = any> = ComponentType<
+  ModalProps<ReturnValue> & T
+>;
+
+export interface ModalInstance<T = any, ReturnValue = any> {
+  component: ModalComponent<T, ReturnValue>;
   id: string;
-  data?: any;
+  props?: Omit<T, keyof ModalProps<ReturnValue>>;
   isOpen: boolean;
   close: (value?: ReturnValue) => void;
   index: number;
   onBeforeClose: (callback: () => boolean) => void;
 }
 
 export interface ModalManager {
-  open: <T = any, R = any>(
-    component:
-      | ComponentType<T>
-      | (() => Promise<{ default: ComponentType<T> }>),
-    data?: any,
-    options?: ModalOptions
-  ) => Promise<R>;
+  open: {
+    <T extends Record<string, never>, R = any>(
+      component:
+        | ModalComponent<T, R>
+        | (() => Promise<{ default: ModalComponent<T, R> }>),
+      options?: ModalOptions
+    ): Promise<R>;
+    <T, R = any>(
+      component:
+        | ModalComponent<T, R>
+        | (() => Promise<{ default: ModalComponent<T, R> }>),
+      props: Omit<T, keyof ModalProps<R>>,
+      options?: ModalOptions
+    ): Promise<R>;
+  };
   close: (n?: number) => boolean;
   closeById: (id: string) => boolean;
   closeAll: () => boolean;

src/use-modal-manager.ts

@@ -1,9 +1,11 @@
-import { useState, useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import {
-  ModalManager,
+  ModalAction,
+  ModalComponent,
   ModalInstance,
+  ModalManager,
   ModalOptions,
-  ModalAction,
+  ModalProps,
 } from "./types";
 
 export function useModalManager(): ModalManager {
@@ -75,15 +77,15 @@ export function useModalManager(): ModalManager {
   const open = useCallback(
     <T = any, R = any>(
       component:
-        | React.ComponentType<T>
-        | (() => Promise<{ default: React.ComponentType<T> }>),
-      data?: any,
+        | ModalComponent<T, R>
+        | (() => Promise<{ default: ModalComponent<T, R> }>),
+      props?: Omit<T, keyof ModalProps<R>>,
       options?: ModalOptions
     ): Promise<R> => {
       const id = options?.id || generateId();
 
       return new Promise<R>(async (resolve) => {
-        let actualComponent: React.ComponentType<T>;
+        let actualComponent: ModalComponent<T, R>;
 
         const isLazyImport =
           typeof component === "function" && !component.prototype;
@@ -92,7 +94,7 @@ export function useModalManager(): ModalManager {
           setIsLoading(true);
           try {
             const module = await (
-              component as () => Promise<{ default: React.ComponentType<T> }>
+              component as () => Promise<{ default: ModalComponent<T, R> }>
             )();
             actualComponent = module.default;
           } catch (error) {
@@ -101,29 +103,26 @@ export function useModalManager(): ModalManager {
           }
           setIsLoading(false);
         } else {
-          actualComponent = component as React.ComponentType<T>;
+          actualComponent = component as ModalComponent<T, R>;
         }
 
-        const newModalInstance: ModalInstance = {
+        const newModalInstance: ModalInstance<T, R> = {
           component: actualComponent,
           id,
           isOpen: false,
           onBeforeClose: (callback: () => boolean) => {
             beforeCloseCallbacks.current.set(id, callback);
           },
-          close: (value) => {
+          close: (value?: R) => {
             if (canClose(id)) {
-              resolve(value);
+              resolve(value as R);
               closeCurrent(id);
             }
           },
+          props,
           index: 0,
         };
 
-        if (data) {
-          newModalInstance.data = data;
-        }
-
         setStack((prev) => {
           const existingModal = prev.find((modal) => modal.id === id);
           if (existingModal) {
@@ -151,6 +150,11 @@ export function useModalManager(): ModalManager {
 
   const close = useCallback(
     (n: number = 1): boolean => {
+      if (typeof n !== "number" || n < 1) {
+        throw new Error(
+          `amount must be a number greater than 0. Received ${n}`
+        );
+      }
       let closedCount = 0;
       setStack((prev) => {
         let newStack = [...prev];