componentes-sinco 1.0.2-rc.8 → 1.0.3

package/dist/componentes-sinco.css

@@ -0,0 +1 @@
+.red-asterisk{color:#d14343}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}body{margin:0;padding:0;-ms-overflow-style:none}body::-ms-scrollbar-track{background:#f1f1f1}body::-ms-scrollbar-thumb{background:#888}::-webkit-scrollbar{width:14px!important;height:14px!important;background:#eaebec}::-webkit-scrollbar-thumb{background-color:#2063a0;border:3.5px solid #EAEBEC;border-radius:17px}.APP5PassWord{-webkit-text-security:disc}input[type=password]::-ms-reveal{display:none!important}input[type=password]::-ms-clear{display:none!important}

package/dist/index.cjs

@@ -57,8 +57,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   ADCSincoTheme: () => ADCSincoTheme,
   AdproSincoTheme: () => AdproSincoTheme,
   FooterAction: () => FooterAction,
@@ -88,7 +88,7 @@ __export(index_exports, {
   useMultiSelectHandlers: () => useMultiSelectHandlers,
   useProgress: () => useProgress
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/Components/Drawer/SCDrawer.tsx
 var import_react5 = __toESM(require("react"), 1);
@@ -1670,42 +1670,94 @@ var SCCalendarSwipeable = ({
 var import_react18 = __toESM(require("react"), 1);
 var import_x_data_grid_pro = require("@mui/x-data-grid-pro");
 var import_x_license_pro = require("@mui/x-license-pro");
-var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeight, density, groupingColDef, getTreeDataPath }) => {
+var import_styles = require("@mui/styles");
+var useStyles = (0, import_styles.makeStyles)({
+  root: {
+    "& .MuiDataGrid-filler": {
+      display: "none !important"
+    },
+    "& .MuiDataGrid-footerContainer": {
+      minHeight: "26px !important",
+      height: "26px !important"
+    },
+    "& .MuiTablePagination-toolbar": {
+      minHeight: "25px !important",
+      height: "25px !important"
+    },
+    "& .MuiTablePagination-actions .MuiIconButton-root": {
+      padding: "0px !important"
+    },
+    "&.MuiDataGrid-root": {
+      "--DataGrid-topContainerHeight": "0px !important"
+      /* Cambia este valor según tus necesidades */
+    },
+    "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
+      "--height": "0px !important",
+      "minHeight": "0px !important",
+      "maxHeight": "0px !important"
+    },
+    "& .MuiDataGrid-cell": {
+      padding: "0 !important"
+    }
+  }
+});
+var SCDataGrid = (_a) => {
+  var _b = _a, { data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath } = _b, props = __objRest(_b, ["data", "columns", "rowsTable", "checkboxSelection", "width", "height", "maxHeight", "density", "agrupacion", "groupingColDef", "getTreeDataPath"]);
   const apiRef = (0, import_x_data_grid_pro.useGridApiRef)();
+  const classes = useStyles();
   import_x_license_pro.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
   let validationTreeData = getTreeDataPath ? true : false;
-  let validationCheckboxSelection = checkboxSelection || false;
-  let styleDensity = density || "compact";
-  let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
-  let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
-  let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
-  let validationGroupingColDef = groupingColDef || {};
+  let paginalion = 10;
+  let valor = 80;
+  let alto = 345;
+  let estilot = "compact";
+  let tamanoEncabezado = density == "compact" ? 24 : density == "standard" ? 36 : density == "comfortable" ? 52 : 24;
+  let tamanoCelda = density == "compact" ? 22 : density == "standard" ? 28 : density == "comfortable" ? 48 : 22;
+  let dataConvert = [];
   const [groupDataLenght, setGroupDataLengh] = (0, import_react18.useState)(0);
+  checkboxSelection = checkboxSelection || false;
+  const rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
+  width = width || "100%";
+  density = density || "compact";
+  agrupacion = agrupacion || false;
+  groupingColDef = groupingColDef || {};
+  getTreeDataPath = getTreeDataPath || void 0;
   const [pageSize, setPageSize] = (0, import_react18.useState)(rows);
   const [arrayRows, setArrayRows] = (0, import_react18.useState)([]);
+  const [heightTable, setHeightTable] = (0, import_react18.useState)(height || 0);
   (0, import_react18.useEffect)(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
+      if (validationTreeData) {
+        countGroupedElements(data, getTreeDataPath);
+      }
     }
   }, [data]);
+  (0, import_react18.useEffect)(() => {
+    if (groupDataLenght > 0 && validationTreeData == true) {
+      setHeightTable(heightTable ? heightTable : groupDataLenght * tamanoCelda + tamanoEncabezado + 27);
+    } else if (groupDataLenght <= 0 && validationTreeData == false) {
+      setHeightTable(heightTable ? heightTable : rows * tamanoCelda + tamanoEncabezado + 27);
+    }
+  }, [groupDataLenght]);
   const dataConvertRows = (data2, columnId) => {
-    let dataConvert = [];
+    let dataConvert2 = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
       data2.map((item) => {
         const newKeys = {};
         let i = 0;
-        let id = dataConvert.length + 1;
+        let id = dataConvert2.length + 1;
         for (i = 0; i < dataKeys.length; i++) {
           newKeys[dataKeys[i]] = item[dataKeys[i]];
         }
         newKeys.id = columnId ? item[columnId] : id;
-        dataConvert = [...dataConvert, newKeys];
+        dataConvert2 = [...dataConvert2, newKeys];
       });
     }
-    setArrayRows(dataConvert);
+    setArrayRows(dataConvert2);
   };
   const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
   const [selectionModel, setSelectionModel] = (0, import_react18.useState)([]);
@@ -1745,27 +1797,41 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
       setSelectionModel([...newSelection]);
     }
   };
-  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, data && /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { style: { width: width || "100%", maxHeight } }, /* @__PURE__ */ import_react18.default.createElement(
+  const countGroupedElements = (row, getTreeDataPath2) => {
+    const groupedCounts = {};
+    data.forEach((row2) => {
+      const path = getTreeDataPath2(row2) || [];
+      const key = path[0];
+      if (!groupedCounts[key]) {
+        groupedCounts[key] = 0;
+      }
+      groupedCounts[key]++;
+    });
+    setGroupDataLengh(Object.keys(groupedCounts).length);
+    return groupedCounts;
+  };
+  const virtualScrollerHeight = validationTreeData ? groupDataLenght * tamanoCelda + 10 : rows * tamanoCelda;
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, heightTable > 0 ? /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", width, maxHeight } }, /* @__PURE__ */ import_react18.default.createElement(
     import_x_data_grid_pro.DataGridPro,
-    {
-      apiRef,
-      rowHeight: styleRowHeight,
+    __spreadProps(__spreadValues({
+      apiRef
+    }, props), {
       rows: arrayRows,
       columns,
-      density: styleDensity,
+      density,
       treeData: validationTreeData,
       getTreeDataPath,
-      groupingColDef: validationTreeData == true ? validationGroupingColDef : false,
+      groupingColDef: validationTreeData == true ? groupingColDef : false,
       pagination: true,
       initialState: {
         pagination: { paginationModel: { pageSize: rows } }
       },
-      checkboxSelection: validationCheckboxSelection,
+      checkboxSelection,
       rowSelectionModel: selectionModel,
       onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
       isRowSelectable,
       disableRowSelectionOnClick: true,
-      hideFooter: validationTreeData == true ? true : false,
+      className: classes.root,
       localeText: {
         noRowsLabel: "No hay filas",
         columnMenuLabel: "Men\xFA de columna",
@@ -1776,36 +1842,9 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
           labelRowsPerPage: "Filas por p\xE1gina:",
           labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
         }
-      },
-      sx: {
-        "& .MuiDataGrid-filler": {
-          display: "none !important"
-        },
-        "& .MuiDataGrid-footerContainer": {
-          minHeight: "26px !important",
-          height: "26px !important"
-        },
-        "& .MuiTablePagination-toolbar": {
-          minHeight: "25px !important",
-          height: "25px !important"
-        },
-        "& .MuiTablePagination-actions .MuiIconButton-root": {
-          padding: "0px !important"
-        },
-        "&.MuiDataGrid-root": {
-          [`--DataGrid-topContainerHeight`]: `${styleTopContainerHeight} !important`
-        },
-        "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
-          "--height": "0px !important",
-          "minHeight": "0px !important",
-          "maxHeight": "0px !important"
-        },
-        "& .MuiDataGrid-cell": {
-          padding: "0 !important"
-        }
       }
-    }
-  ))));
+    })
+  ))) : "");
 };
 
 // src/Components/SCAutocomplete.tsx
@@ -2026,7 +2065,7 @@ function SCAutocomplete({
 }
 
 // src/Theme/index.ts
-var import_styles2 = require("@mui/material/styles");
+var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
 var import_react20 = __toESM(require("react"), 1);
@@ -3671,7 +3710,7 @@ var import_Typography = require("@mui/material/Typography");
 var import_Radio = require("@mui/material/Radio");
 var import_Chip = require("@mui/material/Chip");
 var import_Checkbox = require("@mui/material/Checkbox");
-var import_styles = require("@mui/material/styles");
+var import_styles2 = require("@mui/material/styles");
 
 // src/Theme/typography.ts
 var typography = {
@@ -3842,9 +3881,9 @@ var ADCTheme = __spreadValues({
 }, BasicTheme);
 
 // src/Theme/index.ts
-var SincoTheme = (0, import_styles2.createTheme)(__spreadValues({}, ERPTheme));
-var AdproSincoTheme = (0, import_styles2.createTheme)(__spreadValues({}, ADPROTheme));
-var ADCSincoTheme = (0, import_styles2.createTheme)(__spreadValues({}, ADCTheme));
+var SincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ERPTheme));
+var AdproSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADPROTheme));
+var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ADCSincoTheme,

package/dist/index.d.cts

@@ -354,12 +354,16 @@ interface SCDataGridProps {
     rowsTable?: number;
     checkboxSelection?: boolean;
     width?: string | number;
-    maxHeight: number;
+    height?: number;
+    maxHeight?: number;
     density?: "compact" | "standard" | "comfortable";
+    agrupacion?: boolean;
+    columnsGrouping?: number;
     groupingColDef?: any;
     getTreeDataPath?: (row: any) => string[] | [];
+    otherProps?: any;
 }
-declare const SCDataGrid: ({ data, columns, rowsTable, checkboxSelection, width, maxHeight, density, groupingColDef, getTreeDataPath, }: SCDataGridProps) => React__default.JSX.Element;
+declare const SCDataGrid: ({ data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath, ...props }: SCDataGridProps) => React__default.JSX.Element;
 
 interface SCAutocompleteProps<T> {
     label?: string;

package/dist/index.d.ts

@@ -354,12 +354,16 @@ interface SCDataGridProps {
     rowsTable?: number;
     checkboxSelection?: boolean;
     width?: string | number;
-    maxHeight: number;
+    height?: number;
+    maxHeight?: number;
     density?: "compact" | "standard" | "comfortable";
+    agrupacion?: boolean;
+    columnsGrouping?: number;
     groupingColDef?: any;
     getTreeDataPath?: (row: any) => string[] | [];
+    otherProps?: any;
 }
-declare const SCDataGrid: ({ data, columns, rowsTable, checkboxSelection, width, maxHeight, density, groupingColDef, getTreeDataPath, }: SCDataGridProps) => React__default.JSX.Element;
+declare const SCDataGrid: ({ data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath, ...props }: SCDataGridProps) => React__default.JSX.Element;
 
 interface SCAutocompleteProps<T> {
     label?: string;

package/dist/index.js

@@ -1610,42 +1610,94 @@ var SCCalendarSwipeable = ({
 import React14, { useEffect as useEffect11, useState as useState10 } from "react";
 import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
 import { LicenseInfo } from "@mui/x-license-pro";
-var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeight, density, groupingColDef, getTreeDataPath }) => {
+import { makeStyles } from "@mui/styles";
+var useStyles = makeStyles({
+  root: {
+    "& .MuiDataGrid-filler": {
+      display: "none !important"
+    },
+    "& .MuiDataGrid-footerContainer": {
+      minHeight: "26px !important",
+      height: "26px !important"
+    },
+    "& .MuiTablePagination-toolbar": {
+      minHeight: "25px !important",
+      height: "25px !important"
+    },
+    "& .MuiTablePagination-actions .MuiIconButton-root": {
+      padding: "0px !important"
+    },
+    "&.MuiDataGrid-root": {
+      "--DataGrid-topContainerHeight": "0px !important"
+      /* Cambia este valor según tus necesidades */
+    },
+    "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
+      "--height": "0px !important",
+      "minHeight": "0px !important",
+      "maxHeight": "0px !important"
+    },
+    "& .MuiDataGrid-cell": {
+      padding: "0 !important"
+    }
+  }
+});
+var SCDataGrid = (_a) => {
+  var _b = _a, { data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath } = _b, props = __objRest(_b, ["data", "columns", "rowsTable", "checkboxSelection", "width", "height", "maxHeight", "density", "agrupacion", "groupingColDef", "getTreeDataPath"]);
   const apiRef = useGridApiRef();
+  const classes = useStyles();
   LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
   let validationTreeData = getTreeDataPath ? true : false;
-  let validationCheckboxSelection = checkboxSelection || false;
-  let styleDensity = density || "compact";
-  let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
-  let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
-  let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
-  let validationGroupingColDef = groupingColDef || {};
+  let paginalion = 10;
+  let valor = 80;
+  let alto = 345;
+  let estilot = "compact";
+  let tamanoEncabezado = density == "compact" ? 24 : density == "standard" ? 36 : density == "comfortable" ? 52 : 24;
+  let tamanoCelda = density == "compact" ? 22 : density == "standard" ? 28 : density == "comfortable" ? 48 : 22;
+  let dataConvert = [];
   const [groupDataLenght, setGroupDataLengh] = useState10(0);
+  checkboxSelection = checkboxSelection || false;
+  const rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
+  width = width || "100%";
+  density = density || "compact";
+  agrupacion = agrupacion || false;
+  groupingColDef = groupingColDef || {};
+  getTreeDataPath = getTreeDataPath || void 0;
   const [pageSize, setPageSize] = useState10(rows);
   const [arrayRows, setArrayRows] = useState10([]);
+  const [heightTable, setHeightTable] = useState10(height || 0);
   useEffect11(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
+      if (validationTreeData) {
+        countGroupedElements(data, getTreeDataPath);
+      }
     }
   }, [data]);
+  useEffect11(() => {
+    if (groupDataLenght > 0 && validationTreeData == true) {
+      setHeightTable(heightTable ? heightTable : groupDataLenght * tamanoCelda + tamanoEncabezado + 27);
+    } else if (groupDataLenght <= 0 && validationTreeData == false) {
+      setHeightTable(heightTable ? heightTable : rows * tamanoCelda + tamanoEncabezado + 27);
+    }
+  }, [groupDataLenght]);
   const dataConvertRows = (data2, columnId) => {
-    let dataConvert = [];
+    let dataConvert2 = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
       data2.map((item) => {
         const newKeys = {};
         let i = 0;
-        let id = dataConvert.length + 1;
+        let id = dataConvert2.length + 1;
         for (i = 0; i < dataKeys.length; i++) {
           newKeys[dataKeys[i]] = item[dataKeys[i]];
         }
         newKeys.id = columnId ? item[columnId] : id;
-        dataConvert = [...dataConvert, newKeys];
+        dataConvert2 = [...dataConvert2, newKeys];
       });
     }
-    setArrayRows(dataConvert);
+    setArrayRows(dataConvert2);
   };
   const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
   const [selectionModel, setSelectionModel] = useState10([]);
@@ -1685,27 +1737,41 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
       setSelectionModel([...newSelection]);
     }
   };
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, data && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { width: width || "100%", maxHeight } }, /* @__PURE__ */ React14.createElement(
+  const countGroupedElements = (row, getTreeDataPath2) => {
+    const groupedCounts = {};
+    data.forEach((row2) => {
+      const path = getTreeDataPath2(row2) || [];
+      const key = path[0];
+      if (!groupedCounts[key]) {
+        groupedCounts[key] = 0;
+      }
+      groupedCounts[key]++;
+    });
+    setGroupDataLengh(Object.keys(groupedCounts).length);
+    return groupedCounts;
+  };
+  const virtualScrollerHeight = validationTreeData ? groupDataLenght * tamanoCelda + 10 : rows * tamanoCelda;
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, heightTable > 0 ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", flexDirection: "column", width, maxHeight } }, /* @__PURE__ */ React14.createElement(
     DataGridPro,
-    {
-      apiRef,
-      rowHeight: styleRowHeight,
+    __spreadProps(__spreadValues({
+      apiRef
+    }, props), {
       rows: arrayRows,
       columns,
-      density: styleDensity,
+      density,
       treeData: validationTreeData,
       getTreeDataPath,
-      groupingColDef: validationTreeData == true ? validationGroupingColDef : false,
+      groupingColDef: validationTreeData == true ? groupingColDef : false,
       pagination: true,
       initialState: {
         pagination: { paginationModel: { pageSize: rows } }
       },
-      checkboxSelection: validationCheckboxSelection,
+      checkboxSelection,
       rowSelectionModel: selectionModel,
       onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
       isRowSelectable,
       disableRowSelectionOnClick: true,
-      hideFooter: validationTreeData == true ? true : false,
+      className: classes.root,
       localeText: {
         noRowsLabel: "No hay filas",
         columnMenuLabel: "Men\xFA de columna",
@@ -1716,36 +1782,9 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
           labelRowsPerPage: "Filas por p\xE1gina:",
           labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
         }
-      },
-      sx: {
-        "& .MuiDataGrid-filler": {
-          display: "none !important"
-        },
-        "& .MuiDataGrid-footerContainer": {
-          minHeight: "26px !important",
-          height: "26px !important"
-        },
-        "& .MuiTablePagination-toolbar": {
-          minHeight: "25px !important",
-          height: "25px !important"
-        },
-        "& .MuiTablePagination-actions .MuiIconButton-root": {
-          padding: "0px !important"
-        },
-        "&.MuiDataGrid-root": {
-          [`--DataGrid-topContainerHeight`]: `${styleTopContainerHeight} !important`
-        },
-        "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
-          "--height": "0px !important",
-          "minHeight": "0px !important",
-          "maxHeight": "0px !important"
-        },
-        "& .MuiDataGrid-cell": {
-          padding: "0 !important"
-        }
       }
-    }
-  ))));
+    })
+  ))) : "");
 };
 
 // src/Components/SCAutocomplete.tsx