componentes-sinco 1.1.16 → 1.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -2389,8 +2389,7 @@ function SCDrawer({
2389
2389
  setOpen,
2390
2390
  chipFilters,
2391
2391
  heightDrawer = 456,
2392
- filterSideCard,
2393
- ref
2392
+ filterSideCard
2394
2393
  }) {
2395
2394
  const drawerBleeding = heightDrawer;
2396
2395
  const { drawerOpen, handleDrawerClose, toggleDrawer } = useDrawerState({ open, setOpen });
@@ -2417,7 +2416,6 @@ function SCDrawer({
2417
2416
  );
2418
2417
  }
2419
2418
  };
2420
- const containerRef = import_react20.default.useRef(null);
2421
2419
  const handleCleanFilters = () => {
2422
2420
  cleanAllFilters(arrayElements, setTextFilters);
2423
2421
  };
@@ -2464,14 +2462,18 @@ function SCDrawer({
2464
2462
  anchor: anchor != null ? anchor : "left",
2465
2463
  sx: {
2466
2464
  "& .MuiDrawer-paper": {
2467
- width: width != null ? width : "450px",
2465
+ width: filterSideCard ? "100%" : width != null ? width : "450px",
2468
2466
  boxSizing: "border-box",
2469
- borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
2467
+ borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px",
2468
+ 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)"
2469
+ },
2470
+ "&.MuiDrawer-root": {
2471
+ 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)"
2470
2472
  }
2471
2473
  },
2472
2474
  ModalProps: {
2473
- container: ref == null ? void 0 : ref.current,
2474
2475
  keepMounted: true,
2476
+ disablePortal: filterSideCard ? true : false,
2475
2477
  slotProps: {
2476
2478
  root: {
2477
2479
  style: {
@@ -2483,14 +2485,10 @@ function SCDrawer({
2483
2485
  hideBackdrop: true,
2484
2486
  PaperProps: {
2485
2487
  sx: {
2486
- // El Drawer (Paper) se posiciona relativo al contenedor
2487
2488
  position: "absolute !important",
2488
2489
  height: "100%",
2489
- // para que ocupe toda la altura del contenedor
2490
2490
  width: 300,
2491
- // ajusta el ancho como quieras
2492
2491
  right: 0
2493
- // si usas 'top/bottom/left' cámbialos según tu anchor
2494
2492
  }
2495
2493
  }
2496
2494
  },
@@ -3083,8 +3081,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, r
3083
3081
  let validationTreeData = groupColumns ? true : false;
3084
3082
  let validationCheckboxSelection = checkboxSelection || false;
3085
3083
  let styleDensity = density || "compact";
3086
- let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
3087
- let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
3084
+ let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "32px" : styleDensity === "comfortable" ? "40px" : "26px";
3085
+ let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 31 : 32;
3088
3086
  let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length.toString()) : data.length < 10 ? parseInt(data.length.toString()) : 10;
3089
3087
  let validationGroupingColDef = groupingColDefs || {};
3090
3088
  const [groupDataLenght, setGroupDataLengh] = (0, import_react27.useState)(0);
@@ -3228,8 +3226,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, r
3228
3226
  noRowsLabel: "No hay filas",
3229
3227
  columnMenuLabel: "Men\xFA de columna",
3230
3228
  footerTotalRows: "Filas Totales:",
3231
- footerRowSelected: (count) => `${count.toLocaleString()} fila(s) seleccionada(s)`,
3232
- // Ejemplo de traducción dinámica
3229
+ footerRowSelected: () => "",
3230
+ // Ejemplo de traducción dinámica para que diga cuantas filas selecciono count => `${count.toLocaleString()} fila(s) seleccionada(s)`
3233
3231
  MuiTablePagination: {
3234
3232
  labelRowsPerPage: "Filas por p\xE1gina:",
3235
3233
  labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
@@ -3267,7 +3265,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, r
3267
3265
  "maxHeight": "0px !important"
3268
3266
  },
3269
3267
  "& .MuiDataGrid-cell": {
3270
- padding: "0 !important",
3268
+ //padding: '0 !important', //padding de cada celda
3271
3269
  background: "white"
3272
3270
  },
3273
3271
  // Fila seleccionada (cuando selectionModel selecciona filas)
@@ -5703,8 +5701,7 @@ var SCDatePicker = ({ label, required, disabled, background, state, setState, wi
5703
5701
  width: width || "100%",
5704
5702
  background: background || "transparent",
5705
5703
  "& .MuiPickersInputBase-sectionsContainer": {
5706
- padding: "8px 0px",
5707
- height: "32px"
5704
+ padding: "6px 0px"
5708
5705
  }
5709
5706
  },
5710
5707
  slotProps: {
@@ -5837,25 +5834,25 @@ var components = {
5837
5834
  {
5838
5835
  props: { density: "compact" },
5839
5836
  style: {
5840
- "--height": "24px",
5841
- minHeight: "24px !important",
5842
- maxHeight: "24px !important"
5837
+ "--height": "26px",
5838
+ minHeight: "26px !important",
5839
+ maxHeight: "26px !important"
5843
5840
  }
5844
5841
  },
5845
5842
  {
5846
5843
  props: { density: "standard" },
5847
5844
  style: {
5848
- "--height": "36px",
5849
- minHeight: "36px !important",
5850
- maxHeight: "36px !important"
5845
+ "--height": "32px",
5846
+ minHeight: "32px !important",
5847
+ maxHeight: "32px !important"
5851
5848
  }
5852
5849
  },
5853
5850
  {
5854
5851
  props: { density: "comfortable" },
5855
5852
  style: {
5856
- "--height": "52px",
5857
- minHeight: "52px !important",
5858
- maxHeight: "52px !important"
5853
+ "--height": "40px",
5854
+ minHeight: "40px !important",
5855
+ maxHeight: "40px !important"
5859
5856
  }
5860
5857
  }
5861
5858
  ]
@@ -5865,25 +5862,25 @@ var components = {
5865
5862
  {
5866
5863
  props: { density: "compact" },
5867
5864
  style: {
5868
- "--height": "24px",
5869
- minHeight: "24px !important",
5870
- maxHeight: "24px !important"
5865
+ "--height": "26px",
5866
+ minHeight: "26px !important",
5867
+ maxHeight: "26px !important"
5871
5868
  }
5872
5869
  },
5873
5870
  {
5874
5871
  props: { density: "standard" },
5875
5872
  style: {
5876
- "--height": "36px",
5877
- minHeight: "36px !important",
5878
- maxHeight: "36px !important"
5873
+ "--height": "32px",
5874
+ minHeight: "32px !important",
5875
+ maxHeight: "32px !important"
5879
5876
  }
5880
5877
  },
5881
5878
  {
5882
5879
  props: { density: "comfortable" },
5883
5880
  style: {
5884
- "--height": "52px",
5885
- minHeight: "52px !important",
5886
- maxHeight: "52px !important"
5881
+ "--height": "40px",
5882
+ minHeight: "40px !important",
5883
+ maxHeight: "40px !important"
5887
5884
  }
5888
5885
  }
5889
5886
  ]
@@ -5896,25 +5893,25 @@ var components = {
5896
5893
  {
5897
5894
  props: { density: "compact" },
5898
5895
  style: {
5899
- "--height": "24px",
5900
- minHeight: "24px !important",
5901
- maxHeight: "24px !important"
5896
+ "--height": "26px",
5897
+ minHeight: "26px !important",
5898
+ maxHeight: "26px !important"
5902
5899
  }
5903
5900
  },
5904
5901
  {
5905
5902
  props: { density: "standard" },
5906
5903
  style: {
5907
- "--height": "36px",
5908
- minHeight: "36px !important",
5909
- maxHeight: "36px !important"
5904
+ "--height": "32px",
5905
+ minHeight: "32px !important",
5906
+ maxHeight: "32px !important"
5910
5907
  }
5911
5908
  },
5912
5909
  {
5913
5910
  props: { density: "comfortable" },
5914
5911
  style: {
5915
- "--height": "52px",
5916
- minHeight: "52px !important",
5917
- maxHeight: "52px !important"
5912
+ "--height": "40px",
5913
+ minHeight: "40px !important",
5914
+ maxHeight: "40px !important"
5918
5915
  }
5919
5916
  }
5920
5917
  ]
@@ -5947,9 +5944,9 @@ var components = {
5947
5944
  {
5948
5945
  props: { density: "comfortable" },
5949
5946
  style: {
5950
- "--height": "48px",
5951
- minHeight: "48px !important",
5952
- maxHeight: "48px !important"
5947
+ "--height": "40px",
5948
+ minHeight: "40px !important",
5949
+ maxHeight: "40px !important"
5953
5950
  }
5954
5951
  }
5955
5952
  ]
@@ -5982,9 +5979,9 @@ var components = {
5982
5979
  {
5983
5980
  props: { density: "comfortable" },
5984
5981
  style: {
5985
- "--height": "48px",
5986
- minHeight: "48px !important",
5987
- maxHeight: "48px !important"
5982
+ "--height": "40px",
5983
+ minHeight: "40px !important",
5984
+ maxHeight: "40px !important"
5988
5985
  }
5989
5986
  }
5990
5987
  ],