next-recomponents 2.0.22 → 2.0.24

package/dist/index.d.mts

@@ -84,6 +84,7 @@ interface TableProps {
     currentCoin?: string;
     className?: string;
     fontSize?: string;
+    colSize?: Record<string, number>;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
@@ -154,12 +155,13 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
 type PopupColor$1 = "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
-declare function Modal({ button, children, color, }: {
+declare function Modal({ button, children, color, title, }: {
     button: ReactElement<React$1.ComponentPropsWithRef<"button">>;
     children: ReactElement<React$1.ComponentPropsWithRef<"div"> & {
         hide: () => void;
     }>;
     color?: PopupColor$1;
+    title?: string;
 }): react_jsx_runtime.JSX.Element;
 
 type PreProps = {

package/dist/index.d.ts

@@ -84,6 +84,7 @@ interface TableProps {
     currentCoin?: string;
     className?: string;
     fontSize?: string;
+    colSize?: Record<string, number>;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
@@ -154,12 +155,13 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
 type PopupColor$1 = "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
-declare function Modal({ button, children, color, }: {
+declare function Modal({ button, children, color, title, }: {
     button: ReactElement<React$1.ComponentPropsWithRef<"button">>;
     children: ReactElement<React$1.ComponentPropsWithRef<"div"> & {
         hide: () => void;
     }>;
     color?: PopupColor$1;
+    title?: string;
 }): react_jsx_runtime.JSX.Element;
 
 type PreProps = {

package/dist/index.js

@@ -35715,8 +35715,8 @@ function EditIcon() {
       fill: "currentColor",
       strokeWidth: "0",
       viewBox: "0 0 576 512",
-      height: "20px",
-      width: "20px",
+      height: "12px",
+      width: "12px",
       xmlns: "http://www.w3.org/2000/svg",
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" })
     }
@@ -35822,7 +35822,7 @@ function Toolbar({
     ) : onSave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { onClick: () => onSave(rows.map(stripMeta)), children: "Guardar" })
   ] });
 }
-function useColumns(rows, currentCoin, options) {
+function useColumns(rows, currentCoin, options, colSize) {
   const {
     flex,
     editableFields,
@@ -35835,7 +35835,7 @@ function useColumns(rows, currentCoin, options) {
   return (0, import_react4.useMemo)(() => {
     if (!rows.length) return [];
     const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
-      var _a;
+      var _a, _b;
       return {
         field: key,
         headerName: key,
@@ -35863,18 +35863,19 @@ function useColumns(rows, currentCoin, options) {
           }
           return value;
         },
-        flex,
-        editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
+        flex: key == "id" ? false : !(colSize == null ? void 0 : colSize[key]),
+        width: key == "id" ? 80 : (_a = colSize == null ? void 0 : colSize[key]) != null ? _a : void 0,
+        editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
-          var _a2, _b;
+          var _a2, _b2;
           return import_react4.default.cloneElement(buttons[key], {
             className: `${(_a2 = params == null ? void 0 : params.className) != null ? _a2 : ""} m-auto text-xs`,
-            children: (_b = params == null ? void 0 : params.row) == null ? void 0 : _b[key],
+            children: (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key],
             onClick: async (e) => {
-              var _a3, _b2;
+              var _a3, _b3;
               e.row = params == null ? void 0 : params.row;
-              if ((_b2 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b2.onClick) {
+              if ((_b3 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b3.onClick) {
                 const newVal = await buttons[key].props.onClick(e);
                 if (newVal) handleRowUpdate({ ...e.row, newVal });
               }
@@ -35887,9 +35888,10 @@ function useColumns(rows, currentCoin, options) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        flex,
+        // flex,
         editable: false,
         type: "string",
+        width: 10,
         renderCell: (params) => {
           var _a;
           return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -35923,7 +35925,8 @@ function IHTable({
   footer = {},
   currentCoin = "$",
   fontSize = "1rem",
-  className
+  className,
+  colSize
 }) {
   var _a;
   if (modal && onSelect)
@@ -35964,15 +35967,20 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
-  const columns = useColumns(rows, currentCoin, {
-    flex,
-    editableFields,
-    buttons: resolvedButtons,
-    hideColumns,
-    modal,
-    handleRowUpdate,
-    onModalOpen: handleModalOpen
-  });
+  const columns = useColumns(
+    rows,
+    currentCoin,
+    {
+      flex,
+      editableFields,
+      buttons: resolvedButtons,
+      hideColumns,
+      modal,
+      handleRowUpdate,
+      onModalOpen: handleModalOpen
+    },
+    colSize
+  );
   if (!rows.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "m-2", children: [
     header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold  p-2 ", children: header }),
@@ -37169,7 +37177,8 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 function Modal({
   button,
   children,
-  color = "primary"
+  color = "primary",
+  title
 }) {
   const pop = usePopup();
   const hide = () => pop.close(false);

package/dist/index.mjs

@@ -35695,8 +35695,8 @@ function EditIcon() {
       fill: "currentColor",
       strokeWidth: "0",
       viewBox: "0 0 576 512",
-      height: "20px",
-      width: "20px",
+      height: "12px",
+      width: "12px",
       xmlns: "http://www.w3.org/2000/svg",
       children: /* @__PURE__ */ jsx6("path", { d: "M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" })
     }
@@ -35802,7 +35802,7 @@ function Toolbar({
     ) : onSave && /* @__PURE__ */ jsx6(Button, { onClick: () => onSave(rows.map(stripMeta)), children: "Guardar" })
   ] });
 }
-function useColumns(rows, currentCoin, options) {
+function useColumns(rows, currentCoin, options, colSize) {
   const {
     flex,
     editableFields,
@@ -35815,7 +35815,7 @@ function useColumns(rows, currentCoin, options) {
   return useMemo(() => {
     if (!rows.length) return [];
     const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
-      var _a;
+      var _a, _b;
       return {
         field: key,
         headerName: key,
@@ -35843,18 +35843,19 @@ function useColumns(rows, currentCoin, options) {
           }
           return value;
         },
-        flex,
-        editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
+        flex: key == "id" ? false : !(colSize == null ? void 0 : colSize[key]),
+        width: key == "id" ? 80 : (_a = colSize == null ? void 0 : colSize[key]) != null ? _a : void 0,
+        editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
-          var _a2, _b;
+          var _a2, _b2;
           return React3.cloneElement(buttons[key], {
             className: `${(_a2 = params == null ? void 0 : params.className) != null ? _a2 : ""} m-auto text-xs`,
-            children: (_b = params == null ? void 0 : params.row) == null ? void 0 : _b[key],
+            children: (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key],
             onClick: async (e) => {
-              var _a3, _b2;
+              var _a3, _b3;
               e.row = params == null ? void 0 : params.row;
-              if ((_b2 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b2.onClick) {
+              if ((_b3 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b3.onClick) {
                 const newVal = await buttons[key].props.onClick(e);
                 if (newVal) handleRowUpdate({ ...e.row, newVal });
               }
@@ -35867,9 +35868,10 @@ function useColumns(rows, currentCoin, options) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        flex,
+        // flex,
         editable: false,
         type: "string",
+        width: 10,
         renderCell: (params) => {
           var _a;
           return /* @__PURE__ */ jsx6(
@@ -35903,7 +35905,8 @@ function IHTable({
   footer = {},
   currentCoin = "$",
   fontSize = "1rem",
-  className
+  className,
+  colSize
 }) {
   var _a;
   if (modal && onSelect)
@@ -35944,15 +35947,20 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
-  const columns = useColumns(rows, currentCoin, {
-    flex,
-    editableFields,
-    buttons: resolvedButtons,
-    hideColumns,
-    modal,
-    handleRowUpdate,
-    onModalOpen: handleModalOpen
-  });
+  const columns = useColumns(
+    rows,
+    currentCoin,
+    {
+      flex,
+      editableFields,
+      buttons: resolvedButtons,
+      hideColumns,
+      modal,
+      handleRowUpdate,
+      onModalOpen: handleModalOpen
+    },
+    colSize
+  );
   if (!rows.length) return null;
   return /* @__PURE__ */ jsxs5("div", { className: "m-2", children: [
     header && /* @__PURE__ */ jsx6("div", { className: "font-bold  p-2 ", children: header }),
@@ -37155,7 +37163,8 @@ import { Fragment as Fragment2, jsxs as jsxs10 } from "react/jsx-runtime";
 function Modal({
   button,
   children,
-  color = "primary"
+  color = "primary",
+  title
 }) {
   const pop = usePopup();
   const hide = () => pop.close(false);

package/package.json

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

package/src/modal/index.tsx

@@ -15,12 +15,14 @@ export default function Modal({
   button,
   children,
   color = "primary",
+  title,
 }: {
   button: ReactElement<React.ComponentPropsWithRef<"button">>;
   children: ReactElement<
     React.ComponentPropsWithRef<"div"> & { hide: () => void }
   >;
   color?: PopupColor;
+  title?: string;
 }) {
   const pop = usePopup();
   const hide = () => pop.close(false);

package/src/table/index.tsx

@@ -40,6 +40,7 @@ interface TableProps {
   currentCoin?: string;
   className?: string;
   fontSize?: string;
+  colSize?: Record<string, number>;
   [key: string]: any;
 }
 
@@ -67,8 +68,8 @@ function EditIcon() {
       fill="currentColor"
       strokeWidth="0"
       viewBox="0 0 576 512"
-      height="20px"
-      width="20px"
+      height="12px"
+      width="12px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" />
@@ -255,6 +256,7 @@ function useColumns(
     handleRowUpdate: (row: GridRowModel) => GridRowModel;
     onModalOpen: (row: GridValidRowModel) => void;
   },
+  colSize?: Record<string, number>,
 ) {
   const {
     flex,
@@ -310,7 +312,8 @@ function useColumns(
 
           return value;
         },
-        flex,
+        flex: key == "id" ? false : !colSize?.[key],
+        width: key == "id" ? 80 : (colSize?.[key] ?? undefined),
         editable: editableFields?.includes(key) ?? false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
         renderCell: buttons?.[key]
@@ -334,9 +337,10 @@ function useColumns(
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        flex,
+        // flex,
         editable: false,
         type: "string",
+        width: 10,
         renderCell: (params: any) =>
           (
             <Button
@@ -373,6 +377,7 @@ function IHTable({
   currentCoin = "$",
   fontSize = "1rem",
   className,
+  colSize,
 }: TableProps) {
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
@@ -420,15 +425,20 @@ function IHTable({
     return [];
   }, [selectedRows, rows]);
 
-  const columns = useColumns(rows, currentCoin, {
-    flex,
-    editableFields,
-    buttons: resolvedButtons,
-    hideColumns,
-    modal,
-    handleRowUpdate,
-    onModalOpen: handleModalOpen,
-  });
+  const columns = useColumns(
+    rows,
+    currentCoin,
+    {
+      flex,
+      editableFields,
+      buttons: resolvedButtons,
+      hideColumns,
+      modal,
+      handleRowUpdate,
+      onModalOpen: handleModalOpen,
+    },
+    colSize,
+  );
 
   if (!rows.length) return null;