componentes-sinco 1.1.15 → 1.1.17

package/dist/index.cjs

@@ -1406,7 +1406,13 @@ var SCTextField = ({
       fullWidth: true,
       size: size ? size : "medium",
       variant,
-      sx: { background: background || "transparent", borderRadius: "4px" }
+      sx: {
+        background: background || "transparent",
+        borderRadius: "4px",
+        "& .MuiOutlinedInput-input": {
+          padding: "6px 0px 6px 14px"
+        }
+      }
     },
     /* @__PURE__ */ import_react12.default.createElement(
       import_material6.InputLabel,
@@ -1415,7 +1421,13 @@ var SCTextField = ({
         htmlFor: "",
         required: required && label !== "" ? true : false,
         error,
-        disabled: disabled || false
+        disabled: disabled || false,
+        sx: {
+          "&.MuiInputLabel-outlined": {
+            transform: "translate(14px, 8px) scale(1)"
+            // <-- tu transform
+          }
+        }
       },
       label ? label : ""
     ),
@@ -2154,6 +2166,9 @@ var SCDateRange = ({
               "& .MuiInputLabel-asterisk": {
                 color: "error.main"
               },
+              "& .MuiPickersOutlinedInput-sectionsContainer": {
+                padding: "6px 0px"
+              },
               background: background != null ? background : "transparent"
             }
           };
@@ -2310,15 +2325,15 @@ var DrawerActions = ({ actions, anchor }) => {
       height: "42px",
       alignItems: "center",
       flexWrap: "nowrap",
-      justifyContent: actions.length > 1 ? "space-between" : anchor !== "right" ? "flex-end" : "flex-start",
-      flexDirection: anchor !== "right" ? "row-reverse" : "row"
+      justifyContent: actions.length > 1 ? "space-between" : "flex-start",
+      flexDirection: "row-reverse"
     },
     actions.map((btn, index) => /* @__PURE__ */ import_react18.default.createElement(
       import_material12.Button,
       {
         key: index,
         variant: index === 0 || actions.length < 2 ? "contained" : "text",
-        color: "primary",
+        color: btn.color ? btn.color : "primary",
         onClick: btn.fn,
         disabled: btn.disabled || false,
         size: "small",
@@ -2338,7 +2353,8 @@ var DrawerHeader = ({
   title,
   colorTitle,
   onClose,
-  anchor
+  anchor,
+  filterSideCard
 }) => {
   return /* @__PURE__ */ import_react19.default.createElement(
     import_Grid3.default,
@@ -2346,9 +2362,9 @@ var DrawerHeader = ({
       container: true,
       sx: {
         marginTop: anchor == "bottom" ? "16px" : "0px",
-        backgroundColor: anchor == "bottom" ? "white" : "primary.50",
+        backgroundColor: anchor == "bottom" ? "white" : filterSideCard ? "#EAEBEC" : "primary.50",
         alignItems: "center",
-        height: "42px",
+        height: filterSideCard ? "38px" : "42px",
         textAlign: "left",
         padding: "8px 12px",
         justifyContent: "space-between",
@@ -2356,7 +2372,7 @@ var DrawerHeader = ({
       }
     },
     /* @__PURE__ */ import_react19.default.createElement(import_material13.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"),
-    /* @__PURE__ */ import_react19.default.createElement(import_material13.IconButton, { onClick: onClose }, /* @__PURE__ */ import_react19.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))
+    filterSideCard ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, filterSideCard) : /* @__PURE__ */ import_react19.default.createElement(import_material13.IconButton, { onClick: onClose }, /* @__PURE__ */ import_react19.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))
   );
 };
 
@@ -2372,7 +2388,9 @@ function SCDrawer({
   open,
   setOpen,
   chipFilters,
-  heightDrawer = 456
+  heightDrawer = 456,
+  filterSideCard,
+  ref
 }) {
   const drawerBleeding = heightDrawer;
   const { drawerOpen, handleDrawerClose, toggleDrawer } = useDrawerState({ open, setOpen });
@@ -2399,6 +2417,7 @@ function SCDrawer({
       );
     }
   };
+  const containerRef = import_react20.default.useRef(null);
   const handleCleanFilters = () => {
     cleanAllFilters(arrayElements, setTextFilters);
   };
@@ -2441,13 +2460,37 @@ function SCDrawer({
     import_material14.Drawer,
     {
       open: drawerOpen,
-      onClose: toggleDrawer(false),
+      onClose: filterSideCard ? void 0 : toggleDrawer(false),
       anchor: anchor != null ? anchor : "left",
       sx: {
         "& .MuiDrawer-paper": {
-          width: width != null ? width : "450px",
+          width: filterSideCard ? "100%" : width != null ? width : "450px",
           boxSizing: "border-box",
-          borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
+          borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px",
+          boxShadow: filterSideCard ? "none !important" : "0px 8px 10px -5px rgba(24, 39, 75, 0.2), 0px 16px 24px 2px rgba(24, 39, 75, 0.14), 0px 6px 30px 5px rgba(24, 39, 75, 0.12)"
+        },
+        "&.MuiDrawer-root": {
+          boxShadow: filterSideCard ? "none !important" : "0px 3px 1px -2px rgba(24, 39, 75, 0.20),0px 2px 2px 0px rgba(24, 39, 75, 0.14),0px 1px 5px 0px rgba(24, 39, 75, 0.12)"
+        }
+      },
+      ModalProps: {
+        container: ref == null ? void 0 : ref.current,
+        keepMounted: true,
+        slotProps: {
+          root: {
+            style: {
+              position: "absolute"
+            }
+          }
+        }
+      },
+      hideBackdrop: true,
+      PaperProps: {
+        sx: {
+          position: "absolute !important",
+          height: "100%",
+          width: 300,
+          right: 0
         }
       }
     },
@@ -2456,7 +2499,9 @@ function SCDrawer({
       {
         title,
         colorTitle,
-        onClose: handleDrawerClose
+        onClose: handleDrawerClose,
+        anchor,
+        filterSideCard
       }
     ), /* @__PURE__ */ import_react20.default.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ import_react20.default.createElement(DrawerActions, { actions: drawerActions, anchor }))
   ) : /* @__PURE__ */ import_react20.default.createElement(
@@ -2885,7 +2930,7 @@ var import_x_license2 = require("@mui/x-license");
 var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"), 1);
 var import_KeyboardArrowUp = __toESM(require("@mui/icons-material/KeyboardArrowUp"), 1);
 var import_styles = require("@mui/material/styles");
-function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, checkboxSelection, width, maxHeight, disableColumnMenu, disableColumnSorting }) {
+function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableColumnSorting, setSelectedIndex, selectedIndex = 0, setSelectedRow, selectedRow }) {
   import_x_license2.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
@@ -2913,7 +2958,6 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
     renderCell: (params) => {
       var _a, _b;
       let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
-      debugger;
       let maxDepth = 0;
       if (groupColumns && data.length > 0) {
         const sampleItem = groupColumns(data[0]);
@@ -3036,24 +3080,32 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
       }
     }
   };
-  let densityC = "compact";
   let validationTreeData = groupColumns ? true : false;
   let validationCheckboxSelection = checkboxSelection || false;
-  let styleDensity = densityC || "compact";
-  let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
-  let styleRowHeight = densityC == "compact" ? 32 : densityC == "standard" ? 28 : densityC == "comfortable" ? 36 : 32;
+  let styleDensity = density || "compact";
+  let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "32px" : styleDensity === "comfortable" ? "40px" : "26px";
+  let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 31 : 32;
   let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length.toString()) : data.length < 10 ? parseInt(data.length.toString()) : 10;
   let validationGroupingColDef = groupingColDefs || {};
   const [groupDataLenght, setGroupDataLengh] = (0, import_react27.useState)(0);
   const [pageSize, setPageSize] = (0, import_react27.useState)(rows);
   const [arrayRows, setArrayRows] = (0, import_react27.useState)([]);
   const [selectionModel, setSelectionModel] = (0, import_react27.useState)([]);
+  (0, import_react27.useEffect)(() => {
+    var _a;
+    debugger;
+    if (setSelectedRow) {
+      setSelectedRow(arrayRows[selectedIndex]);
+      setSelectionModel(((_a = arrayRows[selectedIndex]) == null ? void 0 : _a.id) ? [arrayRows[selectedIndex].id] : []);
+    }
+  }, [selectedIndex]);
   (0, import_react27.useEffect)(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
     }
   }, [data]);
   const dataConvertRows = (data2, columnId) => {
+    var _a;
     let dataConvert = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
@@ -3068,9 +3120,15 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
         dataConvert = [...dataConvert, newKeys];
       });
     }
+    debugger;
     setArrayRows(dataConvert);
+    if (arrayRows.length == 0 && (groupDataLenght < 1 && validationTreeData != true)) {
+      setSelectedRow && setSelectedRow(dataConvert[selectedIndex]);
+      setSelectionModel([(_a = dataConvert[0]) == null ? void 0 : _a.id]);
+    }
   };
   const handleSelectionChange = (newSelection) => {
+    debugger;
     if (groupDataLenght > 0 && validationTreeData == true) {
       let numberGrouped = 0;
       let idsRowSelectBefore = [];
@@ -3091,6 +3149,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
           }
         }
       });
+      debugger;
       if (idRowSelect !== null) {
         const soloEnArr1 = idsRowSelectBefore.filter((elemento) => !idRowSelect.includes(elemento));
         const hasCommonElements = idsRowSelectBefore.some((element) => idRowSelect.includes(element));
@@ -3101,7 +3160,13 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
         }
       }
     } else {
+      debugger;
       setSelectionModel([...newSelection]);
+      const selectedId = newSelection[0];
+      const index = arrayRows.findIndex((row) => row.id === selectedId);
+      if (index !== -1 && setSelectedIndex) {
+        setSelectedIndex(index);
+      }
     }
   };
   const processedColumns = columns.map((col) => {
@@ -3135,7 +3200,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
   }, [columnVisibilityModel, apiRef]);
   return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, data && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react27.default.createElement(
     import_x_data_grid_pro.DataGridPro,
-    {
+    __spreadProps(__spreadValues({
       getRowId,
       apiRef,
       rowHeight: styleRowHeight,
@@ -3155,16 +3220,16 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
       checkboxSelection: validationCheckboxSelection,
       rowSelectionModel: selectionModel,
       onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
-      isRowSelectable,
-      disableRowSelectionOnClick: true,
+      isRowSelectable
+    }, rowSelection != true ? { disableRowSelectionOnClick: true } : {}), {
       hideFooter: validationTreeData == true ? true : false,
       disableColumnResize: false,
       localeText: {
         noRowsLabel: "No hay filas",
         columnMenuLabel: "Men\xFA de columna",
         footerTotalRows: "Filas Totales:",
-        footerRowSelected: (count) => `${count.toLocaleString()} fila(s) seleccionada(s)`,
-        // Ejemplo de traducción dinámica
+        footerRowSelected: () => "",
+        // Ejemplo de traducción dinámica para que diga cuantas filas selecciono count => `${count.toLocaleString()} fila(s) seleccionada(s)`
         MuiTablePagination: {
           labelRowsPerPage: "Filas por p\xE1gina:",
           labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
@@ -3175,9 +3240,16 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
         "& .MuiDataGrid-filler": {
           display: "none !important"
         },
+        "& .MuiDataGrid-columnHeader": {
+          backgroundColor: "#FBFBFB"
+        },
+        "& .MuiDataGrid-columnSeparator": {
+          display: "none"
+        },
         "& .MuiDataGrid-footerContainer": {
           minHeight: "26px !important",
-          height: "26px !important"
+          height: "26px !important",
+          backgroundColor: "#FBFBFB"
         },
         "& .MuiTablePagination-toolbar": {
           minHeight: "25px !important",
@@ -3198,6 +3270,10 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
           padding: "0 !important",
           background: "white"
         },
+        // Fila seleccionada (cuando selectionModel selecciona filas)
+        "& .MuiDataGrid-row.Mui-selected .MuiDataGrid-cell": {
+          backgroundColor: "#2063A014"
+        },
         // Ocultar celdas vacías completamente
         "& .MuiDataGrid-cellEmpty": {
           display: "none !important",
@@ -3276,7 +3352,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, c
           visibility: "hidden !important"
         }
       }
-    }
+    })
   ))));
 }
 var SCDataGrid = import_react27.default.memo(SCDataGridInitial, (prevProps, nextProps) => {
@@ -4736,7 +4812,7 @@ var SCTime = ({
             )),
             sx: {
               backgroundColor: background,
-              padding: "8px 12px",
+              padding: "6px 12px",
               cursor: disabled ? "default" : "pointer",
               "& input": {
                 cursor: disabled ? "default" : "pointer"
@@ -5010,7 +5086,7 @@ var SCActivityCalendar = ({
               subtitle: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, configRangeHour && new Date(event2.date.replace("00:00:00", event2.startTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getHours() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getHours() && new Date(event2.date.replace("00:00:00", event2.startTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getMinutes() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getMinutes() ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, "Todo el dia"), /* @__PURE__ */ import_react50.default.createElement(import_LightModeOutlined.default, { fontSize: "small" })) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ import_react50.default.createElement(import_ArrowForward.default, { fontSize: "small" }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
               iconLeftColor: event2.state === "Finalizada" ? "#C7E49D" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",
-              description: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
+              description: /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { display: "flex", flexDirection: "column", alignItems: "flex-start" }, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5, sx: { marginLeft: "7px" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "body2" }, event2.equipmentDescription)),
               divider: eventosDelDia.length === idx + 1 ? false : true,
               colorDisabled: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
               fn: fn ? () => fn(event2) : void 0
@@ -5625,10 +5701,10 @@ var SCDatePicker = ({ label, required, disabled, background, state, setState, wi
       sx: {
         minWidth: 140,
         width: width || "100%",
+        background: background || "transparent",
         "& .MuiPickersInputBase-sectionsContainer": {
-          padding: "8px 0px"
-        },
-        background: background || "transparent"
+          padding: "6px 0px"
+        }
       },
       slotProps: {
         popper: {
@@ -5760,25 +5836,25 @@ var components = {
           {
             props: { density: "compact" },
             style: {
-              "--height": "24px",
-              minHeight: "24px !important",
-              maxHeight: "24px !important"
+              "--height": "26px",
+              minHeight: "26px !important",
+              maxHeight: "26px !important"
             }
           },
           {
             props: { density: "standard" },
             style: {
-              "--height": "36px",
-              minHeight: "36px !important",
-              maxHeight: "36px !important"
+              "--height": "32px",
+              minHeight: "32px !important",
+              maxHeight: "32px !important"
             }
           },
           {
             props: { density: "comfortable" },
             style: {
-              "--height": "52px",
-              minHeight: "52px !important",
-              maxHeight: "52px !important"
+              "--height": "40px",
+              minHeight: "40px !important",
+              maxHeight: "40px !important"
             }
           }
         ]
@@ -5788,25 +5864,25 @@ var components = {
           {
             props: { density: "compact" },
             style: {
-              "--height": "24px",
-              minHeight: "24px !important",
-              maxHeight: "24px !important"
+              "--height": "26px",
+              minHeight: "26px !important",
+              maxHeight: "26px !important"
             }
           },
           {
             props: { density: "standard" },
             style: {
-              "--height": "36px",
-              minHeight: "36px !important",
-              maxHeight: "36px !important"
+              "--height": "32px",
+              minHeight: "32px !important",
+              maxHeight: "32px !important"
             }
           },
           {
             props: { density: "comfortable" },
             style: {
-              "--height": "52px",
-              minHeight: "52px !important",
-              maxHeight: "52px !important"
+              "--height": "40px",
+              minHeight: "40px !important",
+              maxHeight: "40px !important"
             }
           }
         ]
@@ -5819,25 +5895,25 @@ var components = {
           {
             props: { density: "compact" },
             style: {
-              "--height": "24px",
-              minHeight: "24px !important",
-              maxHeight: "24px !important"
+              "--height": "26px",
+              minHeight: "26px !important",
+              maxHeight: "26px !important"
             }
           },
           {
             props: { density: "standard" },
             style: {
-              "--height": "36px",
-              minHeight: "36px !important",
-              maxHeight: "36px !important"
+              "--height": "32px",
+              minHeight: "32px !important",
+              maxHeight: "32px !important"
             }
           },
           {
             props: { density: "comfortable" },
             style: {
-              "--height": "52px",
-              minHeight: "52px !important",
-              maxHeight: "52px !important"
+              "--height": "40px",
+              minHeight: "40px !important",
+              maxHeight: "40px !important"
             }
           }
         ]
@@ -5870,9 +5946,9 @@ var components = {
           {
             props: { density: "comfortable" },
             style: {
-              "--height": "48px",
-              minHeight: "48px !important",
-              maxHeight: "48px !important"
+              "--height": "40px",
+              minHeight: "40px !important",
+              maxHeight: "40px !important"
             }
           }
         ]
@@ -5905,9 +5981,9 @@ var components = {
           {
             props: { density: "comfortable" },
             style: {
-              "--height": "48px",
-              minHeight: "48px !important",
-              maxHeight: "48px !important"
+              "--height": "40px",
+              minHeight: "40px !important",
+              maxHeight: "40px !important"
             }
           }
         ],
@@ -6672,7 +6748,7 @@ var components = {
     styleOverrides: {
       root: {
         "&.MuiAutocomplete-root .MuiOutlinedInput-root": {
-          padding: "6px 14px 6px 10px !important"
+          padding: "3px 14px 4px 10px !important"
         },
         "& .MuiAutocomplete-endAdornment": {
           top: "calc(50% - 12px)",