@m4l/components 9.2.55 → 9.2.56-beta.3

package/components/DataGrid/Datagrid.styles.js

@@ -0,0 +1,600 @@
+import { alpha } from "@mui/material";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const dataGridStyles = {
+  /**
+   * ***************************************************
+   * Estilos para el contenedor principal del DataGrid.
+   * ***************************************************
+   */
+  datagridRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    //padding: theme.vars.size.baseSpacings.sp0,
+    //inset: theme.vars.size.baseSpacings.sp0,
+    //overflow: 'hidden',
+    container: "container / inline-size",
+    background: theme.vars.palette.background.default,
+    //boxShadow: 'unset',
+    borderRadius: theme.vars.size.borderRadius.r1,
+    position: "relative",
+    gap: theme.vars.size.baseSpacings.sp3,
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    overflow: "auto",
+    "& .rdg .MuiCheckbox-root": {
+      "& > svg": {
+        color: theme.vars.palette.text.secondary
+      }
+    },
+    [`&.M4LDataGrid-xs`]: {
+      "& .M4LDataGrid-actions": {
+        height: theme.vars.size.baseSpacings.sp11,
+        "& .M4LPager-labelRowsPerPageContainer": {
+          "& .M4LTypography-root": {
+            display: "none"
+          }
+        },
+        "& .M4LPager-labelDisplayRows": {
+          display: "none"
+        }
+      }
+    },
+    "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
+      top: `${theme.vars.size.baseSpacings.sp0} !important`
+    },
+    "&& .M4lclassCssSpecificity": {
+      fontWeight: 400
+      //Se utiliza directamente el valor porque no está tokenizado
+    }
+  }),
+  customHeader: ({ ownerState }) => ({
+    display: ownerState?.visibleCustomHeader ? "block" : "none"
+  }),
+  /**
+   * Estilos del contenedor de las acciones
+   */
+  actionsRoot: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    background: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    gap: theme.vars.size.baseSpacings.sp1,
+    // Tamaño del contenedor
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "container",
+      (size) => ({
+        minHeight: size,
+        height: size
+      })
+    ),
+    "& .mobile-menu-actions": {
+      marginRight: "auto"
+    }
+  }),
+  /**
+   * Estilos para el contenedor de las acciones ezquierdo
+   */
+  containerLeftActions: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    alignItems: "center"
+  }),
+  /**
+   * Estilos para el contenedor de las acciones derecho
+   */
+  containerRightActions: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    alignItems: "center"
+  }),
+  /**
+   *Estilos para el contenedor de la paginación y filas por página
+   */
+  controlNavigate: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings.sp2,
+    flexWrap: "wrap",
+    height: "fit-content"
+  }),
+  /**
+   * container de los botones de acciones
+   */
+  actionsConfigContainer: ({ theme, ownerState }) => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: ownerState?.withPager ? "space-between" : "flex-end",
+    gap: theme.vars.size.baseSpacings.sp3,
+    alignItems: "center"
+  }),
+  /**
+   * Estilos para el contenedor principal de RowsCount
+   */
+  rowsCountRoot: ({ theme }) => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos para el label de RowsCount
+   */
+  rowsCountLabel: ({ theme, ownerState }) => ({
+    color: theme.vars.palette.text.primary,
+    fontWeight: 400,
+    //Se utiliza directamente el valor porque no está tokenizado
+    height: "100%",
+    lineHeight: theme.vars.size.baseSpacings.sp4,
+    fontSize: getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body").fontSize
+  }),
+  /**
+   * Estilos para el valor de RowsCount
+   */
+  rowsCountValue: ({ theme, ownerState }) => ({
+    background: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.baseSpacings.sp1,
+    paddingBottom: theme.vars.size.baseSpacings["sp0-5"],
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: "6px",
+    //No hay token para este valor
+    paddingTop: theme.vars.size.baseSpacings.sp1,
+    fontSize: getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body").fontSize
+  }),
+  /**
+   * Estilos para el contenedor de las columnas
+   * de la tabla del modal de configuración de columnas.
+   */
+  columnsConfigWrapper: ({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    width: "100%"
+  }),
+  /**
+   * Estilos para la configuración
+   * de selección de las columnas en
+   * el modal de configuración de columnas.
+   */
+  columnsConfigSelColumns: ({ theme, ownerState }) => ({
+    color: theme.vars.palette.text.secondary,
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "bodyDens"
+    )
+  }),
+  /**
+   * Estilos para el contenedor de la tabla
+   * en el modal de configuración de columnas.
+   */
+  columnsConfigDataGrid: ({ theme }) => ({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "auto",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Estilos para el contenedor de los botones
+   * de acción en el modal de configuración de columnas.
+   */
+  columnsConfigActios: ({ theme }) => ({
+    paddingTop: theme.vars.size.baseSpacings.sp4,
+    paddingBottom: theme.vars.size.baseSpacings.sp2,
+    display: "flex",
+    flexDirection: "row"
+  }),
+  /**
+   * *****************************************
+   * Estilos el el input editor del DataGrid.
+   * *****************************************
+   */
+  inputTexEditor: ({ theme }) => ({
+    appearance: "none",
+    boxSizing: "border-box",
+    inlineSize: "100%",
+    blockSize: "100%",
+    paddingBlock: theme.vars.size.baseSpacings.sp0,
+    verticalAlign: "top",
+    textAlign: "right",
+    fontFamily: "inherit",
+    "&:focus": {
+      outline: "none"
+    },
+    "&::placeholder": {
+      opacity: "1"
+    }
+  }),
+  /**
+   * ****************************************
+   * Estilos para los componetes Table
+   * ****************************************
+   */
+  /**
+   * Estilos para el contenedor principal
+   * del componente Table.
+   */
+  tableContaniner: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    flexGrow: 1,
+    overflow: "hidden",
+    borderRadius: theme.vars.size.baseSpacings.sp1,
+    border: "none",
+    boxshadow: theme.customShadows?.z2,
+    background: theme.vars.palette.background.default,
+    ["@container main (max-width: 600px)"]: {
+      top: theme.vars.size.baseSpacings.sp11
+    }
+  }),
+  /**
+   * Estilos para el contenedor del dataGrid
+   */
+  tableWrapperDataGrid: ({ theme, ownerState }) => {
+    return {
+      position: "relative",
+      height: "100%",
+      overflow: "hidden",
+      borderRadius: theme.vars.size.borderRadius.r1,
+      border: theme.vars.size.borderStroke.container,
+      borderColor: theme.vars.palette?.border.default,
+      "& .rdg ": {
+        border: "none",
+        background: theme.vars.palette.background.default,
+        gridColumnGap: theme.vars.size.baseSpacings.sp0,
+        gridRowGap: theme.vars.size.baseSpacings.sp0,
+        userSelect: "initial",
+        height: "100%",
+        contentVisibility: "unset",
+        overflow: "auto",
+        padding: theme.vars.size.baseSpacings.sp0,
+        "--rdg-grid-inline-size": theme.vars.size.baseSpacings.sp0,
+        "--rdg-header-background-color": theme.vars.palette.primary.opacity,
+        "--rdg-row-selected-background-color": theme.vars.palette.primary.opacity,
+        "--rdg-row-hover-background-color": theme.vars.palette.primary.opacity,
+        "--rdg-background-color": theme.vars.palette.background.default,
+        "--rdg-selection-color": theme.vars.palette.primary.focusVisible,
+        "--row-selected-hover-background-color": theme.vars.palette.primary.toneOpacity,
+        "--rdg-checkbox-color": theme.vars.palette.primary.enabled,
+        "--rdg-checkbox-focus-color": alpha(
+          theme.colorSchemes.finalTheme.palette.primary.enabled,
+          theme.colorSchemes.finalTheme.palette.action.selectedOpacity
+        ),
+        "--rdg-row-header-height": "var(--rdg-row-height)",
+        "--rdg-border-color": "none",
+        "&:last-child .rdg-cell": {
+          border: "unset!important",
+          boxShadow: `inset 0 0.5px 0 0 ${theme.vars.palette?.border.secondary}`
+        }
+      },
+      '& [role="columnheader"]': {
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: theme.vars.size.baseSpacings.sp2,
+        paddingBottom: theme.vars.size.baseSpacings.sp2
+      },
+      '& [role="grid"]': {
+        '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
+          borderTopRightRadius: theme.vars.size.baseSpacings.sp3
+        },
+        '& [aria-rowindex="2"].rdg-row .rdg-cell': {
+          boxShadow: `unset`
+        }
+      },
+      "& .rdg-row": {
+        '&[aria-selected="false"] .rdg-cell': {
+          backgroundColor: theme.vars.palette.background.default
+        },
+        "&:nth-of-type(odd)": {
+          "& .rdg-cell": {
+            backgroundColor: theme.vars.palette.background.default
+          }
+        },
+        '&[aria-selected="true"] .rdg-cell': {
+          backgroundColor: theme.vars.palette.primary?.toneOpacity
+        },
+        "&:hover": {
+          "& .rdg-cell": {
+            backgroundColor: `${theme.vars.palette.default.toneOpacity} !important`,
+            transition: "background-color 0.1s linear"
+          }
+        },
+        backgroundColor: "transparent"
+      },
+      "& .rdg-cell": {
+        color: theme.vars.palette.text.primary,
+        display: "inline",
+        justifyContent: "center",
+        alignItems: "center",
+        textOverflow: "inline",
+        gridTemplateColumns: "auto",
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState?.size || "medium",
+          "body"
+        ),
+        lineHeight: "var(--rdg-row-height)!important",
+        "& .checkbox-checked": {
+          "& path:first-of-type": {
+            fill: theme.vars.palette.primary.main
+          },
+          ...getSizeStyles(
+            theme,
+            ownerState?.size || "medium",
+            "base",
+            (size) => ({
+              minHeight: size,
+              height: size
+            })
+          )
+        },
+        "& .checkbox-unChecked": {
+          "& path": {
+            fill: theme.vars.palette.text.primary
+          },
+          ...getSizeStyles(
+            theme,
+            ownerState?.size || "medium",
+            "base",
+            (size) => ({
+              minHeight: size,
+              height: size
+            })
+          )
+        },
+        "& .rdg-text-editor": {
+          textAlign: "inherit",
+          color: theme.vars.palette.text.secondary,
+          padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
+          border: theme.vars.size.baseSpacings.sp0,
+          borderTop: "0.5px solid",
+          //Se deja el valor directamente porque no está tokenizado
+          borderBottom: theme.vars.size.borderStroke.container,
+          borderLeft: "0.5px solid",
+          //Se deja el valor directamente porque no está tokenizado
+          borderRight: "0.5px solid",
+          //Se deja el valor directamente porque no está tokenizado
+          borderColor: `${theme.vars.palette?.border.disabled} !important`,
+          ...theme.colorSchemes.finalTheme.typography.body
+        },
+        "&.rdg-cell-frozen": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          boxShadow: "unset"
+        },
+        "&:after": {
+          content: `""`,
+          borderRight: `${theme.vars.size.baseSpacings.sp0} solid ${theme.vars.palette.divider}`,
+          position: "absolute",
+          right: theme.vars.size.baseSpacings.sp0,
+          // Por desajuste en chrome en el espaciado
+          height: "100%"
+        },
+        "& .m4l_icon": {
+          height: "100%"
+        }
+      },
+      '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
+        ...theme.colorSchemes.finalTheme.typography.bodyDens,
+        //ajuste de contenido filtro del DataGrid
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState?.size || "medium",
+          "bodyDens"
+        ),
+        lineHeight: "var(--rdg-summary-row-height)!important",
+        color: `${theme.vars.palette.text.secondary}`
+      },
+      '& .rdg-cell[role="columnheader"].filter-cell': {
+        "& .M4LDataGrid-draggableHeaderRoot": {
+          gap: theme.vars.size.baseSpacings.sp3,
+          "& .rdg-header-sort-cell": {
+            maxHeight: "min-content"
+          },
+          "& .rdg-header-sort-name": {
+            lineHeight: "1!important"
+          }
+        }
+      },
+      // Esta condicion para el flujo de cabecera cuando no tiene utilidad sort
+      '& .rdg-cell[role="columnheader"] [draggable="true"]': {
+        fontWeight: 600
+        //Se utiliza directamente el valor porque no está tokenizado
+      },
+      "&&& [aria-selected=true]": {
+        backgroundColor: theme.vars.palette.primary?.toneOpacity,
+        color: theme.vars.palette.text.primary,
+        //cambia el color del contorno de cada celda selecionada
+        outline: theme.vars.size.borderStroke.container,
+        outlineOffset: "-1px",
+        outlineColor: theme.vars.palette.border.main
+      },
+      // Alineaciones
+      "& .rdg-cell.rdg-cell-align-left": {
+        textAlign: "start",
+        display: "inline",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      "& .rdg-cell.rdg-cell-align-center": {
+        textAlign: "center",
+        alignContent: "center"
+      },
+      "& .rdg-cell.rdg-cell-align-right": {
+        textAlign: "right"
+      },
+      '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
+        textAlign: "start",
+        display: "inline",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
+        textAlign: "center",
+        alignContent: "center"
+      },
+      '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
+        textAlign: "right"
+      },
+      // Estilado de la ultima celda congelada
+      "& .rdg-row .rdg-cell-frozen-last:after": {
+        borderRight: `0px solid transparent`
+      },
+      // Estilado de la ultima celda (Quitar la linea divisora derecha)
+      "& .rdg-row :last-child:after": {
+        borderRight: `0px solid`,
+        borderColor: theme.vars.palette.background.surface
+      },
+      "& .rdg-header-row": {
+        backgroundColor: theme.vars.palette.background.base
+      },
+      // Estilado de celdas de la cabecera
+      "& .rdg-header-row .rdg-cell": {
+        gridTemplateColumns: "auto",
+        placeContent: "center",
+        boxShadow: "unset!important",
+        borderBottom: theme.vars.size.borderStroke.container,
+        borderColor: `${theme.vars.palette?.background.surface}!important`,
+        "&:hover": {
+          boxShadow: `inset 1px 0 0 0 ${theme.vars.palette?.border.default}, inset -1px 0 0 0 ${theme.vars.palette?.border.default}!important `
+        },
+        '& [draggable="true"]': {
+          fontSize: theme.typography.body
+        },
+        // Ultima celda de la cebecera frozen
+        "&.rdg-cell-frozen-last": {
+          borderColor: theme.vars.palette.background.default,
+          boxShadow: "var(--rdg-frozen-cell-box-shadow)"
+        },
+        "& .rdg-header-sort-cell": {
+          "& .rdg-header-sort-name + span": {
+            position: "absolute",
+            margin: "auto",
+            right: theme.vars.size.baseSpacings.sp2,
+            "& .rdg-sort-arrow": {
+              width: theme.vars.size.baseSpacings.sp2
+            }
+          }
+        },
+        // Modificar el tamaño de la flecha
+        "& .rdg-sort-arrow": {}
+      },
+      // Estilado de la ultima celda Header
+      "& .rdg-header-row :last-child.rdg-cell": {
+        borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
+        "&:after": {
+          borderRight: `${theme.vars.size.baseSpacings.sp0} solid transparent`
+        }
+      },
+      // filter
+      "& .filter_cell_div": {
+        paddingLeft: theme.vars.size.baseSpacings.sp2,
+        paddingRight: theme.vars.size.baseSpacings.sp2
+      },
+      //
+      "& .rdg-header-sort-cell": {
+        width: "100%",
+        flexGrow: "1",
+        alignItems: "center",
+        color: theme.vars.palette.text.primary,
+        height: "100%"
+      }
+    };
+  },
+  /**
+   * Estilos para el header del componente
+   */
+  draggableHeaderRoot: () => ({
+    cursor: "move",
+    display: "flex",
+    flexDirection: "column",
+    lineHeight: "1",
+    height: "100%",
+    justifyContent: "center",
+    textAlign: "center"
+  }),
+  /**
+   * Estilos para el icono de busqueda para los campos de ordenamiento en columnas
+   */
+  iconSearch: {},
+  /**
+   * Estilos para el contenedor del input de header
+   */
+  draggableWrapperInputBase: ({ theme, ownerState }) => ({
+    borderTop: "1px solid var(--rdg-border-color)",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: theme.vars.palette.default.enabled,
+    padding: theme.vars.size.baseSpacings.sp1,
+    gap: theme.vars.size.baseSpacings.sp1,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "action",
+      (size) => ({
+        minHeight: size,
+        height: size
+      })
+    )
+  }),
+  /**
+   * Estilos de los inputs del header para el filtro
+   */
+  headerInputBase: () => ({
+    width: "100%",
+    padding: "unset",
+    backgroundColor: "unset"
+  }),
+  /**
+   * Estilos para el contenedor del skeleton de los formatter
+   */
+  wrapperSkeleton: ({ theme, ownerState }) => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    "& .MuiSkeleton-root": {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "base",
+        (size) => ({
+          minHeight: `${size}!important`,
+          height: `${size}!important`
+        })
+      )
+    }
+  }),
+  /**
+   * Estilos para el contenedor del cuerpo del modal de configuración
+   */
+  contentModalSetting: () => ({
+    "&": {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    }
+  })
+};
+export {
+  dataGridStyles as d
+};

package/components/DataGrid/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 export declare const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 export declare const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+export declare const TEST_SKELETON = "data-skeleton";
 export declare enum DATAGRID_SEMANTIC_WIDTHS {
     actions = 40,
     bigChip = 190,

package/components/DataGrid/constants.js

@@ -1,6 +1,7 @@
 const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+const TEST_SKELETON = "data-skeleton";
 var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["actions"] = 40] = "actions";
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigChip"] = 190] = "bigChip";
@@ -25,6 +26,7 @@ var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
 })(DATAGRID_SEMANTIC_WIDTHS || {});
 export {
   DATAGRID_PREFIX_NAME as D,
+  TEST_SKELETON as T,
   DATAGRID_SELECT_COLUMN_KEY as a,
   DATAGRID_SEMANTIC_WIDTHS as b,
   DATAGRID_ACTIONS_COLUMN_KEY as c