next-recomponents 2.0.33 → 2.0.34

package/dist/index.d.mts

@@ -232,12 +232,12 @@ type PopupColor = "white" | "primary" | "secondary" | "info" | "danger" | "warni
 
 declare function usePopup(): {
     alert: (message: string, color?: PopupColor) => Promise<void>;
-    confirm: typeof confirm;
-    prompt: typeof prompt;
+    confirm: (message: string, color?: PopupColor) => Promise<boolean>;
+    prompt: (message: string, color?: PopupColor) => Promise<string | null>;
     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;
-    PopupComponent: () => react_jsx_runtime.JSX.Element | null;
 };
 
 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

@@ -232,12 +232,12 @@ type PopupColor = "white" | "primary" | "secondary" | "info" | "danger" | "warni
 
 declare function usePopup(): {
     alert: (message: string, color?: PopupColor) => Promise<void>;
-    confirm: typeof confirm;
-    prompt: typeof prompt;
+    confirm: (message: string, color?: PopupColor) => Promise<boolean>;
+    prompt: (message: string, color?: PopupColor) => Promise<string | null>;
     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;
-    PopupComponent: () => react_jsx_runtime.JSX.Element | null;
 };
 
 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

@@ -36958,7 +36958,7 @@ var import_react10 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function PopupActions({
   type,
-  confirm: confirm2,
+  confirm,
   focusRing,
   onConfirm,
   onCancel
@@ -36977,7 +36977,7 @@ function PopupActions({
       "button",
       {
         onClick: onConfirm,
-        className: `px-5 py-2 rounded-lg text-sm font-semibold text-white ${confirm2} transition focus:outline-none focus:ring-2 ${focusRing}`,
+        className: `px-5 py-2 rounded-lg text-sm font-semibold text-white ${confirm} transition focus:outline-none focus:ring-2 ${focusRing}`,
         children: "Aceptar"
       }
     )
@@ -37193,18 +37193,16 @@ var INITIAL_STATE = {
   inputValue: "",
   color: "primary",
   icons: true,
-  full: false,
-  message: null
+  full: false
 };
 function usePopup() {
   const [popup, setPopup] = (0, import_react10.useState)(INITIAL_STATE);
+  const messageRef = (0, import_react10.useRef)(null);
   const open = (0, import_react10.useCallback)(
     (partial) => {
-      setPopup({
-        ...partial,
-        visible: true,
-        inputValue: ""
-      });
+      const { message, ...rest } = partial;
+      messageRef.current = message;
+      setPopup({ ...rest, visible: true, inputValue: "" });
     },
     []
   );
@@ -37213,19 +37211,9 @@ function usePopup() {
       var _a, _b;
       if (confirmed) (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
       else (_b = prev.onCancel) == null ? void 0 : _b.call(prev);
-      return {
-        ...prev,
-        visible: false,
-        inputValue: ""
-      };
+      return { ...prev, visible: false, inputValue: "" };
     });
   }, []);
-  const updateMessage = (0, import_react10.useCallback)((message) => {
-    setPopup((prev) => ({
-      ...prev,
-      message
-    }));
-  }, []);
   const alert2 = (0, import_react10.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
@@ -37233,9 +37221,7 @@ function usePopup() {
         message,
         color,
         onConfirm: () => resolve(),
-        onCancel: () => resolve(),
-        icons: true,
-        full: false
+        onCancel: () => resolve()
       })
     ),
     [open]
@@ -37246,36 +37232,61 @@ function usePopup() {
         type: "modal",
         message,
         color,
-        icons,
-        full,
         onConfirm: () => resolve(),
-        onCancel: () => resolve()
+        onCancel: () => resolve(),
+        icons,
+        full
       })
     ),
     [open]
   );
-  const PopupComponent = () => {
+  const confirm = (0, import_react10.useCallback)(
+    (message, color = "primary") => new Promise(
+      (resolve) => open({
+        type: "confirm",
+        message,
+        color,
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false)
+      })
+    ),
+    [open]
+  );
+  const prompt = (0, import_react10.useCallback)(
+    (message, color = "primary") => new Promise(
+      (resolve) => open({
+        type: "prompt",
+        message,
+        color,
+        onConfirm: (value) => resolve(value != null ? value : ""),
+        onCancel: () => resolve(null)
+      })
+    ),
+    [open]
+  );
+  const updateMessage = (0, import_react10.useCallback)((message) => {
+    messageRef.current = message;
+    setPopup((prev) => ({ ...prev }));
+  }, []);
+  const PopupComponent = (0, import_react10.useCallback)(() => {
     if (!popup.visible) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       PopupOverlay,
       {
-        popup,
+        popup: { ...popup, message: messageRef.current },
         onClose: close,
-        onInputChange: (v) => setPopup((prev) => ({
-          ...prev,
-          inputValue: v
-        }))
+        onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
       }
     );
-  };
+  }, [popup, close]);
   return {
     alert: alert2,
     confirm,
     prompt,
     modal,
+    PopupComponent,
     close,
-    updateMessage,
-    PopupComponent
+    updateMessage
   };
 }
 
@@ -37288,23 +37299,14 @@ function Modal({
   title
 }) {
   const pop = usePopup();
-  const hide = () => pop.close(false);
-  const content = (0, import_react11.useMemo)(() => {
-    return (0, import_react11.cloneElement)(children, {
-      hide,
-      key: crypto.randomUUID()
-    });
-  }, [children]);
-  (0, import_react11.useEffect)(() => {
-    pop.updateMessage(content);
-  }, [content]);
+  const hide = (0, import_react11.useCallback)(() => pop.close(false), [pop.close]);
   const props = button == null ? void 0 : button.props;
-  const originalOnClick = props == null ? void 0 : props.onClick;
+  const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     (0, import_react11.cloneElement)(button, {
-      onClick: async (e) => {
-        originalOnClick == null ? void 0 : originalOnClick(e);
-        await pop.modal(content, color, false, true);
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        pop.modal((0, import_react11.cloneElement)(children, { hide }), color, false, true);
       }
     }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(pop.PopupComponent, {})

package/dist/index.mjs

@@ -36935,16 +36935,16 @@ function Select({
 }
 
 // src/modal/index.tsx
-import { cloneElement as cloneElement2, useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import { cloneElement as cloneElement2, useCallback as useCallback2 } from "react";
 
 // src/pop/index.tsx
-import { useState as useState9, useCallback } from "react";
+import { useState as useState9, useCallback, useRef as useRef3 } from "react";
 
 // src/pop/actions.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function PopupActions({
   type,
-  confirm: confirm2,
+  confirm,
   focusRing,
   onConfirm,
   onCancel
@@ -36963,7 +36963,7 @@ function PopupActions({
       "button",
       {
         onClick: onConfirm,
-        className: `px-5 py-2 rounded-lg text-sm font-semibold text-white ${confirm2} transition focus:outline-none focus:ring-2 ${focusRing}`,
+        className: `px-5 py-2 rounded-lg text-sm font-semibold text-white ${confirm} transition focus:outline-none focus:ring-2 ${focusRing}`,
         children: "Aceptar"
       }
     )
@@ -37179,18 +37179,16 @@ var INITIAL_STATE = {
   inputValue: "",
   color: "primary",
   icons: true,
-  full: false,
-  message: null
+  full: false
 };
 function usePopup() {
   const [popup, setPopup] = useState9(INITIAL_STATE);
+  const messageRef = useRef3(null);
   const open = useCallback(
     (partial) => {
-      setPopup({
-        ...partial,
-        visible: true,
-        inputValue: ""
-      });
+      const { message, ...rest } = partial;
+      messageRef.current = message;
+      setPopup({ ...rest, visible: true, inputValue: "" });
     },
     []
   );
@@ -37199,19 +37197,9 @@ function usePopup() {
       var _a, _b;
       if (confirmed) (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
       else (_b = prev.onCancel) == null ? void 0 : _b.call(prev);
-      return {
-        ...prev,
-        visible: false,
-        inputValue: ""
-      };
+      return { ...prev, visible: false, inputValue: "" };
     });
   }, []);
-  const updateMessage = useCallback((message) => {
-    setPopup((prev) => ({
-      ...prev,
-      message
-    }));
-  }, []);
   const alert2 = useCallback(
     (message, color = "primary") => new Promise(
       (resolve) => open({
@@ -37219,9 +37207,7 @@ function usePopup() {
         message,
         color,
         onConfirm: () => resolve(),
-        onCancel: () => resolve(),
-        icons: true,
-        full: false
+        onCancel: () => resolve()
       })
     ),
     [open]
@@ -37232,36 +37218,61 @@ function usePopup() {
         type: "modal",
         message,
         color,
-        icons,
-        full,
         onConfirm: () => resolve(),
-        onCancel: () => resolve()
+        onCancel: () => resolve(),
+        icons,
+        full
+      })
+    ),
+    [open]
+  );
+  const confirm = useCallback(
+    (message, color = "primary") => new Promise(
+      (resolve) => open({
+        type: "confirm",
+        message,
+        color,
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false)
+      })
+    ),
+    [open]
+  );
+  const prompt = useCallback(
+    (message, color = "primary") => new Promise(
+      (resolve) => open({
+        type: "prompt",
+        message,
+        color,
+        onConfirm: (value) => resolve(value != null ? value : ""),
+        onCancel: () => resolve(null)
       })
     ),
     [open]
   );
-  const PopupComponent = () => {
+  const updateMessage = useCallback((message) => {
+    messageRef.current = message;
+    setPopup((prev) => ({ ...prev }));
+  }, []);
+  const PopupComponent = useCallback(() => {
     if (!popup.visible) return null;
     return /* @__PURE__ */ jsx15(
       PopupOverlay,
       {
-        popup,
+        popup: { ...popup, message: messageRef.current },
         onClose: close,
-        onInputChange: (v) => setPopup((prev) => ({
-          ...prev,
-          inputValue: v
-        }))
+        onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
       }
     );
-  };
+  }, [popup, close]);
   return {
     alert: alert2,
     confirm,
     prompt,
     modal,
+    PopupComponent,
     close,
-    updateMessage,
-    PopupComponent
+    updateMessage
   };
 }
 
@@ -37274,23 +37285,14 @@ function Modal({
   title
 }) {
   const pop = usePopup();
-  const hide = () => pop.close(false);
-  const content = useMemo4(() => {
-    return cloneElement2(children, {
-      hide,
-      key: crypto.randomUUID()
-    });
-  }, [children]);
-  useEffect6(() => {
-    pop.updateMessage(content);
-  }, [content]);
+  const hide = useCallback2(() => pop.close(false), [pop.close]);
   const props = button == null ? void 0 : button.props;
-  const originalOnClick = props == null ? void 0 : props.onClick;
+  const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
     cloneElement2(button, {
-      onClick: async (e) => {
-        originalOnClick == null ? void 0 : originalOnClick(e);
-        await pop.modal(content, color, false, true);
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        pop.modal(cloneElement2(children, { hide }), color, false, true);
       }
     }),
     /* @__PURE__ */ jsx16(pop.PopupComponent, {})
@@ -37539,15 +37541,15 @@ function DocumentViewer({ item }) {
 
 // src/table3/index.tsx
 import React9, {
-  useEffect as useEffect9,
-  useMemo as useMemo7,
+  useEffect as useEffect8,
+  useMemo as useMemo6,
   useReducer as useReducer2,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState13
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect8, useMemo as useMemo5, useState as useState11 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo4, useState as useState11 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -37659,12 +37661,12 @@ function Filter({
 }) {
   const [visible, setVisible] = useState11(false);
   const [text, setText] = useState11("");
-  const items = useMemo5(
+  const items = useMemo4(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
   const [selected, setSelected] = useState11(items);
-  const itemsFiltered = useMemo5(
+  const itemsFiltered = useMemo4(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
       return `${item}`.toLowerCase().includes(text.toLowerCase());
@@ -37701,7 +37703,7 @@ function Filter({
   const hidden = Object.values(objectData).filter(
     (d) => d._visible === false
   );
-  useEffect8(() => {
+  useEffect7(() => {
     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);
@@ -38273,7 +38275,7 @@ function TableFooter({
 }
 
 // src/table3/dialog.tsx
-import React8, { useMemo as useMemo6 } from "react";
+import React8, { useMemo as useMemo5 } from "react";
 import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function Dialog3({
   modalRef,
@@ -38290,7 +38292,7 @@ function Dialog3({
     var _a;
     return (_a = modalRef.current) == null ? void 0 : _a.close();
   };
-  const clonedModal = useMemo6(() => {
+  const clonedModal = useMemo5(() => {
     if (dialogRow && React8.isValidElement(children)) {
       return React8.cloneElement(children, {
         key: JSON.stringify(dialogRow),
@@ -38389,11 +38391,11 @@ function Table3({
     }
   }
   const [objectData, setObjectData] = useReducer2(dataReducer, null);
-  useEffect9(() => {
+  useEffect8(() => {
     setObjectData(data);
     setPage(1);
   }, [data]);
-  const headers = useMemo7(() => {
+  const headers = useMemo6(() => {
     if (!objectData) return [];
     return [
       ...new Set(
@@ -38401,12 +38403,12 @@ function Table3({
       )
     ];
   }, [objectData]);
-  const totalPages = useMemo7(() => {
+  const totalPages = useMemo6(() => {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
   const [sort, setSort] = useState13(sortBy);
-  const modalRef = useRef4(null);
+  const modalRef = useRef5(null);
   const [dialogRow, setDialogRow] = useState13({});
   const context = {
     objectData,
@@ -38434,7 +38436,7 @@ function Table3({
     setSort,
     ...props
   };
-  useEffect9(() => {
+  useEffect8(() => {
     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.33",
+  "version": "2.0.34",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/modal/index.tsx

@@ -1,7 +1,5 @@
 "use client";
-
-import React, { ReactElement, cloneElement, useEffect, useMemo } from "react";
-
+import React, { ReactElement, cloneElement, useCallback } from "react";
 import usePopup from "../pop";
 
 export type PopupColor =
@@ -28,34 +26,22 @@ export default function Modal({
 }) {
   const pop = usePopup();
 
-  const hide = () => pop.close(false);
-
-  // 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(content);
-  }, [content]);
+  const hide = useCallback(() => pop.close(false), [pop.close]);
 
   const props = button?.props;
-  const originalOnClick = props?.onClick;
+  const onClick = props?.onClick;
 
   return (
     <>
       {cloneElement(button, {
-        onClick: async (e) => {
-          originalOnClick?.(e as any);
-
-          await pop.modal(content, color, false, true);
+        onClick: (e) => {
+          onClick?.(e as any);
+          // En la apertura pasamos children con hide
+          pop.modal(cloneElement(children, { hide }), color, false, true);
         },
       })}
 
+      {/* ✅ Componente, no elemento JSX */}
       <pop.PopupComponent />
     </>
   );

package/src/pop/index.tsx

@@ -1,53 +1,36 @@
+// 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",
   visible: false,
   inputValue: "",
   color: "primary",
   icons: true,
   full: false,
-  message: null,
 };
-
 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: "" });
     },
     [],
   );
-
   const close = useCallback((confirmed: boolean, value?: string) => {
     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) =>
@@ -57,58 +40,80 @@ export default function usePopup() {
           color,
           onConfirm: () => resolve(),
           onCancel: () => resolve(),
-          icons: true,
-          full: false,
         }),
       ),
     [open],
   );
-
   const modal = useCallback(
     (
       message: ReactNode,
       color: PopupColor = "primary",
-      icons = false,
-      full = false,
+      icons: boolean = false,
+      full: boolean = false,
     ): Promise<void> =>
       new Promise((resolve) =>
         open({
           type: "modal",
           message,
           color,
-          icons,
-          full,
           onConfirm: () => resolve(),
           onCancel: () => resolve(),
+          icons,
+          full,
+        }),
+      ),
+    [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 PopupComponent = () => {
+  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 = useCallback(() => {
     if (!popup.visible) return null;
-
     return (
       <PopupOverlay
-        popup={popup}
+        popup={{ ...popup, message: messageRef.current }}
         onClose={close}
-        onInputChange={(v) =>
-          setPopup((prev) => ({
-            ...prev,
-            inputValue: v,
-          }))
-        }
+        onInputChange={(v) => setPopup((prev) => ({ ...prev, inputValue: v }))}
       />
     );
-  };
-
+  }, [popup, close]); // messageRef no necesita estar aquí, es mutable
   return {
     alert,
     confirm,
     prompt,
     modal,
+    PopupComponent,
     close,
     updateMessage,
-    PopupComponent,
   };
 }