@m4l/components 9.4.5 → 9.4.6-JT19122025.beta.1

package/components/DataGrid/index.d.ts

@@ -1,10 +1,10 @@
-export { DataGrid } from './DataGrid';
+export { DataGrid } from './components/DataGrid';
 export * from './formatters';
 export type { Column, RenderEditCellProps, RenderCellProps, } from 'react-data-grid';
 export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, } from './types';
+export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
+export type { IGridConfig } from './helpers/persistence/getColumnsWidth/types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
-export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
-export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
+export { getDataGridRowsFromSet } from './helpers';
 export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS, } from './constants';
-export * from './types.helpers';

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

@@ -50,7 +50,10 @@ export declare enum TableSlots {
     customCardFieldContent = "customCardFieldContent",
     customCardIconContainer = "customCardIconContainer",
     checkboxCellWrapper = "checkboxCellWrapper",
-    editorCellWrapper = "editorCellWrapper"
+    editorCellWrapper = "editorCellWrapper",
+    editablePlaceholder = "editablePlaceholder",
+    editLabel = "editLabel",
+    iconButtonEdit = "iconButtonEdit"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -54,6 +54,9 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["customCardIconContainer"] = "customCardIconContainer";
   TableSlots2["checkboxCellWrapper"] = "checkboxCellWrapper";
   TableSlots2["editorCellWrapper"] = "editorCellWrapper";
+  TableSlots2["editablePlaceholder"] = "editablePlaceholder";
+  TableSlots2["editLabel"] = "editLabel";
+  TableSlots2["iconButtonEdit"] = "iconButtonEdit";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

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

@@ -76,6 +76,9 @@ export declare const ButtonHeaderActionsStyled: import('@emotion/styled').Styled
 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>>, {}>;
+export declare const EditablePlaceholderStyled: 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 EditLabelStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const IconButtonEditStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 /**
  * ****************
  * Slots TextEditor

package/components/DataGrid/slots/DataGridSlot.js

@@ -6,6 +6,7 @@ import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 import { C as Card } from "../../Card/Card.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -206,6 +207,18 @@ const NameColumnStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.nameColumn
 })(dataGridStyles.nameColumn);
+const EditablePlaceholderStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.editablePlaceholder
+})(dataGridStyles.editablePlaceholder);
+styled(Typography, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.editLabel
+})(dataGridStyles.editLabel);
+const IconButtonEditStyled = styled(IconButton, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.iconButtonEdit
+})(dataGridStyles.iconButtonEdit);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -220,49 +233,51 @@ styled("div", {
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  NameColumnStyled as B,
+  TableContainerStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  DraggableHeaderRootStyled as F,
-  ButtonHeaderActionsStyled as G,
-  DraggableWrapperInputBaseStyled as H,
-  IconColumnStyled as I,
-  IconSearchStyled as J,
-  HeaderInputBaseStyled as K,
+  NameColumnStyled as F,
+  IconColumnStyled as G,
+  DraggableHeaderRootStyled as H,
+  InputTextEditorStyled as I,
+  ButtonHeaderActionsStyled as J,
+  DraggableWrapperInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
-  MenuListStyled as M,
+  IconSearchStyled as M,
   NameColumnIconStyled as N,
-  HeaderRenderClickStyled as O,
-  InputTextEditorStyled as P,
+  HeaderInputBaseStyled as O,
+  MenuListStyled as P,
+  HeaderRenderClickStyled as Q,
   RowsCountRootStyled as R,
-  TableWrapperDataGridStyled as T,
+  CheckboxCellWrapperStyled as S,
+  TextToggleCardButtonStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
-  ContentModalSettingStyled as a,
-  ContainerLabelValueColumnStyled as b,
-  ContentWrapperColumnStyled as c,
-  CardsContainerStyled as d,
-  CardDetailContainerStyled as e,
-  CardHeaderStyled as f,
-  CardHeaderLeftStyled as g,
-  CardHeaderRightStyled as h,
-  CardContentWrapperStyled as i,
-  CardContentStyled as j,
-  CardStyled as k,
-  CheckboxCellWrapperStyled as l,
-  ControlNavigateStyled as m,
-  ActionsConfigContainerStyled as n,
-  ContainerLeftActionsStyled as o,
-  ContainerRightActionsStyled as p,
-  RowsCountLabelStyled as q,
-  RowsCountValueStyled as r,
-  ColumnsConfigWrapperStyled as s,
-  ColumnsConfigDataGridStyled as t,
-  ColumnsConfigSelColumnsStyled as u,
-  ColumnsConfigActiosStyled as v,
-  ContainerToggleCardsStyled as w,
-  CardToggleButtonStyled as x,
-  TextToggleCardButtonStyled as y,
-  TableContainerStyled as z
+  ControlNavigateStyled as a,
+  RowsCountLabelStyled as b,
+  RowsCountValueStyled as c,
+  ActionsConfigContainerStyled as d,
+  ContainerLeftActionsStyled as e,
+  ContainerRightActionsStyled as f,
+  ContainerToggleCardsStyled as g,
+  CardToggleButtonStyled as h,
+  CardsContainerStyled as i,
+  ContainerLabelValueColumnStyled as j,
+  ContentWrapperColumnStyled as k,
+  EditablePlaceholderStyled as l,
+  IconButtonEditStyled as m,
+  ContentModalSettingStyled as n,
+  CardDetailContainerStyled as o,
+  CardContentWrapperStyled as p,
+  CardContentStyled as q,
+  CardStyled as r,
+  CardHeaderStyled as s,
+  CardHeaderLeftStyled as t,
+  CardHeaderRightStyled as u,
+  ColumnsConfigWrapperStyled as v,
+  ColumnsConfigDataGridStyled as w,
+  ColumnsConfigSelColumnsStyled as x,
+  TableWrapperDataGridStyled as y,
+  ColumnsConfigActiosStyled as z
 };

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

@@ -0,0 +1,2 @@
+export * from './DataGridEnum';
+export * from './DataGridSlot';

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.d.ts

@@ -1,5 +1,25 @@
 import { ControlNavigateProps } from './types';
 /**
- * Componente que renderiza el control de navegacion del DataGrid
+ * Componente que renderiza el control de navegación del DataGrid.
+ *
+ * Muestra opciones de navegación y conteo de filas:
+ * - **RowsCount**: Muestra el total de filas (solo cuando no hay pager y no es móvil)
+ * - **Pager**: Componente de paginación con navegación entre páginas
+ * @param props.withRowsCount - Si muestra el contador de filas (default: true)
+ * @param props.withPager - Si muestra el paginador (default: true)
+ * @param props.pagerOptions - Opciones de configuración del paginador
+ * @param props.size - Tamaño del componente
+ * @example
+ * ```tsx
+ * <ControlNavigate
+ *   withPager
+ *   pagerOptions={{
+ *     totalRecords: 100,
+ *     pageSize: 10,
+ *     currentPage: 1,
+ *     onPageChange: (page) => setPage(page)
+ *   }}
+ * />
+ * ```
  */
 export declare const ControlNavigate: (props: ControlNavigateProps) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { m as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
-import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
+import { a as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { R as RowsCount } from "./subcomponents/RowsCount/RowsCount.js";
 import { P as Pager } from "../../../Pager/Pager.js";
 const ControlNavigate = (props) => {
   const {

package/components/DataGrid/subcomponents/ControlNavigate/index.d.ts

@@ -1,2 +1,2 @@
 export { ControlNavigate } from './ControlNavigate';
-export type { ControlNavigateProps } from './types';
+export * from './types';

package/components/DataGrid/subcomponents/ControlNavigate/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/subcomponents/ControlNavigate/subcomponents/RowsCount/RowsCount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Componente que muestra el contador de filas del DataGrid.
+ *
+ * Muestra una etiqueta con el total de filas visibles en formato:
+ * "Filas: {count}"
+ *
+ * Características:
+ * - Muestra skeleton mientras se cargan los datos
+ * - Se adapta al tamaño configurado del DataGrid
+ * - Usa el diccionario para internacionalización
+ * @example
+ * ```tsx
+ * // Se usa internamente en ControlNavigate
+ * {withRowsCount && !withPager && !isMobile && <RowsCount />}
+ * ```
+ */
+export declare function RowsCount(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/{HeaderActions/subcomponents/RowsCount/index.js → ControlNavigate/subcomponents/RowsCount/RowsCount.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, q as RowsCountLabelStyled, r as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, b as RowsCountLabelStyled, c as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/subcomponents/ControlNavigate/subcomponents/RowsCount/index.d.ts

@@ -0,0 +1 @@
+export { RowsCount } from './RowsCount';

package/components/DataGrid/subcomponents/ControlNavigate/subcomponents/RowsCount/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/subcomponents/ControlNavigate/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/subcomponents/HeaderActions/HeaderActions.d.ts

@@ -0,0 +1,13 @@
+import { HeaderActionsProps } from './types';
+/**
+ * Componente que renderiza las acciones del DataGrid.
+ *
+ * Incluye controles para:
+ * - Densidad de filas (compact, standard, confortable)
+ * - Filtros locales
+ * - Configuración de columnas (específica por vista)
+ * - Toggle de modo de vista (table/cards)
+ *
+ * En móviles, todas las acciones se consolidan en un menú desplegable.
+ */
+export declare function HeaderActions(props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/HeaderActions/HeaderActions.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useIsMobile } from "@m4l/graphics";
+import { A as ActionsRootStyled, d as ActionsConfigContainerStyled, e as ContainerLeftActionsStyled, f as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/MobileMenuActions.js";
+import { D as Density } from "./subcomponents/Density/Density.js";
+import { F as Filter } from "./subcomponents/Filter/Filter.js";
+import { V as ViewMode } from "./subcomponents/ViewMode/ViewMode.js";
+import { S as Settings } from "../../views/CardsView/subcomponents/Settings/Settings.js";
+import { S as Settings$1 } from "../../views/TableView/subcomponents/Settings/Settings.js";
+import { u as useDataGrid } from "../../hooks/shared/useDataGrid/useDataGrid.js";
+function HeaderActions(props) {
+  const {
+    withSettings = true,
+    settingsProps,
+    withLocalFilters,
+    leftActions,
+    rightActions,
+    withPager,
+    size,
+    columns
+  } = props;
+  const isMobile = useIsMobile();
+  const { rowHeights, viewMode, cardsViewConfig } = useDataGrid();
+  const { currentSize } = useComponentSize(size);
+  const renderSettings = () => {
+    if (!withSettings) {
+      return null;
+    }
+    if (viewMode === "cards" && cardsViewConfig?.customRender) {
+      return null;
+    }
+    if (viewMode === "cards") {
+      return /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns });
+    }
+    return /* @__PURE__ */ jsx(Settings$1, { ...settingsProps, columns });
+  };
+  return /* @__PURE__ */ jsx(ActionsRootStyled, { ownerState: { size: currentSize }, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftActions,
+    /* @__PURE__ */ jsx(MobileMenuActions, { columns }),
+    rightActions
+  ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
+    /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
+      leftActions,
+      typeof rowHeights !== "number" && viewMode !== "cards" && /* @__PURE__ */ jsx(Density, {}),
+      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
+      renderSettings(),
+      cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})
+    ] }),
+    rightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: rightActions })
+  ] }) });
+}
+export {
+  HeaderActions as H
+};

package/components/DataGrid/subcomponents/HeaderActions/index.d.ts

@@ -1,5 +1,2 @@
-import { HeaderActionsProps } from './types';
-/**
- * Componente que renderiza las acciones del DataGrid
- */
-export declare function HeaderActions(props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+export { HeaderActions } from './HeaderActions';
+export * from './types';

package/components/DataGrid/subcomponents/HeaderActions/index.js

@@ -1,42 +1 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { F as Filter } from "./subcomponents/Filter/index.js";
-import { S as Settings } from "./subcomponents/Settings/index.js";
-import { D as Density } from "./subcomponents/Density/index.js";
-import { V as ViewMode } from "./subcomponents/ViewMode/index.js";
-import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { useIsMobile } from "@m4l/graphics";
-import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, n as ActionsConfigContainerStyled, o as ContainerLeftActionsStyled, p as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
-import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
-function HeaderActions(props) {
-  const {
-    withSettings = true,
-    settingsProps,
-    withLocalFilters,
-    leftActions,
-    rightActions,
-    withPager,
-    size,
-    columns
-  } = props;
-  const isMobile = useIsMobile();
-  const { rowHeights, viewMode, cardsViewConfig } = useDataGrid();
-  const { currentSize } = useComponentSize(size);
-  return /* @__PURE__ */ jsx(ActionsRootStyled, { ownerState: { size: currentSize }, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    leftActions,
-    /* @__PURE__ */ jsx(MobileMenuActions, { columns }),
-    rightActions
-  ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
-    /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
-      leftActions,
-      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
-      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
-      withSettings && !(viewMode === "cards" && cardsViewConfig?.customRender) && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
-      cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})
-    ] }),
-    rightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: rightActions })
-  ] }) });
-}
-export {
-  HeaderActions as H
-};
+

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/Density.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Componente que permite cambiar la densidad (altura) de las filas del DataGrid.
+ *
+ * Muestra un menú desplegable con tres opciones de densidad:
+ * - **compact**: Filas compactas con menor altura
+ * - **standard**: Filas con altura estándar (default)
+ * - **confortable**: Filas con mayor altura para mejor legibilidad
+ *
+ * El componente solo se renderiza si `rowHeights` no es un número fijo,
+ * permitiendo al usuario personalizar la visualización de los datos.
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions
+ * <HeaderActions>
+ *   <Density />
+ * </HeaderActions>
+ * ```
+ */
+export declare function Density(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/Density.js

@@ -0,0 +1,74 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+function Density() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
+  const { getLabel } = useModuleDictionary();
+  const menuActions = useMemo(() => {
+    if (typeof rowHeights === "number") {
+      return [];
+    }
+    return [
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
+        onClick: () => setRowHeightVariant("compact"),
+        disabled: currentRowHeightVariant === "compact",
+        label: getLabel(DICTIONARY.DENSITY_COMPACT)
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
+        onClick: () => setRowHeightVariant("standard"),
+        disabled: currentRowHeightVariant === "standard",
+        label: getLabel(DICTIONARY.DENSITY_STANDARD)
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
+        onClick: () => setRowHeightVariant("confortable"),
+        disabled: currentRowHeightVariant === "confortable",
+        label: getLabel(DICTIONARY.DENSITY_CONFORTABLE)
+      }
+    ];
+  }, [
+    rowHeights,
+    currentRowHeightVariant,
+    setRowHeightVariant,
+    host_static_assets,
+    environment_assets,
+    getLabel
+  ]);
+  const currenViewIcon = useMemo(() => {
+    if (currentRowHeightVariant === "compact") {
+      return `${host_static_assets}/${environment_assets}/${pathIcons.compact}`;
+    }
+    if (currentRowHeightVariant === "standard") {
+      return `${host_static_assets}/${environment_assets}/${pathIcons.standard}`;
+    }
+    return `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`;
+  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
+  if (menuActions.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(
+    MenuActions,
+    {
+      arrowType: "right-top",
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      menuActions,
+      icon: currenViewIcon,
+      toolTip: getLabel(DICTIONARY.DENSITY_TOOLTIP),
+      paperProps: { style: { marginTop: "5px" } }
+    }
+  );
+}
+export {
+  Density as D
+};

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.d.ts

@@ -1,4 +1 @@
-/**
- * Renderiza el componente de densidad de filas en el DataGrid
- */
-export declare function Density(): import("react/jsx-runtime").JSX.Element;
+export { Density } from './Density';

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js

@@ -1,74 +1 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { p as pathIcons } from "../../../../icons.js";
-import { D as DICTIONARY } from "../../../../dictionary.js";
-function Density() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const menuActions = useMemo(() => {
-    if (typeof rowHeights === "number") {
-      return [];
-    }
-    return [
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
-        onClick: () => setRowHeightVariant("compact"),
-        disabled: currentRowHeightVariant === "compact",
-        label: getLabel(DICTIONARY.DENSITY_COMPACT)
-      },
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
-        onClick: () => setRowHeightVariant("standard"),
-        disabled: currentRowHeightVariant === "standard",
-        label: getLabel(DICTIONARY.DENSITY_STANDARD)
-      },
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
-        onClick: () => setRowHeightVariant("confortable"),
-        disabled: currentRowHeightVariant === "confortable",
-        label: getLabel(DICTIONARY.DENSITY_CONFORTABLE)
-      }
-    ];
-  }, [
-    rowHeights,
-    currentRowHeightVariant,
-    setRowHeightVariant,
-    host_static_assets,
-    environment_assets,
-    getLabel
-  ]);
-  const currenViewIcon = useMemo(() => {
-    if (currentRowHeightVariant === "compact") {
-      return `${host_static_assets}/${environment_assets}/${pathIcons.compact}`;
-    }
-    if (currentRowHeightVariant === "standard") {
-      return `${host_static_assets}/${environment_assets}/${pathIcons.standard}`;
-    }
-    return `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`;
-  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
-  if (menuActions.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      arrowType: "right-top",
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      menuActions,
-      icon: currenViewIcon,
-      toolTip: getLabel(DICTIONARY.DENSITY_TOOLTIP),
-      paperProps: { style: { marginTop: "5px" } }
-    }
-  );
-}
-export {
-  Density as D
-};
+

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Filter/Filter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Componente que renderiza el botón de filtro en el DataGrid.
+ *
+ * Permite activar/desactivar los filtros locales de las columnas o,
+ * si existe `externalFilterSettings`, abre el popover de filtros externos.
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando withLocalFilters es true
+ * {withLocalFilters && <Filter />}
+ * ```
+ */
+export declare function Filter(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Filter/Filter.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+function Filter() {
+  const { activeFilters, setActiveFilters } = useFilters();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const { externalFilterSettings } = useDataGrid();
+  const toggleIcon = () => {
+    if (externalFilterSettings) {
+      externalFilterSettings.onChange?.({
+        action: "openPopoverMenuFields"
+      });
+    } else {
+      setActiveFilters(!activeFilters);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      tooltip: activeFilters ? getLabel(DICTIONARY.TOOLTIP_FILTER_HIDE) : getLabel(DICTIONARY.TOOLTIP_FILTER_SHOW),
+      onClick: toggleIcon,
+      "aria-label": "filter",
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`
+    }
+  );
+}
+export {
+  Filter as F
+};

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Filter/index.d.ts

@@ -1,4 +1 @@
-/**
- * Componente que renderiza el icono de filtro en el DataGrid
- */
-export declare function Filter(): import("react/jsx-runtime").JSX.Element;
+export { Filter } from './Filter';