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

package/components/DataGrid/Datagrid.styles.js

@@ -625,11 +625,28 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor del nombre de la columna y el icono de sort
    */
-  nameColumnIcon: () => ({
+  nameColumnIcon: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: "5px"
+    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
   }),
   /**
    * Estilos para el popover del header actions

package/components/DataGrid/icons.d.ts

@@ -15,6 +15,7 @@ export declare const pathIcons: {
     search: string;
     sortAsc: string;
     sortDesc: string;
+    filter2: string;
     removeSort: string;
     freezeColumn: string;
     unfreezeColumn: string;

package/components/DataGrid/icons.js

@@ -15,6 +15,7 @@ const pathIcons = {
   search: "frontend/components/data_grid/assets/icons/search.svg",
   sortAsc: "frontend/components/data_grid/assets/icons/sort_asc.svg",
   sortDesc: "frontend/components/data_grid/assets/icons/sort_desc.svg",
+  filter2: "frontend/components/data_grid/assets/icons/filter.svg",
   removeSort: "frontend/components/data_grid/assets/icons/eraser.svg",
   freezeColumn: "frontend/components/data_grid/assets/icons/pin.svg",
   unfreezeColumn: "frontend/components/data_grid/assets/icons/pin-off.svg",

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/hooks/useHeaderMenuActions.js

@@ -21,7 +21,10 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     if (!columnKey) {
       return false;
     }
-    return column?.sortable !== false ? defaultSortable : false;
+    if (typeof column?.sortable === "boolean") {
+      return column.sortable;
+    }
+    return defaultSortable;
   }, [columnKey, column, defaultSortable]);
   const canSortExternally = useMemo(() => {
     if (!columnKey || !externalSortSettings) {
@@ -208,7 +211,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     const filterAction = externalFilterSettings ? [
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`,
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`,
         label: getLabel(DICTIONARY.ADD_FILTER_COLUMN),
         dataTestId: "filter-add",
         onClick: () => {

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";
@@ -20,14 +20,16 @@ function DraggableHeaderRenderer(props) {
   } = props;
   const { ref, tabIndex } = useFocusRef(isCellSelected);
   const { getLabel } = useModuleDictionary();
-  const { size, classes } = useDataGrid();
+  const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
-  const { externalSortSettings } = useDataGrid();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
   const currentExternalSort = externalSortSettings?.sortsApplied?.find(
     (s) => s.columnKey === column.key
   );
+  const currentExternalFilter = externalFilterSettings?.filtersApplied?.find(
+    (f) => f.columnKey === column.key
+  );
   const [{ isDragging }, drag] = useDrag({
     type: "COLUMN_DRAG",
     item: { key: column.key },
@@ -57,6 +59,38 @@ function DraggableHeaderRenderer(props) {
     setFilter(e.target.value);
   };
   const getSortIcon = (direction) => direction === "asc" ? `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}` : `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`;
+  const getColumnIcons = () => {
+    const icons = [];
+    if (currentExternalSort) {
+      const sortIconPath = getSortIcon(currentExternalSort.direction);
+      icons.push(
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            src: sortIconPath,
+            size: "small",
+            color: "text.secondary"
+          },
+          "sort-icon"
+        )
+      );
+    }
+    if (currentExternalFilter?.isValid) {
+      const filterIconPath = `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`;
+      icons.push(
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            src: filterIconPath,
+            size: "small",
+            color: "text.secondary"
+          },
+          "filter-icon"
+        )
+      );
+    }
+    return icons.length > 0 ? icons : null;
+  };
   useEffect(() => {
     if (!activeFilters) {
       setFilter("");
@@ -66,12 +100,14 @@ function DraggableHeaderRenderer(props) {
   if (newColumn.withinHeaderRenderer) {
     newColumn.name = newColumn.withinHeaderRenderer(props);
   }
-  if (currentExternalSort && !newColumn.withinHeaderRenderer) {
-    const sortIconPath = getSortIcon(currentExternalSort.direction);
-    newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
-      newColumn.name,
-      /* @__PURE__ */ jsx(Icon, { src: sortIconPath, size })
-    ] });
+  if (!newColumn.withinHeaderRenderer) {
+    const columnIcons = getColumnIcons();
+    if (columnIcons) {
+      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
+        /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
+        /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
+      ] });
+    }
   }
   return /* @__PURE__ */ jsxs(
     DraggableHeaderRootStyled,

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

@@ -2,11 +2,12 @@ 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";
 import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
+import { u as useFilters } from "../../../../hooks/useFilters.js";
 function HeaderRenderClick(props) {
   const {
     menuActions,
@@ -22,6 +23,7 @@ function HeaderRenderClick(props) {
     ...other
   } = props;
   const { getLabel } = useModuleDictionary();
+  const { activeFilters } = useFilters();
   const [anchorEl, setAnchorEl] = useState(null);
   const resolvedAnchorEl = externalOpen ?? anchorEl;
   const open = typeof externalOpen !== "undefined" ? Boolean(externalOpen) : Boolean(anchorEl);
@@ -122,7 +124,15 @@ function HeaderRenderClick(props) {
       arrowType,
       ...other,
       slots: { ...slots },
-      slotProps: { paper: { ...paperProps } },
+      slotProps: {
+        paper: {
+          ...paperProps,
+          sx: {
+            mt: !activeFilters ? 0.3 : 6.5,
+            ...paperProps?.sx
+          }
+        }
+      },
       disableAutoFocus: true,
       disableEnforceFocus: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },

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/components/mui_extended/CheckBox/CheckBox.styles.js

@@ -13,7 +13,8 @@ const checkBoxStyles = {
       paddingRight: theme.vars.size.baseSpacings.sp1,
       overflow: "visible",
       boxSizing: "border-box",
-      gap: theme.vars.size.baseSpacings.sp1
+      gap: theme.vars.size.baseSpacings.sp1,
+      width: "fit-content"
     };
   },
   /**

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.d.ts

@@ -1,7 +1,5 @@
-import { FilterFieldApplied } from '../../components/DynamicFilter/types';
-import { SortFieldApplied } from '../../components/DynamicSort/types';
 import { UseDynamicFilterAndSortProps } from './types';
-import { SortChangeEvent, FilterChangeEvent } from '../../components/DataGrid/types';
+import { SortSettings, FilterSettings } from '../../components/DataGrid/types';
 /**
  * Hook para manejar los filtros y ordenamientos dinamicos
  */
@@ -10,8 +8,6 @@ export declare const useDynamicFilterAndSort: (props: UseDynamicFilterAndSortPro
     rightActions: import("react/jsx-runtime").JSX.Element;
     visibleCustomHeader: boolean;
     customHeaderComponent: import("react/jsx-runtime").JSX.Element;
-    getCurrentSorts: () => SortFieldApplied[];
-    handleChangeSortExternal: (sortApplied: SortChangeEvent) => void;
-    handleChangeFilterExternal: (event: FilterChangeEvent) => void;
-    getCurrentFilters: () => FilterFieldApplied[];
+    externalSortSettings: SortSettings | undefined;
+    externalFilterSettings: FilterSettings | undefined;
 };

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { useState, useRef, useMemo, useCallback } from "react";
+import { useState, useRef, useMemo, useCallback, useReducer } from "react";
 import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
 import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
@@ -78,6 +78,10 @@ const useDynamicFilterAndSort = (props) => {
     }
     return true;
   }, [eventRefs, fields]);
+  const [changeFlags, dispatchChangeFlag] = useReducer(
+    (state, action) => ({ ...state, [action]: !state[action] }),
+    { filters: false, sorts: false }
+  );
   const handleChangeFilters = useCallback(
     (filters, rawFilters) => {
       setInvisibleBadge((prev) => ({ ...prev, filter: filters.length === 0 }));
@@ -96,6 +100,7 @@ const useDynamicFilterAndSort = (props) => {
         onChangeFilterSort(eventRefs.current);
       }
       refOnChangeFilterSort.current++;
+      dispatchChangeFlag("filters");
     },
     [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, sorts]
   );
@@ -118,6 +123,7 @@ const useDynamicFilterAndSort = (props) => {
       } else {
         refOnChangeFilterSort.current++;
       }
+      dispatchChangeFlag("sorts");
     },
     [
       onChangeFilterSort,
@@ -360,15 +366,43 @@ const useDynamicFilterAndSort = (props) => {
     ),
     [togglesLeftActions, dataTestId, dynamicsFiltersSorts]
   );
+  const externalSortSettings = useMemo(() => {
+    if (!sorts || sorts.length === 0) {
+      return void 0;
+    }
+    return {
+      sortsColumns: sorts.map((sort) => sort.name),
+      sortsApplied: getCurrentSorts().map((sort) => ({
+        columnKey: sort.field.name,
+        removable: !sort.fixed,
+        direction: sort.operator
+      })),
+      onChange: handleChangeSortExternal
+    };
+  }, [sorts, changeFlags.sorts, getCurrentSorts, handleChangeSortExternal]);
+  const externalFilterSettings = useMemo(() => {
+    if (!fields || fields.length === 0) {
+      return void 0;
+    }
+    return {
+      filterColumns: fields.map((filter) => ({
+        name: filter.name,
+        multiple: filter.multiple || false
+      })),
+      filtersApplied: getCurrentFilters().map((filter) => ({
+        columnKey: filter.field.name,
+        isValid: filter.isSet
+      })),
+      onChange: handleChangeFilterExternal
+    };
+  }, [fields, changeFlags.filters, getCurrentFilters, handleChangeFilterExternal]);
   return {
     leftActions,
     rightActions: finalRightActions,
     visibleCustomHeader,
     customHeaderComponent,
-    getCurrentSorts,
-    handleChangeSortExternal,
-    handleChangeFilterExternal,
-    getCurrentFilters
+    externalSortSettings,
+    externalFilterSettings
   };
 };
 export {

package/package.json

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

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -8,6 +8,8 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     dynamicColumns?: boolean;
     filterSortAutomatic?: boolean;
     visibleRefreshFilterSort?: boolean;
+    withExternalSortSettings?: boolean;
+    withExternalFilterSettings?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook

package/storybook/components/DataGrid/subcomponents/DataGridRenderWithExternalFiltersAndSorts.d.ts

@@ -1,16 +0,0 @@
-import { DataGridProps, RowKey } from '../../../../src/components/DataGrid/types';
-import { RowType, SeedProps } from '../helpers/types';
-interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
-    dataGridProps: DataGridProps<TRow, TSummaryRow, TKey>;
-    seedProps: SeedProps;
-    rowsSelecteds?: boolean;
-    withCustomHeader?: boolean;
-    dynamicColumns?: boolean;
-    filterSortAutomatic?: boolean;
-    visibleRefreshFilterSort?: boolean;
-}
-/**
- * Componente que renderiza el DataGrid para el storybook
- */
-declare function DataGridRenderWithActions<TKey extends RowKey = RowKey>(props: DataGridRenderProps<RowType, unknown, TKey>): import("react/jsx-runtime").JSX.Element;
-export default DataGridRenderWithActions;