@m4l/components 9.2.62-JT08072025.beta.1 → 9.2.62-JT09072025.beta.2

package/components/DataGrid/Datagrid.styles.js

@@ -406,9 +406,9 @@ const dataGridStyles = {
         ...theme.colorSchemes.finalTheme.typography.bodyDens,
         //ajuste de contenido filtro del DataGrid
         width: "100%",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
@@ -446,6 +446,7 @@ const dataGridStyles = {
         textAlign: "start",
         display: "inline",
         justifyContent: "center",
+        alignContent: "center",
         alignItems: "center",
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
@@ -466,6 +467,7 @@ const dataGridStyles = {
       },
       "& .rdg-cell.rdg-cell-align-right": {
         textAlign: "right",
+        alignContent: "center",
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginLeft: "auto"
@@ -474,17 +476,14 @@ const dataGridStyles = {
         }
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
-        textAlign: "start",
-        display: "inline",
-        justifyContent: "center",
-        alignItems: "center"
+        textAlign: "start"
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
-        textAlign: "center",
-        alignContent: "center"
+        textAlign: "center"
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
-        textAlign: "right"
+        textAlign: "right",
+        paddingRight: theme.vars.size.baseSpacings.sp3
       },
       // Estilado de la ultima celda congelada
       "& .rdg-row .rdg-cell-frozen-last:after": {

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -103,7 +103,19 @@ function DraggableHeaderRenderer(props) {
   if (!newColumn.withinHeaderRenderer) {
     const columnIcons = getColumnIcons();
     if (columnIcons) {
-      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
+      const getJustifyContent = () => {
+        switch (column.align) {
+          case "left":
+            return "flex-start";
+          case "center":
+            return "center";
+          case "right":
+            return "flex-end";
+          default:
+            return "flex-start";
+        }
+      };
+      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { style: { justifyContent: getJustifyContent() }, children: [
         /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
         /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
       ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-JT08072025.beta.1",
+  "version": "9.2.62-JT09072025.beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/DataGrid/DataGrid.stories.d.ts

@@ -23,6 +23,10 @@ export declare const DatagridWithFormatters: Story;
  * DataGrid con columns with actions
  */
 export declare const DatagridWithActions: Story;
+/**
+ * DataGrid con columnas con alineación
+ */
+export declare const DatagridWithAlign: Story;
 /**
  * DataGrid sin pager
  */

package/storybook/components/DataGrid/helpers/types.d.ts

@@ -1,6 +1,7 @@
 import { HeaderRendererProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../src/utils/types';
+import { ColumnAlign } from '../../../../src/components/DataGrid/types';
 export interface SeedProps {
     quantity: number;
     withBoolean?: boolean;
@@ -20,6 +21,8 @@ export interface SeedProps {
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
     withUserType?: boolean;
+    aligns?: Record<string, ColumnAlign>;
+    names?: Record<string, string>;
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';

package/storybook/components/DataGrid/helpers/useColumns.d.ts

@@ -1,4 +1,5 @@
-import { GetColumnsProps, RowType, Column } from './types';
+import { GetColumnsProps, RowType } from './types';
+import { Column } from 'react-data-grid';
 /**
  * ****************************************************************
  * Función que retorna las columnas para el DataGrid de Storybook

package/storybook/components/DataGrid/helpers/useSeed.d.ts

@@ -3,7 +3,7 @@ import { SeedProps } from './types';
  * Función que retorna el seed para el DataGrid de Storybook
  */
 export declare const useSeed: (props: SeedProps) => {
-    columns: readonly import('./types').Column<import('./types').RowType, unknown>[];
+    columns: readonly import('react-data-grid').Column<import('./types').RowType, unknown>[];
     filters: import('../../../../src').FilterField[];
     sorts: import('../../../../src').SortField[];
     rows: import('./types').RowType[];