next-recomponents 2.0.12 → 2.0.14

package/dist/index.d.mts

@@ -224,6 +224,7 @@ declare function usePopup(): {
     modal: (message: ReactNode, color?: PopupColor, icons?: boolean, full?: boolean) => Promise<void>;
     PopupComponent: react_jsx_runtime.JSX.Element | null;
     close: (confirmed: boolean, value?: string) => void;
+    updateMessage: (message: ReactNode) => void;
 };
 
 export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };

package/dist/index.d.ts

@@ -224,6 +224,7 @@ declare function usePopup(): {
     modal: (message: ReactNode, color?: PopupColor, icons?: boolean, full?: boolean) => Promise<void>;
     PopupComponent: react_jsx_runtime.JSX.Element | null;
     close: (confirmed: boolean, value?: string) => void;
+    updateMessage: (message: ReactNode) => void;
 };
 
 export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };

package/dist/index.js

@@ -36783,7 +36783,7 @@ function Select({
 }
 
 // src/modal/index.tsx
-var import_react10 = __toESM(require("react"));
+var import_react10 = require("react");
 
 // src/pop/index.tsx
 var import_react9 = require("react");
@@ -36967,7 +36967,15 @@ function PopupOverlay({
                     iconText: c.iconText
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { color: "danger", onClick: (e) => onClose(false), children: "X" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative w-full flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  Button,
+                  {
+                    color: "danger",
+                    className: "fixed text-xs font-bold",
+                    onClick: (e) => onClose(false),
+                    children: "x"
+                  }
+                ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "div",
                   {
@@ -37009,7 +37017,6 @@ function PopupOverlay({
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var INITIAL_STATE = {
   type: "alert",
-  message: "",
   visible: false,
   inputValue: "",
   color: "primary",
@@ -37018,9 +37025,12 @@ var INITIAL_STATE = {
 };
 function usePopup() {
   const [popup, setPopup] = (0, import_react9.useState)(INITIAL_STATE);
+  const messageRef = (0, import_react9.useRef)(null);
   const open = (0, import_react9.useCallback)(
     (partial) => {
-      setPopup({ ...partial, visible: true, inputValue: "" });
+      const { message, ...rest } = partial;
+      messageRef.current = message;
+      setPopup({ ...rest, visible: true, inputValue: "" });
     },
     []
   );
@@ -37082,15 +37092,27 @@ function usePopup() {
     ),
     [open]
   );
+  const updateMessage = (0, import_react9.useCallback)((message) => {
+    messageRef.current = message;
+    setPopup((prev) => ({ ...prev }));
+  }, []);
   const PopupComponent = popup.visible ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     PopupOverlay,
     {
-      popup,
+      popup: { ...popup, message: messageRef.current },
       onClose: close,
       onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
     }
   ) : null;
-  return { alert: alert2, confirm, prompt, modal, PopupComponent, close };
+  return {
+    alert: alert2,
+    confirm,
+    prompt,
+    modal,
+    PopupComponent,
+    close,
+    updateMessage
+  };
 }
 
 // src/modal/index.tsx
@@ -37101,16 +37123,12 @@ function Modal({
   color = "primary"
 }) {
   const pop = usePopup();
+  (0, import_react10.useEffect)(() => {
+    pop.updateMessage(children);
+  }, [children]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     (0, import_react10.cloneElement)(button, {
-      onClick: async (e) => {
-        await pop.modal(
-          import_react10.default.cloneElement(children, { hide: () => pop.close(false) }),
-          color,
-          false,
-          true
-        );
-      }
+      onClick: () => pop.modal(children, color, false, true)
     }),
     pop.PopupComponent
   ] });

package/dist/index.mjs

@@ -36769,10 +36769,10 @@ function Select({
 }
 
 // src/modal/index.tsx
-import React6, { cloneElement as cloneElement2 } from "react";
+import { cloneElement as cloneElement2, useEffect as useEffect6 } from "react";
 
 // src/pop/index.tsx
-import { useState as useState8, useCallback } from "react";
+import { useState as useState8, useCallback, useRef as useRef4 } from "react";
 
 // src/pop/actions.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -36953,7 +36953,15 @@ function PopupOverlay({
                     iconText: c.iconText
                   }
                 ),
-                /* @__PURE__ */ jsx14("div", { className: "w-full flex justify-end", children: /* @__PURE__ */ jsx14(Button, { color: "danger", onClick: (e) => onClose(false), children: "X" }) }),
+                /* @__PURE__ */ jsx14("div", { className: "relative w-full flex justify-end", children: /* @__PURE__ */ jsx14(
+                  Button,
+                  {
+                    color: "danger",
+                    className: "fixed text-xs font-bold",
+                    onClick: (e) => onClose(false),
+                    children: "x"
+                  }
+                ) }),
                 /* @__PURE__ */ jsx14(
                   "div",
                   {
@@ -36995,7 +37003,6 @@ function PopupOverlay({
 import { jsx as jsx15 } from "react/jsx-runtime";
 var INITIAL_STATE = {
   type: "alert",
-  message: "",
   visible: false,
   inputValue: "",
   color: "primary",
@@ -37004,9 +37011,12 @@ var INITIAL_STATE = {
 };
 function usePopup() {
   const [popup, setPopup] = useState8(INITIAL_STATE);
+  const messageRef = useRef4(null);
   const open = useCallback(
     (partial) => {
-      setPopup({ ...partial, visible: true, inputValue: "" });
+      const { message, ...rest } = partial;
+      messageRef.current = message;
+      setPopup({ ...rest, visible: true, inputValue: "" });
     },
     []
   );
@@ -37068,15 +37078,27 @@ function usePopup() {
     ),
     [open]
   );
+  const updateMessage = useCallback((message) => {
+    messageRef.current = message;
+    setPopup((prev) => ({ ...prev }));
+  }, []);
   const PopupComponent = popup.visible ? /* @__PURE__ */ jsx15(
     PopupOverlay,
     {
-      popup,
+      popup: { ...popup, message: messageRef.current },
       onClose: close,
       onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
     }
   ) : null;
-  return { alert: alert2, confirm, prompt, modal, PopupComponent, close };
+  return {
+    alert: alert2,
+    confirm,
+    prompt,
+    modal,
+    PopupComponent,
+    close,
+    updateMessage
+  };
 }
 
 // src/modal/index.tsx
@@ -37087,16 +37109,12 @@ function Modal({
   color = "primary"
 }) {
   const pop = usePopup();
+  useEffect6(() => {
+    pop.updateMessage(children);
+  }, [children]);
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
     cloneElement2(button, {
-      onClick: async (e) => {
-        await pop.modal(
-          React6.cloneElement(children, { hide: () => pop.close(false) }),
-          color,
-          false,
-          true
-        );
-      }
+      onClick: () => pop.modal(children, color, false, true)
     }),
     pop.PopupComponent
   ] });
@@ -37344,15 +37362,15 @@ function DocumentViewer({ item }) {
 
 // src/table3/index.tsx
 import React9, {
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo6,
   useReducer as useReducer2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState12
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect7, useMemo as useMemo4, useState as useState10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useState as useState10 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -37506,7 +37524,7 @@ function Filter({
   const hidden = Object.values(objectData).filter(
     (d) => d._visible === false
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (data.length != Object.values(objectData).map((o) => (o == null ? void 0 : o._id) || (o == null ? void 0 : o.id)).length) {
       const news = [...new Set(data.map((o) => o[h]))];
       setSelected(news);
@@ -38194,7 +38212,7 @@ function Table3({
     }
   }
   const [objectData, setObjectData] = useReducer2(dataReducer, null);
-  useEffect8(() => {
+  useEffect9(() => {
     setObjectData(data);
     setPage(1);
   }, [data]);
@@ -38211,7 +38229,7 @@ function Table3({
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
   const [sort, setSort] = useState12(sortBy);
-  const modalRef = useRef5(null);
+  const modalRef = useRef6(null);
   const [dialogRow, setDialogRow] = useState12({});
   const context = {
     objectData,
@@ -38239,7 +38257,7 @@ function Table3({
     setSort,
     ...props
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if ((dialogRow == null ? void 0 : dialogRow.id) || (dialogRow == null ? void 0 : dialogRow._id)) {
       const newDialogRow = objectData[dialogRow == null ? void 0 : dialogRow.id] || objectData[dialogRow == null ? void 0 : dialogRow._id];
       setDialogRow(newDialogRow);

package/package.json

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

package/src/modal/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode, cloneElement } from "react";
+// Modal.tsx
+import React, { ReactElement, cloneElement, useEffect } from "react";
 import usePopup from "../pop";
 export type PopupColor =
   | "white"
@@ -8,6 +9,7 @@ export type PopupColor =
   | "danger"
   | "warning"
   | "success";
+
 export default function Modal({
   button,
   children,
@@ -21,19 +23,17 @@ export default function Modal({
 }) {
   const pop = usePopup();
 
+  // ✅ Cada vez que children cambia (estado del padre actualizado),
+  // propagamos el nuevo ReactNode al modal si está abierto
+  useEffect(() => {
+    pop.updateMessage(children);
+  }, [children]);
+
   return (
     <>
       {cloneElement(button, {
-        onClick: async (e: React.MouseEvent<HTMLButtonElement>) => {
-          await pop.modal(
-            React.cloneElement(children, { hide: () => pop.close(false) }),
-            color,
-            false,
-            true,
-          );
-        },
+        onClick: () => pop.modal(children, color, false, true),
       })}
-
       {pop.PopupComponent}
     </>
   );

package/src/pop/index.tsx

@@ -1,12 +1,14 @@
+// usePopup.ts - Solución definitiva
 "use client";
 
-import { useState, useCallback, type ReactNode } from "react";
+import { useState, useCallback, useRef, type ReactNode } from "react";
 import { PopupColor, PopupState } from "./types";
 import { PopupOverlay } from "./overlay";
 
-const INITIAL_STATE: PopupState = {
+type PopupStateWithoutMessage = Omit<PopupState, "message">;
+
+const INITIAL_STATE: PopupStateWithoutMessage = {
   type: "alert",
-  message: "",
   visible: false,
   inputValue: "",
   color: "primary",
@@ -15,11 +17,15 @@ const INITIAL_STATE: PopupState = {
 };
 
 export default function usePopup() {
-  const [popup, setPopup] = useState<PopupState>(INITIAL_STATE);
+  const [popup, setPopup] = useState<PopupStateWithoutMessage>(INITIAL_STATE);
+  // El message vive FUERA del estado para no quedar congelado
+  const messageRef = useRef<ReactNode>(null);
 
   const open = useCallback(
     (partial: Omit<PopupState, "visible" | "inputValue">) => {
-      setPopup({ ...partial, visible: true, inputValue: "" });
+      const { message, ...rest } = partial;
+      messageRef.current = message as any;
+      setPopup({ ...rest, visible: true, inputValue: "" });
     },
     [],
   );
@@ -95,13 +101,29 @@ export default function usePopup() {
     [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 = popup.visible ? (
     <PopupOverlay
-      popup={popup}
+      popup={{ ...popup, message: messageRef.current }}
       onClose={close}
       onInputChange={(v) => setPopup((prev) => ({ ...prev, inputValue: v }))}
     />
   ) : null;
 
-  return { alert, confirm, prompt, modal, PopupComponent, close };
+  return {
+    alert,
+    confirm,
+    prompt,
+    modal,
+    PopupComponent,
+    close,
+    updateMessage,
+  };
 }

package/src/pop/overlay.tsx

@@ -13,6 +13,7 @@ export function PopupOverlay({
   const c = COLOR_CONFIG[popup.color];
   const resolvedMessage =
     typeof popup.message === "function" ? popup.message() : popup.message;
+
   return (
     <div
       className={"fixed inset-0 flex items-center justify-center z-[1000]  "}
@@ -45,9 +46,13 @@ export function PopupOverlay({
             />
           )}
           {
-            <div className="w-full flex justify-end">
-              <Button color="danger" onClick={(e) => onClose(false)}>
-                X
+            <div className="relative w-full flex justify-end">
+              <Button
+                color="danger"
+                className="fixed text-xs font-bold"
+                onClick={(e) => onClose(false)}
+              >
+                x
               </Button>
             </div>
           }