next-recomponents 2.0.15 → 2.0.17

package/dist/index.js

@@ -35834,6 +35834,15 @@ function useColumns(rows, options) {
       return {
         field: key,
         headerName: key,
+        valueFormatter: (value) => {
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+          return num.toLocaleString("en-US", {
+            minimumFractionDigits: num % 1 !== 0 ? 2 : 0,
+            maximumFractionDigits: num % 1 !== 0 ? 2 : 0
+          });
+        },
         flex,
         editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
@@ -35942,66 +35951,68 @@ function IHTable({
     onModalOpen: handleModalOpen
   });
   if (!rows.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_material.Box,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
-        width,
-        zIndex: 999999999
-      },
-      children: [
-        modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          ModalDialog,
-          {
-            open,
-            onClose: handleClose,
-            modal,
-            selectedRow: modalRow
-          }
-        ),
-        header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Toolbar,
-          {
-            exportName,
-            onSave,
-            onSelect,
-            rows,
-            filteredRows
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_x_data_grid.DataGrid,
-          {
-            rows,
-            columns,
-            checkboxSelection: Boolean(onSelect),
-            rowSelectionModel: selectedRows,
-            onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
-            sx: {
-              "& .MuiDataGrid-cell--editable": {
-                backgroundColor: "#c6d8f0",
-                fontWeight: 500
-              },
-              ...rows.length <= Object.keys(HEIGHT_MAP).length && {
-                "& .MuiDataGrid-filler": {
-                  display: "none"
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Toolbar,
+      {
+        exportName,
+        onSave,
+        onSelect,
+        rows,
+        filteredRows
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_material.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          width,
+          zIndex: 999999999
+        },
+        children: [
+          modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ModalDialog,
+            {
+              open,
+              onClose: handleClose,
+              modal,
+              selectedRow: modalRow
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_x_data_grid.DataGrid,
+            {
+              rows,
+              columns,
+              checkboxSelection: Boolean(onSelect),
+              rowSelectionModel: selectedRows,
+              onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              sx: {
+                "& .MuiDataGrid-cell--editable": {
+                  backgroundColor: "#c6d8f0",
+                  fontWeight: 500
+                },
+                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                  "& .MuiDataGrid-filler": {
+                    display: "none"
+                  }
                 }
-              }
-            },
-            editMode: "row",
-            processRowUpdate: handleRowUpdate,
-            pageSizeOptions: [5, 10],
-            hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows })
-      ]
-    }
-  );
+              },
+              editMode: "row",
+              processRowUpdate: handleRowUpdate,
+              pageSizeOptions: [5, 10],
+              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows })
+        ]
+      }
+    )
+  ] });
 }
 function Table(props) {
   if (Array.isArray(props.data)) {
@@ -37123,16 +37134,18 @@ function Modal({
   color = "primary"
 }) {
   const pop = usePopup();
+  const hide = () => pop.close(false);
+  const childrenWithHide = (0, import_react10.cloneElement)(children, { hide });
   (0, import_react10.useEffect)(() => {
-    pop.updateMessage(children);
+    pop.updateMessage(childrenWithHide);
   }, [children]);
-  const props = children == null ? void 0 : children.props;
+  const props = button == null ? void 0 : button.props;
   const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     (0, import_react10.cloneElement)(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
-        pop.modal(children, color, false, true);
+        pop.modal(childrenWithHide, color, false, true);
       }
     }),
     pop.PopupComponent

package/dist/index.mjs

@@ -35814,6 +35814,15 @@ function useColumns(rows, options) {
       return {
         field: key,
         headerName: key,
+        valueFormatter: (value) => {
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+          return num.toLocaleString("en-US", {
+            minimumFractionDigits: num % 1 !== 0 ? 2 : 0,
+            maximumFractionDigits: num % 1 !== 0 ? 2 : 0
+          });
+        },
         flex,
         editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
@@ -35922,66 +35931,68 @@ function IHTable({
     onModalOpen: handleModalOpen
   });
   if (!rows.length) return null;
-  return /* @__PURE__ */ jsxs5(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
-        width,
-        zIndex: 999999999
-      },
-      children: [
-        modal && /* @__PURE__ */ jsx6(
-          ModalDialog,
-          {
-            open,
-            onClose: handleClose,
-            modal,
-            selectedRow: modalRow
-          }
-        ),
-        header && /* @__PURE__ */ jsx6("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
-        /* @__PURE__ */ jsx6(
-          Toolbar,
-          {
-            exportName,
-            onSave,
-            onSelect,
-            rows,
-            filteredRows
-          }
-        ),
-        /* @__PURE__ */ jsx6(
-          DataGrid,
-          {
-            rows,
-            columns,
-            checkboxSelection: Boolean(onSelect),
-            rowSelectionModel: selectedRows,
-            onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
-            sx: {
-              "& .MuiDataGrid-cell--editable": {
-                backgroundColor: "#c6d8f0",
-                fontWeight: 500
-              },
-              ...rows.length <= Object.keys(HEIGHT_MAP).length && {
-                "& .MuiDataGrid-filler": {
-                  display: "none"
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    header && /* @__PURE__ */ jsx6("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
+    /* @__PURE__ */ jsx6(
+      Toolbar,
+      {
+        exportName,
+        onSave,
+        onSelect,
+        rows,
+        filteredRows
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          width,
+          zIndex: 999999999
+        },
+        children: [
+          modal && /* @__PURE__ */ jsx6(
+            ModalDialog,
+            {
+              open,
+              onClose: handleClose,
+              modal,
+              selectedRow: modalRow
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            DataGrid,
+            {
+              rows,
+              columns,
+              checkboxSelection: Boolean(onSelect),
+              rowSelectionModel: selectedRows,
+              onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              sx: {
+                "& .MuiDataGrid-cell--editable": {
+                  backgroundColor: "#c6d8f0",
+                  fontWeight: 500
+                },
+                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                  "& .MuiDataGrid-filler": {
+                    display: "none"
+                  }
                 }
-              }
-            },
-            editMode: "row",
-            processRowUpdate: handleRowUpdate,
-            pageSizeOptions: [5, 10],
-            hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
-          }
-        ),
-        /* @__PURE__ */ jsx6(CustomFooter, { footer, rows })
-      ]
-    }
-  );
+              },
+              editMode: "row",
+              processRowUpdate: handleRowUpdate,
+              pageSizeOptions: [5, 10],
+              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+            }
+          ),
+          /* @__PURE__ */ jsx6(CustomFooter, { footer, rows })
+        ]
+      }
+    )
+  ] });
 }
 function Table(props) {
   if (Array.isArray(props.data)) {
@@ -37109,16 +37120,18 @@ function Modal({
   color = "primary"
 }) {
   const pop = usePopup();
+  const hide = () => pop.close(false);
+  const childrenWithHide = cloneElement2(children, { hide });
   useEffect6(() => {
-    pop.updateMessage(children);
+    pop.updateMessage(childrenWithHide);
   }, [children]);
-  const props = children == null ? void 0 : children.props;
+  const props = button == null ? void 0 : button.props;
   const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
     cloneElement2(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
-        pop.modal(children, color, false, true);
+        pop.modal(childrenWithHide, color, false, true);
       }
     }),
     pop.PopupComponent

package/package.json

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

package/src/modal/index.tsx

@@ -1,6 +1,7 @@
 // Modal.tsx
 import React, { ReactElement, cloneElement, useEffect } from "react";
 import usePopup from "../pop";
+
 export type PopupColor =
   | "white"
   | "primary"
@@ -22,20 +23,24 @@ export default function Modal({
   color?: PopupColor;
 }) {
   const pop = usePopup();
+  const hide = () => pop.close(false);
+
+  // Inyectamos hide en children
+  const childrenWithHide = cloneElement(children, { hide });
 
-  // ✅ Cada vez que children cambia (estado del padre actualizado),
-  // propagamos el nuevo ReactNode al modal si está abierto
   useEffect(() => {
-    pop.updateMessage(children);
-  }, [children]);
-  const props = children?.props;
+    pop.updateMessage(childrenWithHide);
+  }, [children]); // children como dep para detectar cambios del padre
+
+  const props = button?.props;
   const onClick = props?.onClick;
+
   return (
     <>
       {cloneElement(button, {
         onClick: (e) => {
           onClick?.(e as any);
-          pop.modal(children, color, false, true);
+          pop.modal(childrenWithHide, color, false, true);
         },
       })}
       {pop.PopupComponent}

package/src/table/index.tsx

@@ -267,6 +267,16 @@ function useColumns(
       .map((key) => ({
         field: key,
         headerName: key,
+        valueFormatter: (value: any) => {
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+
+          return num.toLocaleString("en-US", {
+            minimumFractionDigits: num % 1 !== 0 ? 2 : 0,
+            maximumFractionDigits: num % 1 !== 0 ? 2 : 0,
+          });
+        },
         flex,
         editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
@@ -304,7 +314,7 @@ function useColumns(
               {params?.row?.["Modal"]}
             </Button>
           ) as any,
-      });
+      } as any);
     }
 
     return cols;
@@ -387,30 +397,12 @@ function IHTable({
   if (!rows.length) return null;
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: HEIGHT_MAP[rows.length] ?? height,
-        width,
-        zIndex: 999999999,
-      }}
-    >
-      {modal && (
-        <ModalDialog
-          open={open}
-          onClose={handleClose}
-          modal={modal}
-          selectedRow={modalRow}
-        />
-      )}
-
+    <div>
       {header && (
         <div className="font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded">
           {header}
         </div>
       )}
-
       <Toolbar
         exportName={exportName}
         onSave={onSave}
@@ -419,31 +411,50 @@ function IHTable({
         filteredRows={filteredRows}
       />
 
-      <DataGrid
-        rows={rows}
-        columns={columns as any}
-        checkboxSelection={Boolean(onSelect)}
-        rowSelectionModel={selectedRows}
-        onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+      <Box
         sx={{
-          "& .MuiDataGrid-cell--editable": {
-            backgroundColor: "#c6d8f0",
-            fontWeight: 500,
-          },
-          ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
-            "& .MuiDataGrid-filler": {
-              display: "none",
-            },
-          }),
+          display: "flex",
+          flexDirection: "column",
+          height: HEIGHT_MAP[rows.length] ?? height,
+          width,
+          zIndex: 999999999,
         }}
-        editMode="row"
-        processRowUpdate={handleRowUpdate}
-        pageSizeOptions={[5, 10]}
-        hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
-      />
+      >
+        {modal && (
+          <ModalDialog
+            open={open}
+            onClose={handleClose}
+            modal={modal}
+            selectedRow={modalRow}
+          />
+        )}
+
+        <DataGrid
+          rows={rows}
+          columns={columns as any}
+          checkboxSelection={Boolean(onSelect)}
+          rowSelectionModel={selectedRows}
+          onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
+          sx={{
+            "& .MuiDataGrid-cell--editable": {
+              backgroundColor: "#c6d8f0",
+              fontWeight: 500,
+            },
+            ...(rows.length <= Object.keys(HEIGHT_MAP).length && {
+              "& .MuiDataGrid-filler": {
+                display: "none",
+              },
+            }),
+          }}
+          editMode="row"
+          processRowUpdate={handleRowUpdate}
+          pageSizeOptions={[5, 10]}
+          hideFooter={rows.length <= Object.keys(HEIGHT_MAP).length}
+        />
 
-      <CustomFooter footer={footer} rows={rows} />
-    </Box>
+        <CustomFooter footer={footer} rows={rows} />
+      </Box>
+    </div>
   );
 }