@m4l/components 9.4.6-JT16122025.beta.1 → 9.4.6-JT21122025.beta.1

package/components/DataGrid/slots/DataGridSlot.js

@@ -240,7 +240,7 @@ export {
   NameColumnStyled as F,
   IconColumnStyled as G,
   DraggableHeaderRootStyled as H,
-  IconButtonEditStyled as I,
+  InputTextEditorStyled as I,
   ButtonHeaderActionsStyled as J,
   DraggableWrapperInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
@@ -250,34 +250,34 @@ export {
   MenuListStyled as P,
   HeaderRenderClickStyled as Q,
   RowsCountRootStyled as R,
-  InputTextEditorStyled as S,
-  TableWrapperDataGridStyled as T,
+  CheckboxCellWrapperStyled as S,
+  TextToggleCardButtonStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
-  ContentModalSettingStyled as a,
-  ContainerLabelValueColumnStyled as b,
-  ContentWrapperColumnStyled as c,
-  EditablePlaceholderStyled as d,
-  CardsContainerStyled as e,
-  CardDetailContainerStyled as f,
-  CardHeaderStyled as g,
-  CardHeaderLeftStyled as h,
-  CardHeaderRightStyled as i,
-  CardContentWrapperStyled as j,
-  CardContentStyled as k,
-  CardStyled as l,
-  CheckboxCellWrapperStyled as m,
-  ControlNavigateStyled as n,
-  ActionsConfigContainerStyled as o,
-  ContainerLeftActionsStyled as p,
-  ContainerRightActionsStyled as q,
-  RowsCountLabelStyled as r,
-  RowsCountValueStyled as s,
-  ColumnsConfigWrapperStyled as t,
-  ColumnsConfigDataGridStyled as u,
-  ColumnsConfigSelColumnsStyled as v,
-  ColumnsConfigActiosStyled as w,
-  ContainerToggleCardsStyled as x,
-  CardToggleButtonStyled as y,
-  TextToggleCardButtonStyled 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 { n 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, r as RowsCountLabelStyled, s 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, o as ActionsConfigContainerStyled, p as ContainerLeftActionsStyled, q 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" && viewMode !== "cards" && /* @__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';

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

@@ -1,34 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useFilters } from "../../../../hooks/useFilters.js";
-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 useDataGrid } from "../../../../hooks/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/MobileMenuActions/MobileMenuActions.d.ts

@@ -0,0 +1,19 @@
+import { Column } from 'react-data-grid';
+/**
+ * Componente que renderiza el menú de acciones en dispositivos móviles.
+ *
+ * Consolida todas las acciones del DataGrid en un único menú desplegable
+ * para optimizar el espacio en pantallas pequeñas:
+ * - Opciones de densidad (compact, standard, confortable)
+ * - Toggle de filtros
+ * - Configuración de columnas (específica según viewMode)
+ * @param props.columns - Columnas del DataGrid para la configuración
+ * @example
+ * ```tsx
+ * // Se usa internamente en HeaderActions cuando isMobile es true
+ * {isMobile && <MobileMenuActions columns={columns} />}
+ * ```
+ */
+export declare const MobileMenuActions: (props: {
+    columns: readonly Column<any, any>[];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { p as pathIcons } from "../../../../icons.js";
+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";
+import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
+import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
+const MobileMenuActions = (props) => {
+  const { columns } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentRowHeightVariant, setRowHeightVariant, size, viewMode } = useDataGrid();
+  const { activeFilters, setActiveFilters } = useFilters();
+  const tableModalSettings = useModalSettings(size, columns);
+  const cardsModalSettings = useModalSettings$1(size, columns);
+  const modalSettings = viewMode === "cards" ? cardsModalSettings : tableModalSettings;
+  const toggleIcon = () => {
+    setActiveFilters(!activeFilters);
+  };
+  const menuActions = [
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
+      onClick: () => setRowHeightVariant("compact"),
+      disabled: currentRowHeightVariant === "compact",
+      label: getLabel("data_grid.density_compact")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
+      onClick: () => setRowHeightVariant("standard"),
+      disabled: currentRowHeightVariant === "standard",
+      label: getLabel("data_grid.density_standard")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
+      onClick: () => setRowHeightVariant("confortable"),
+      disabled: currentRowHeightVariant === "confortable",
+      label: getLabel("data_grid.density_confortable")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`,
+      onClick: () => toggleIcon(),
+      label: activeFilters ? getLabel("data_grid.tooltip_filter_hide") : getLabel("data_grid.tooltip_filter_show")
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      onClick: () => modalSettings(),
+      label: getLabel("data_grid.tooltip_settings")
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    MenuActions,
+    {
+      className: "mobile-menu-actions",
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
+      arrowType: "no-arrow",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      menuActions
+    }
+  );
+};
+export {
+  MobileMenuActions as M
+};