@m4l/components 9.2.60-J24062025.beta.1 → 9.2.60-J25062025.beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -626,6 +626,24 @@ const dataGridStyles = {
    * Estilos para el contenedor del nombre de la columna y el icono de sort
    */
   nameColumnIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1,
+    position: "relative",
+    overflow: "visible"
+  }),
+  /**
+   * Estilos para el contenedor del nombre de la columna
+   */
+  nameColumn: () => ({
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * Estilos para el contenedor del icono de la columna
+   */
+  iconColumn: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -25,7 +25,9 @@ export declare enum TableSlots {
     headerRenderClick = "headerRenderClick",
     menuList = "menuList",
     buttonHeaderActions = "buttonHeaderActions",
-    nameColumnIcon = "nameColumnIcon"
+    nameColumnIcon = "nameColumnIcon",
+    iconColumn = "iconColumn",
+    nameColumn = "nameColumn"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -29,6 +29,8 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["menuList"] = "menuList";
   TableSlots2["buttonHeaderActions"] = "buttonHeaderActions";
   TableSlots2["nameColumnIcon"] = "nameColumnIcon";
+  TableSlots2["iconColumn"] = "iconColumn";
+  TableSlots2["nameColumn"] = "nameColumn";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -48,6 +48,8 @@ export declare const HeaderRenderClickStyled: import('@emotion/styled').StyledCo
 export declare const MenuListStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 export declare const ButtonHeaderActionsStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const NameColumnIconStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const NameColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * ****************
  * Slots TextEditor

package/components/DataGrid/slots/DataGridSlot.js

@@ -104,6 +104,14 @@ const NameColumnIconStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.nameColumnIcon
 })(dataGridStyles.nameColumnIcon);
+const IconColumnStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.iconColumn
+})(dataGridStyles.iconColumn);
+const NameColumnStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.nameColumn
+})(dataGridStyles.nameColumn);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -118,7 +126,7 @@ export {
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   HeaderInputBaseStyled as H,
-  IconSearchStyled as I,
+  IconColumnStyled as I,
   MenuListStyled as M,
   NameColumnIconStyled as N,
   RowsCountRootStyled as R,
@@ -136,8 +144,10 @@ export {
   ColumnsConfigActiosStyled as j,
   ContentModalSettingStyled as k,
   TableContainerStyled as l,
-  DraggableHeaderRootStyled as m,
-  DraggableWrapperInputBaseStyled as n,
-  HeaderRenderClickStyled as o,
-  InputTextEditorStyled as p
+  NameColumnStyled as m,
+  DraggableHeaderRootStyled as n,
+  DraggableWrapperInputBaseStyled as o,
+  IconSearchStyled as p,
+  HeaderRenderClickStyled as q,
+  InputTextEditorStyled as r
 };

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

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, m as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, n as DraggableWrapperInputBaseStyled, I as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, m as NameColumnStyled, I as IconColumnStyled, n as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, o as DraggableWrapperInputBaseStyled, p as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
@@ -104,8 +104,8 @@ function DraggableHeaderRenderer(props) {
     const columnIcons = getColumnIcons();
     if (columnIcons) {
       newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
-        newColumn.name,
-        columnIcons
+        /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
+        /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
       ] });
     }
   }

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, o as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
@@ -128,7 +128,7 @@ function HeaderRenderClick(props) {
         paper: {
           ...paperProps,
           sx: {
-            mt: !activeFilters ? 0 : 6.5,
+            mt: !activeFilters ? 0.3 : 6.5,
             ...paperProps?.sx
           }
         }

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { p as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.60-J24062025.beta.1",
+  "version": "9.2.60-J25062025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {