@m4l/components 9.4.14 → 9.4.15-BE20260120

package/components/datagrids/subcomponents/HeaderActions/subcomponents/MobileMenuActions/MobileMenuActions.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { p as pathIcons } from "../../../../icons.js";
+import { LayoutDensityCompactOutlined, LayoutDensityStandardOutlined, LayoutDensityConfortableOutlined, SettingsConfigOutlined, MenuMoreVerticalOutlined } from "@m4l/icons";
 import { u as useModalSettings } from "../../../../views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
 import { u as useModalSettings$1 } from "../../../../views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -21,21 +22,21 @@ const MobileMenuActions = (props) => {
   const menuActions = [
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
+      startIcon: /* @__PURE__ */ jsx(LayoutDensityCompactOutlined, {}),
       onClick: () => setRowHeightVariant("compact"),
       disabled: currentRowHeightVariant === "compact",
       label: getLabel("data_grid.density_compact")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
+      startIcon: /* @__PURE__ */ jsx(LayoutDensityStandardOutlined, {}),
       onClick: () => setRowHeightVariant("standard"),
       disabled: currentRowHeightVariant === "standard",
       label: getLabel("data_grid.density_standard")
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
+      startIcon: /* @__PURE__ */ jsx(LayoutDensityConfortableOutlined, {}),
       onClick: () => setRowHeightVariant("confortable"),
       disabled: currentRowHeightVariant === "confortable",
       label: getLabel("data_grid.density_confortable")
@@ -48,7 +49,7 @@ const MobileMenuActions = (props) => {
     },
     {
       type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      startIcon: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
       onClick: () => modalSettings(),
       label: getLabel("data_grid.tooltip_settings")
     }
@@ -57,7 +58,7 @@ const MobileMenuActions = (props) => {
     MenuActions,
     {
       className: "mobile-menu-actions",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
+      icon: /* @__PURE__ */ jsx(MenuMoreVerticalOutlined, {}),
       arrowType: "no-arrow",
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.js

@@ -1,15 +1,14 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
-import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { g as ContainerToggleCardsStyled, h as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { LayoutTableOutlined, LayoutCardOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { viewMode, onViewModeChange } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const [anchorEl, setAnchorEl] = useState(null);
@@ -33,8 +32,8 @@ function ViewMode() {
     },
     [onViewModeChange, handleClose]
   );
-  const renderIcon = useMemo(() => {
-    return viewMode === "table" ? pathIcons.viewTable : pathIcons.viewCards;
+  const RenderIconViewMode = useMemo(() => {
+    return viewMode === "table" ? /* @__PURE__ */ jsx(LayoutTableOutlined, {}) : /* @__PURE__ */ jsx(LayoutCardOutlined, {});
   }, [viewMode]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -43,8 +42,8 @@ function ViewMode() {
         tooltip: getLabel(DICTIONARY.TOOLTIP_VIEW_MODE),
         onClick: handleClick,
         "aria-label": "view-mode",
-        icon: `${host_static_assets}/${environment_assets}/${renderIcon}`,
-        "data-testid": "view-mode-button"
+        icon: RenderIconViewMode,
+        dataTestId: "view-mode-button"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -73,7 +72,7 @@ function ViewMode() {
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewTable}`,
+                    icon: /* @__PURE__ */ jsx(LayoutTableOutlined, {}),
                     color: viewMode === "table" ? "primary.enabled" : "text.disabled"
                   }
                 ),
@@ -100,7 +99,7 @@ function ViewMode() {
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewCards}`,
+                    icon: /* @__PURE__ */ jsx(LayoutCardOutlined, {}),
                     color: viewMode === "cards" ? "primary.enabled" : "text.disabled"
                   }
                 ),

package/components/datagrids/tests/helpers/types.d.ts

@@ -12,6 +12,16 @@ export interface SeedProps {
     withMultipleIcons?: boolean;
     withInteractiveCheck?: boolean;
     withNestedValue?: boolean;
+    /**
+     * Si es true, genera valores anidados con algunos null/undefined
+     * para mostrar el comportamiento del defaultValue ('-')
+     */
+    withNestedValueWithNulls?: boolean;
+    /**
+     * Si es true, genera valores anidados con null/undefined
+     * y usa un defaultValue personalizado ('N/A')
+     */
+    withNestedValueCustomDefaultValue?: boolean;
     withPoints?: boolean;
     withPrice?: boolean;
     withUncertainty?: boolean;

package/components/datagrids/views/CardsView/hooks/useCardContent/useCardContent.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { ActionsEditOutlined } from "@m4l/icons";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useCardContent({
@@ -15,7 +15,6 @@ function useCardContent({
 }) {
   const { getConfigColumns, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const columnsConfig = getConfigColumns("cards");
@@ -95,7 +94,7 @@ function useCardContent({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
+                    src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(column.key);
                     },

package/components/datagrids/views/CardsView/subcomponents/CardDetails/CardDetails.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { ActionsEditOutlined } from "@m4l/icons";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 function CardDetails({
   row,
@@ -17,7 +17,6 @@ function CardDetails({
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const [refreshCounter, setRefreshCounter] = useState(0);
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
   const currentRow = rows[rowIndex] || row;
   const handleForceRefresh = useCallback(() => {
@@ -116,7 +115,7 @@ function CardDetails({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
+                    src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(modifiedColumn.key);
                     },

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { useEnvironment } from "@m4l/core";
 import { s as CardHeaderStyled, t as CardHeaderLeftStyled, u as CardHeaderRightStyled } from "../../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../../icons.js";
+import { LayoutExpandOutlined } from "@m4l/icons";
 import { C as CheckboxCellAdapter } from "../../../../../adapters/CheckboxCellAdapter/CheckboxCellAdapter.js";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -16,7 +15,6 @@ function CardHeader({
   onCheckedRowsChange
 }) {
   const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
     (checked, _isShiftClick) => {
@@ -69,7 +67,7 @@ function CardHeader({
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          icon: `${host_static_assets}/${environment_assets}/${pathIcons.expanded}`,
+          icon: /* @__PURE__ */ jsx(LayoutExpandOutlined, {}),
           size,
           variant: "text",
           "data-testid": `card-details-button-${rowKey}`,

package/components/datagrids/views/CardsView/subcomponents/Settings/Settings.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { SettingsConfigOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {
   const { columns } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { size } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
   const { getLabel } = useModuleDictionary();
@@ -19,7 +18,7 @@ function Settings(props) {
       tooltip: getLabel("data_grid.tooltip_settings"),
       onClick: handleClick,
       "aria-label": "settings",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      icon: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
       "data-testid": "settings-button"
     }
   );

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
 import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../../icons.js";
+import { SettingsConfigOutlined } from "@m4l/icons";
 import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -16,7 +16,6 @@ const useModalSettings = (size, columns) => {
   const { getConfigColumns, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const columnsConfig = getConfigColumns("cards");
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
   const ref = useRef(null);
   const onCloseSettings = useCallback(() => {
@@ -39,7 +38,7 @@ const useModalSettings = (size, columns) => {
         WindowBase,
         {
           title: getLabel("data_grid.settings_title"),
-          iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+          iconUrl: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
           onClose: closeModal,
           className: "settings-modal",
           variant: "outlined",

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect } from "react";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
-import { p as pathIcons } from "../../../../../../icons.js";
 import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as ColumnsConfigSelColumnsStyled, y as TableWrapperDataGridStyled, z as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
+import { ArrowChevronUpOutlined, ArrowChevronMdUpOutlined, ArrowChevronDownOutlined, ArrowChevronMdDownOutlined, ActionsMultiCheckOutlined, ActionsCheckIndeterminateOutlined, ArrowRestoreOutlined } from "@m4l/icons";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
   return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
@@ -48,7 +48,6 @@ const ColumnsConfig = forwardRef(
       () => /* @__PURE__ */ new Set()
     );
     const divRef = useRef(null);
-    const { host_static_assets, environment_assets } = useEnvironment();
     useImperativeHandle(ref, () => ({
       onClickIntro: handleIntro,
       current: divRef.current
@@ -234,7 +233,7 @@ const ColumnsConfig = forwardRef(
             onClick: handleMoveFirst,
             "aria-label": "move first place",
             disabled: rowSelectedIndex < 1,
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveFirstPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronUpOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -244,7 +243,7 @@ const ColumnsConfig = forwardRef(
             onClick: () => handleMoveUpDownd(-1),
             "aria-label": "move up place",
             disabled: rowSelectedIndex < 1,
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveUpPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronMdUpOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -254,7 +253,7 @@ const ColumnsConfig = forwardRef(
             onClick: handleMoveLast,
             "aria-label": "move last place",
             disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveLastPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronDownOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -264,7 +263,7 @@ const ColumnsConfig = forwardRef(
             onClick: () => handleMoveUpDownd(1),
             "aria-label": "move down place",
             disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveDownPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronMdDownOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -273,7 +272,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_VISIBLE_ALL),
             onClick: checkAll,
             "aria-label": "check visible all",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.checkAll}`
+            icon: /* @__PURE__ */ jsx(ActionsMultiCheckOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -282,7 +281,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_NO_VISIBLE_ALL),
             onClick: unCheckAll,
             "aria-label": "un check all",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.uncheckAll}`
+            icon: /* @__PURE__ */ jsx(ActionsCheckIndeterminateOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -291,7 +290,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_RESTORE),
             onClick: restoreAll,
             "aria-label": "Restore columns",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.restoreColumns}`
+            icon: /* @__PURE__ */ jsx(ArrowRestoreOutlined, {})
           }
         )
       ] })

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/useHeaderMenuActions.js

@@ -1,5 +1,7 @@
-import { useMemo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { ActionsFilterOutlined } from "@m4l/icons";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -14,13 +16,16 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
   } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
-  const executeSortChange = (newSortColumns) => {
-    if (handleSortFromPopover) {
-      handleSortFromPopover(newSortColumns);
-    } else {
-      setSortColumns(newSortColumns);
-    }
-  };
+  const executeSortChange = useCallback(
+    (newSortColumns) => {
+      if (handleSortFromPopover) {
+        handleSortFromPopover(newSortColumns);
+      } else {
+        setSortColumns(newSortColumns);
+      }
+    },
+    [handleSortFromPopover, setSortColumns]
+  );
   const column = useMemo(() => {
     return finalColumns.find((c) => c.key === columnKey);
   }, [columnKey, finalColumns]);
@@ -235,18 +240,9 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
         disabled: externalSortSettings ? !hasAnySortApplied || !isRemovable : !(isAsc || isDesc)
       }
     ];
-    const filterAction = externalFilterSettings ? [
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`,
-        label: getLabel(DICTIONARY.ADD_FILTER_COLUMN),
-        dataTestId: "filter-add",
-        onClick: () => {
-          addExternalFilter();
-        },
-        disabled: isAddFilterDisabled
-      }
-    ] : [];
+    const filterAction = externalFilterSettings ? [{ type: "menuItem", startIcon: /* @__PURE__ */ jsx(ActionsFilterOutlined, {}), label: getLabel(DICTIONARY.ADD_FILTER_COLUMN), dataTestId: "filter-add", onClick: () => {
+      addExternalFilter();
+    }, disabled: isAddFilterDisabled }] : [];
     const toggleGrouped = (grouped) => {
       if (!columnKey) {
         return;
@@ -254,37 +250,23 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
       const currentGroupedColumns = columnsConfig.filter((c) => c.grouped);
       const newGroupOrder = grouped ? currentGroupedColumns.length : 0;
       const next = columnsConfig.map(
-        (c) => c.key === columnKey ? {
-          ...c,
-          grouped,
-          groupOrder: grouped ? newGroupOrder : c.groupOrder
-        } : c
+        (c) => c.key === columnKey ? { ...c, grouped, groupOrder: grouped ? newGroupOrder : c.groupOrder } : c
       );
       onChangeColumnsConfig("table", next);
     };
-    const groupActions = hasGroupableColumns ? [
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.group}`,
-        label: getLabel(DICTIONARY.GROUP_BY_COLUMN),
-        dataTestId: "group-add",
-        onClick: () => {
-          toggleGrouped(true);
-        },
-        disabled: !canGroup || isGrouped
+    const groupActions = hasGroupableColumns ? [{ type: "menuItem", startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.group}`, label: getLabel(DICTIONARY.GROUP_BY_COLUMN), dataTestId: "group-add", onClick: () => {
+      toggleGrouped(true);
+    }, disabled: !canGroup || isGrouped }, {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeGroup}`,
+      label: getLabel(DICTIONARY.REMOVE_GROUP_COLUMN),
+      dataTestId: "group-remove",
+      onClick: () => {
+        toggleGrouped(false);
       },
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeGroup}`,
-        label: getLabel(DICTIONARY.REMOVE_GROUP_COLUMN),
-        dataTestId: "group-remove",
-        onClick: () => {
-          toggleGrouped(false);
-        },
-        // Solo deshabilitado si no está agrupada O si es una agrupación estática (groupable=false)
-        disabled: !isGrouped || !canGroup
-      }
-    ] : [];
+      /** Solo deshabilitado si no está agrupada O si es una agrupación estática (groupable=false)*/
+      disabled: !isGrouped || !canGroup
+    }] : [];
     const baseActions = [
       {
         type: "menuItem",
@@ -305,7 +287,6 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     return [...sortActions, ...filterAction, ...groupActions, ...baseActions];
   }, [
     columnKey,
-    column,
     canSort,
     canSortExternally,
     hasExternalSortAsc,
@@ -325,7 +306,12 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     environment_assets,
     getLabel,
     isAddFilterDisabled,
-    executeSortChange
+    executeSortChange,
+    addExternalFilter,
+    clearLocalSort,
+    isAsc,
+    isDesc,
+    isRemovable
   ]);
 }
 export {

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.js

@@ -20,6 +20,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -28,6 +29,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/extended/React-Resizable/Resizable/slots/ResizableSlots.d.ts

@@ -1,4 +1,4 @@
 import { Resizable } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "children" | "resizeHandles" | "height" | "width" | "className" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "height" | "width" | "className" | "children" | "onResize" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<Resizable> | undefined;
 }>;

package/components/extended/React-Resizable/ResizableBox/slots/ResizableBoxSlots.d.ts

@@ -1,4 +1,4 @@
 import { ResizableBox } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "children" | "resizeHandles" | "height" | "width" | "className" | "style" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "height" | "width" | "className" | "style" | "children" | "onResize" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<ResizableBox> | undefined;
 }>;