next-recomponents 2.0.31 → 2.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.31",
+  "version": "2.0.33",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/modal/index.tsx

@@ -1,5 +1,7 @@
-// Modal.tsx
-import React, { ReactElement, cloneElement, useEffect } from "react";
+"use client";
+
+import React, { ReactElement, cloneElement, useEffect, useMemo } from "react";
+
 import usePopup from "../pop";
 
 export type PopupColor =
@@ -25,27 +27,36 @@ export default function Modal({
   title?: string;
 }) {
   const pop = usePopup();
+
   const hide = () => pop.close(false);
 
-  // Inyectamos hide en children
-  const childrenWithHide = cloneElement(children, { hide });
+  // key dinámica para forzar remount cuando cambie el children
+  const content = useMemo(() => {
+    return cloneElement(children, {
+      hide,
+      key: crypto.randomUUID(),
+    });
+  }, [children]);
 
+  // actualizar SOLO si el modal está abierto
   useEffect(() => {
-    pop.updateMessage(childrenWithHide);
-  }, [children]); // children como dep para detectar cambios del padre
+    pop.updateMessage(content);
+  }, [content]);
 
   const props = button?.props;
-  const onClick = props?.onClick;
+  const originalOnClick = props?.onClick;
 
   return (
     <>
       {cloneElement(button, {
-        onClick: (e) => {
-          onClick?.(e as any);
-          pop.modal(childrenWithHide, color, false, true);
+        onClick: async (e) => {
+          originalOnClick?.(e as any);
+
+          await pop.modal(content, color, false, true);
         },
       })}
-      {pop.PopupComponent}
+
+      <pop.PopupComponent />
     </>
   );
 }

package/src/pop/index.tsx

@@ -1,31 +1,29 @@
-// usePopup.ts - Solución definitiva
 "use client";
 
-import { useState, useCallback, useRef, type ReactNode } from "react";
+import { useState, useCallback, type ReactNode } from "react";
 import { PopupColor, PopupState } from "./types";
 import { PopupOverlay } from "./overlay";
 
-type PopupStateWithoutMessage = Omit<PopupState, "message">;
-
-const INITIAL_STATE: PopupStateWithoutMessage = {
+const INITIAL_STATE: PopupState = {
   type: "alert",
   visible: false,
   inputValue: "",
   color: "primary",
   icons: true,
   full: false,
+  message: null,
 };
 
 export default function usePopup() {
-  const [popup, setPopup] = useState<PopupStateWithoutMessage>(INITIAL_STATE);
-  // El message vive FUERA del estado para no quedar congelado
-  const messageRef = useRef<ReactNode>(null);
+  const [popup, setPopup] = useState<PopupState>(INITIAL_STATE);
 
   const open = useCallback(
     (partial: Omit<PopupState, "visible" | "inputValue">) => {
-      const { message, ...rest } = partial;
-      messageRef.current = message as any;
-      setPopup({ ...rest, visible: true, inputValue: "" });
+      setPopup({
+        ...partial,
+        visible: true,
+        inputValue: "",
+      });
     },
     [],
   );
@@ -34,10 +32,22 @@ export default function usePopup() {
     setPopup((prev) => {
       if (confirmed) prev.onConfirm?.(value);
       else prev.onCancel?.();
-      return { ...prev, visible: false, inputValue: "" };
+
+      return {
+        ...prev,
+        visible: false,
+        inputValue: "",
+      };
     });
   }, []);
 
+  const updateMessage = useCallback((message: ReactNode) => {
+    setPopup((prev) => ({
+      ...prev,
+      message,
+    }));
+  }, []);
+
   const alert = useCallback(
     (message: string, color: PopupColor = "primary"): Promise<void> =>
       new Promise((resolve) =>
@@ -47,6 +57,8 @@ export default function usePopup() {
           color,
           onConfirm: () => resolve(),
           onCancel: () => resolve(),
+          icons: true,
+          full: false,
         }),
       ),
     [open],
@@ -56,74 +68,47 @@ export default function usePopup() {
     (
       message: ReactNode,
       color: PopupColor = "primary",
-      icons: boolean = false,
-      full: boolean = false,
+      icons = false,
+      full = false,
     ): Promise<void> =>
       new Promise((resolve) =>
         open({
           type: "modal",
           message,
           color,
-          onConfirm: () => resolve(),
-          onCancel: () => resolve(),
           icons,
           full,
+          onConfirm: () => resolve(),
+          onCancel: () => resolve(),
         }),
       ),
     [open],
   );
 
-  const confirm = useCallback(
-    (message: string, color: PopupColor = "primary"): Promise<boolean> =>
-      new Promise((resolve) =>
-        open({
-          type: "confirm",
-          message,
-          color,
-          onConfirm: () => resolve(true),
-          onCancel: () => resolve(false),
-        }),
-      ),
-    [open],
-  );
-
-  const prompt = useCallback(
-    (message: string, color: PopupColor = "primary"): Promise<string | null> =>
-      new Promise((resolve) =>
-        open({
-          type: "prompt",
-          message,
-          color,
-          onConfirm: (value) => resolve(value ?? ""),
-          onCancel: () => resolve(null),
-        }),
-      ),
-    [open],
-  );
-
-  // ✅ Actualiza la ref en cada render cuando el modal está abierto
-  // Esto permite que cambios en el children del padre se reflejen
-  const updateMessage = useCallback((message: ReactNode) => {
-    messageRef.current = message;
-    // Fuerza re-render del PopupComponent
-    setPopup((prev) => ({ ...prev }));
-  }, []);
+  const PopupComponent = () => {
+    if (!popup.visible) return null;
 
-  const PopupComponent = popup.visible ? (
-    <PopupOverlay
-      popup={{ ...popup, message: messageRef.current }}
-      onClose={close}
-      onInputChange={(v) => setPopup((prev) => ({ ...prev, inputValue: v }))}
-    />
-  ) : null;
+    return (
+      <PopupOverlay
+        popup={popup}
+        onClose={close}
+        onInputChange={(v) =>
+          setPopup((prev) => ({
+            ...prev,
+            inputValue: v,
+          }))
+        }
+      />
+    );
+  };
 
   return {
     alert,
     confirm,
     prompt,
     modal,
-    PopupComponent,
     close,
     updateMessage,
+    PopupComponent,
   };
 }

package/src/table/index.tsx

@@ -222,6 +222,7 @@ function ModalDialog({
           React.cloneElement(
             modal as React.ReactElement,
             {
+              key: selectedRow.id,
               row: selectedRow,
               hide: onClose,
             } as any,