@m4l/components 0.1.52 → 0.1.54

package/components/CommonActions/components/ActionFormCancel/{index.bd0d16d6.js → index.91b4e98a.js}

@@ -3,28 +3,28 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { B as Button } from "../../../mui_extended/Button/index.8406ed5b.js";
 import { useCallback } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.4454145e.js";
-import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.5a307e29.js";
-import "../../../Resizeable/index.8a442a8b.js";
+import { u as useModal } from "../../../../hooks/useModal/index.6741a628.js";
+import "../../../../react-draggable.6471b07e.js";
+import "../../../ModalDialog/index.c0cb2945.js";
+import "../../../Resizeable/index.04fa8de5.js";
 import { jsx } from "react/jsx-runtime";
 import "@m4l/graphics";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.cbc7720c.js";
-import "../../../modal/WindowBase.b5e29758.js";
-import "../../../Icon/index.f6e8d810.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.e872e238.js";
+import "../../../modal/WindowBase.a29640e3.js";
+import "../../../Icon/index.b29ff2d9.js";
 import "@mui/material/styles";
-import "../../../areas/components/index.6d863764.js";
-import "../../../areas/components/AreasAdmin/index.dbab59f1.js";
-import "../../../mui_extended/IconButton/index.1318a283.js";
+import "../../../areas/components/index.8eaa42fa.js";
+import "../../../areas/components/AreasAdmin/index.a9d8e790.js";
+import "../../../mui_extended/IconButton/index.460c0476.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.7406c20f.js";
+import "../../../areas/contexts/AreasContext/index.1f2d6776.js";
 import "zustand/shallow";
-import "../../../areas/components/AreasContainer/index.f3f921b9.js";
+import "../../../areas/components/AreasContainer/index.1d804927.js";
 import "react-grid-layout/css/styles.css";
-import "../../../../react-resizable.bb58c8fc.js";
-import "../../../areas/contexts/index.e80d8f0f.js";
+import "../../../../react-resizable.b620abed.js";
+import "../../../areas/contexts/index.3be51103.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-import { u as useWindowToolsMF } from "../../../areas/hooks/index.0fd57f88.js";
+import { u as useWindowToolsMF } from "../../../areas/hooks/index.8923d389.js";
 function ActionFormCancel() {
   const {
     getLabel

package/components/CommonActions/components/ActionIntro/{index.d567aebb.js → index.9004fca7.js}

@@ -1,11 +1,16 @@
 import { useModuleDictionary } from "@m4l/core";
 import { B as Button } from "../../../mui_extended/Button/index.8406ed5b.js";
+import { T as TEST_PROP_ID } from "../../../../vendor.b4e23d82.js";
 import { jsx } from "react/jsx-runtime";
+const ACTIONINTRO_TEST_ID = "m4lactions";
 const ActionIntro = (props) => {
   const {
     getLabel
   } = useModuleDictionary();
   return /* @__PURE__ */ jsx(Button, {
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: ACTIONINTRO_TEST_ID
+    } : {},
     variant: "contained",
     type: "submit",
     color: "primary",

package/components/CommonActions/components/ActionIntro/test/contants.d.ts

@@ -0,0 +1 @@
+export declare const ACTIONINTRO_TEST_ID = "m4lactions";

package/components/CommonActions/components/Actions/{index.f0a3167b.js → index.5e17c889.js}

@@ -6,25 +6,25 @@ import "@mui/material/Button";
 import "../../../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
 import "react";
-import "../../../../contexts/ModalContext/index.3d92d9f9.js";
-import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.5a307e29.js";
-import "../../../Resizeable/index.8a442a8b.js";
+import "../../../../contexts/ModalContext/index.a59e3e81.js";
+import "../../../../react-draggable.6471b07e.js";
+import "../../../ModalDialog/index.c0cb2945.js";
+import "../../../Resizeable/index.04fa8de5.js";
 import "@m4l/graphics";
 import "@mui/lab";
-import "../../../modal/WindowConfirm.cbc7720c.js";
-import "../../../Icon/index.f6e8d810.js";
-import "../../../modal/WindowBase.b5e29758.js";
-import "../../../areas/components/index.6d863764.js";
-import "../../../areas/components/AreasAdmin/index.dbab59f1.js";
-import "../../../mui_extended/IconButton/index.1318a283.js";
+import "../../../modal/WindowConfirm.e872e238.js";
+import "../../../Icon/index.b29ff2d9.js";
+import "../../../modal/WindowBase.a29640e3.js";
+import "../../../areas/components/index.8eaa42fa.js";
+import "../../../areas/components/AreasAdmin/index.a9d8e790.js";
+import "../../../mui_extended/IconButton/index.460c0476.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.7406c20f.js";
+import "../../../areas/contexts/AreasContext/index.1f2d6776.js";
 import "zustand/shallow";
-import "../../../areas/components/AreasContainer/index.f3f921b9.js";
+import "../../../areas/components/AreasContainer/index.1d804927.js";
 import "react-grid-layout/css/styles.css";
-import "../../../../react-resizable.bb58c8fc.js";
-import "../../../areas/contexts/index.e80d8f0f.js";
+import "../../../../react-resizable.b620abed.js";
+import "../../../areas/contexts/index.3be51103.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 const WrapperStandarActions = styled("div")(({
   theme

package/components/DataGrid/{index.85390177.js → index.2c875ddb.js}

@@ -1,4 +1,5 @@
-import { styled, alpha } from "@mui/material/styles";
+import { alpha, styled as styled$1 } from "@mui/material/styles";
+import { styled } from "@m4l/styles";
 import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect, useImperativeHandle } from "react";
 import { S as SELECT_COLUMN_KEY, u as useRowSelection, a as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
 import { useDrag, useDrop, DndProvider } from "react-dnd";
@@ -6,37 +7,37 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { SvgIcon, Checkbox, InputBase, Skeleton } from "@mui/material";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString, useEnvironment } from "@m4l/core";
-import { M as MenuActions } from "../mui_extended/MenuActions/index.1261168c.js";
-import { P as Pager, g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.984aac44.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.1318a283.js";
-import { u as useModal } from "../../hooks/useModal/index.4454145e.js";
+import { M as MenuActions } from "../mui_extended/MenuActions/index.01e3ccfe.js";
+import { P as Pager, g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.458f9f0d.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.460c0476.js";
+import { u as useModal } from "../../hooks/useModal/index.6741a628.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.d567aebb.js";
-import "../../react-draggable.0eef011c.js";
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.5a307e29.js";
-import "../Resizeable/index.8a442a8b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.9004fca7.js";
+import "../../react-draggable.6471b07e.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.c0cb2945.js";
+import "../Resizeable/index.04fa8de5.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { A as Actions$1 } from "../CommonActions/components/Actions/index.f0a3167b.js";
+import { A as Actions$1 } from "../CommonActions/components/Actions/index.5e17c889.js";
 import "react-hook-form";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
-import "../areas/components/index.6d863764.js";
-import "../areas/components/AreasAdmin/index.dbab59f1.js";
+import "../areas/components/index.8eaa42fa.js";
+import "../areas/components/AreasAdmin/index.a9d8e790.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.7406c20f.js";
+import "../areas/contexts/AreasContext/index.1f2d6776.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.f3f921b9.js";
+import "../areas/components/AreasContainer/index.1d804927.js";
 import "react-grid-layout/css/styles.css";
-import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.e80d8f0f.js";
+import "../../react-resizable.b620abed.js";
+import "../areas/contexts/index.3be51103.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../modal/WindowConfirm.cbc7720c.js";
-import "../Icon/index.f6e8d810.js";
-import { W as WindowBase } from "../modal/WindowBase.b5e29758.js";
-import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.b3fb8a75.js";
+import "../modal/WindowConfirm.e872e238.js";
+import "../Icon/index.b29ff2d9.js";
+import { W as WindowBase } from "../modal/WindowBase.a29640e3.js";
+import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.a50933fb.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
-import { C as ConcatenatedFormatter } from "../formatters/index.90a19f9f.js";
+import { C as ConcatenatedFormatter } from "../formatters/index.7d2ad9ca.js";
 const WrapperGrid = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -171,7 +172,7 @@ const OriginalDataGridWrapperStyled = styled("div")(({
     borderBottom: `2px solid ${theme.palette.primary.main}`
   }
 }));
-const WrapperTable = styled("div", {
+const WrapperTable = styled$1("div", {
   shouldForwardProp: (prop) => prop !== "withActions"
 })(({
   withActions,
@@ -720,7 +721,7 @@ const ActionsColumn = {
   type: "custom",
   formatter: ActionsFormatter
 };
-const WrapperSkeleton = styled("div")(() => ({
+const WrapperSkeleton = styled$1("div")(() => ({
   display: "flex",
   width: "100%",
   height: "100%",
@@ -994,7 +995,7 @@ function Table(props) {
     })
   });
 }
-const SKTWrapperFilter = styled("div")(({
+const SKTWrapperFilter = styled$1("div")(({
   theme
 }) => ({
   display: "flex",
@@ -1032,7 +1033,7 @@ function Filter() {
     src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
   });
 }
-const WrapperColumnsConfig = styled("div")(({ theme }) => ({
+const WrapperColumnsConfig = styled$1("div")(({ theme }) => ({
   color: theme.palette.text.primary,
   position: "relative",
   display: "flex",
@@ -1040,31 +1041,31 @@ const WrapperColumnsConfig = styled("div")(({ theme }) => ({
   height: "100%",
   width: "100%"
 }));
-styled("div")(({ theme }) => ({
+styled$1("div")(({ theme }) => ({
   color: theme.palette.text.primary,
   fontSize: theme.typography.h4.fontSize
 }));
-const DivSelColumns = styled("div")(({ theme }) => ({
+const DivSelColumns = styled$1("div")(({ theme }) => ({
   ...theme.typography.subtitle2,
   color: theme.palette.text.primary,
   padding: `${theme.spacing(3)} ${theme.spacing(1)}`
 }));
-const WrapperDataGrid = styled("div")(() => ({
+const WrapperDataGrid = styled$1("div")(() => ({
   position: "relative",
   display: "flex",
   flexDirection: "column",
   flexGrow: 1
 }));
-styled("div")(() => ({
+styled$1("div")(() => ({
   display: "flex",
   flexDirection: "row"
 }));
-const ColumnActions = styled("div")(({ theme }) => ({
+const ColumnActions = styled$1("div")(({ theme }) => ({
   paddingTop: theme.spacing(3),
   display: "flex",
   flexDirection: "row"
 }));
-styled("div")(({ theme }) => ({
+styled$1("div")(({ theme }) => ({
   paddingTop: theme.spacing(3),
   display: "flex",
   flexDirection: "row",
@@ -1340,7 +1341,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   });
 });
 ColumnsConfig.displayName = "ColumnsConfig";
-const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
+const SKTWrapperColumnsSettings = styled$1("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -1410,12 +1411,12 @@ function Settings() {
     src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
   });
 }
-const Container = styled("div")(() => ({
+const Container = styled$1("div")(() => ({
   display: "flex",
   alignItems: "center"
 }));
-const RowsLabel = styled("span")(() => ({}));
-const InsetLabel = styled("span")(({ theme }) => ({
+const RowsLabel = styled$1("span")(() => ({}));
+const InsetLabel = styled$1("span")(({ theme }) => ({
   marginLeft: theme.spacing(2),
   paddingTop: "2px",
   paddingBottom: "2px",
@@ -1458,13 +1459,13 @@ function RowsCount() {
     })]
   });
 }
-const WrapperDensity = styled("div")(({ theme }) => ({
+const WrapperDensity = styled$1("div")(({ theme }) => ({
   marginLeft: 0,
   [theme.breakpoints.up("sm")]: {
     marginLeft: theme.spacing(3)
   }
 }));
-const SKTWrapperDensity = styled("div")(({ theme }) => ({
+const SKTWrapperDensity = styled$1("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -1545,7 +1546,7 @@ function Density() {
     })
   });
 }
-const WrapperActions = styled("div")(({ theme }) => ({
+const WrapperActions = styled$1("div")(({ theme }) => ({
   ...theme.typography.caption,
   position: "absolute",
   left: "0px",
@@ -1693,7 +1694,7 @@ function columnConcatenatedValuesFormatter(props) {
 function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
 }
-const Input = styled("input")(() => ({
+const Input = styled$1("input")(() => ({
   appearance: "none",
   boxSizing: "border-box",
   inlineSize: "100%",

package/components/DynamicFilter/DynamicFilter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DynamicFilterProps } from './types';
+/**
+ * @description Punto de entrada del componente
+ *              El componente inicia su renderización cuando si el Flag FLAG_DICTIONARY_LOADED ha llegado.
+ * @param inProps
+ * @returns
+ */
+export declare const DynamicFilter: (inProps: DynamicFilterProps) => JSX.Element | null;

package/components/DynamicFilter/classes/index.d.ts

@@ -0,0 +1,5 @@
+import { DynamicFilterClasses } from './types';
+import { OwnerState } from '../contexts/DynamicFilterContext/store';
+export declare const dynamicFilterClasses: DynamicFilterClasses;
+export declare const useUtilityClasses: (ownerState: OwnerState) => Record<"root" | "containerFistRow" | "filterButton" | "containerInputFilter" | "wrapperApplyedFilters" | "containerApplyedFilters" | "applyedFilter" | "popUpMenuFields" | "popoverMenuFieldsItem" | "popoverFilterPaper" | "popoverFilterHeader" | "containerBooleanFilter" | "containerDateTimeFilter" | "containerNumberFilter" | "containerStringFilter" | "clearFilters", string>;
+export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/DynamicFilter/classes/types.d.ts

@@ -0,0 +1,22 @@
+export interface DynamicFilterClasses {
+    root: string;
+    containerFistRow: string;
+    filterButton: string;
+    containerInputFilter: string;
+    wrapperApplyedFilters: string;
+    containerApplyedFilters: string;
+    applyedFilter: string;
+    popUpMenuFields: string;
+    popoverMenuFieldsItem: string;
+    popoverFilterPaper: string;
+    popoverFilterHeader: string;
+    containerBooleanFilter: string;
+    containerDateTimeFilter: string;
+    containerNumberFilter: string;
+    containerStringFilter: string;
+    inEdition: string;
+    isValid: string;
+    isDirty: string;
+    isMobile: string;
+}
+export declare type DynamicFilterClassesKey = keyof DynamicFilterClasses;

package/components/DynamicFilter/constants.d.ts

@@ -0,0 +1,14 @@
+import { BooleanOperator, DateTimeOperator, Field, NumberOperator, Operator, StringOperator } from './types';
+export declare const COMPONENT_TEST_ID = "m4ldynamicfilter";
+export declare const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
+export declare const ASSETS_URL = "/frontend/components/dynamic_filter/assets/icons/";
+export declare const ASSETS: {
+    readonly refresh: "refresh.svg";
+    readonly search: "search.svg";
+};
+export declare const ALL_FIELDS: Field;
+export declare const OPERATORS: Array<Operator>;
+export declare const STRING_OPERATORS: Array<StringOperator>;
+export declare const NUMBER_OPERATORS: Array<NumberOperator>;
+export declare const BOOLEAN_OPERATORS: Array<BooleanOperator>;
+export declare const DATE_TIME_OPERATORS: Array<DateTimeOperator>;

package/components/DynamicFilter/contexts/DynamicFilterContext/helpers.d.ts

@@ -0,0 +1,24 @@
+import { Field, FilterFieldApplyed, InitialFilterApplyed, RawFilterFieldApply } from '../../types';
+export declare const getFilterById: (id: number, applyedFilters: Array<FilterFieldApplyed>) => number;
+/**
+ * @description Función formateadora filtros como el DynamicFilter los usa a nivel interno a como se guardan en las cookies
+ * @param applyedFilters Filtros actualmente aplicados
+ * @returns
+ */
+export declare const formatToInitialFilters: (applyedFilters: Array<FilterFieldApplyed>) => Array<InitialFilterApplyed>;
+/**
+ * @description Función formateadora filtros como el DynamicFilter los usa a nivel interno a como se envían a la API
+ * @param applyedFilters Filtros actualmente aplicados
+ * @returns
+ */
+export declare const formatToRawFilter: (applyedFilters: Array<FilterFieldApplyed>) => Array<RawFilterFieldApply>;
+/**
+ * @name getPurgedInitialFiltersApplyed
+ * @description Función encargada de purgar cualquier error que pueda venir del endpoint, por algun cambio de versión
+ *
+ * @param fields todos los campos que pueden aparecer en el filtro no Inclute el AllField
+ * @param initialFilters Filtros que van a ser purgados (Eliminados si tienen errores)
+ * @param getFieldByName Funcion para obtener el Field a través del nombre
+ * @returns Array de filtros aplicados excluyendo los que tengan errores
+ */
+export declare const getPurgedInitialFiltersApplyed: (fields: Array<Field>, initialFilters: Array<InitialFilterApplyed>, getFieldByName: (name: string) => Field) => Array<FilterFieldApplyed>;

package/components/DynamicFilter/contexts/DynamicFilterContext/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DynamicFilterProviderProps } from './types';
+declare const DynamicFilterContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./store").DynamicFilterStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import("./store").DynamicFilterStateWithActions | Partial<import("./store").DynamicFilterStateWithActions> | ((state: import("./store").DynamicFilterStateWithActions) => import("./store").DynamicFilterStateWithActions | Partial<import("./store").DynamicFilterStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import("./store").DynamicFilterStateWithActions | Partial<import("./store").DynamicFilterStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./store").DynamicFilterStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+/**
+ * @description Contexto que crea y da alcance al Store (Zustand) para ser usado desde cualquier parte del componente.
+ * @param props DynamicFilterProviderProps
+ * @returns Proveedor de contexto, y el contexto
+ */
+declare function DynamicFilterProvider(props: DynamicFilterProviderProps): JSX.Element;
+export { DynamicFilterProvider, DynamicFilterContext };

package/components/DynamicFilter/contexts/DynamicFilterContext/store.d.ts

@@ -0,0 +1,213 @@
+import { GetLabelType } from '@m4l/core';
+import { Field, FilterFieldApplyed, FilterToEditApply, InitialFilterApplyed, OnChangeFilters } from '../../types';
+import { Classes } from '../../classes';
+import { WritableDraft } from 'immer/dist/internal';
+export declare type OpenFor = 'add' | 'edit';
+export interface PopoverFilterDataBase {
+    /**
+     *  "openFor" motivo de apertura del popup
+     */
+    openFor: OpenFor;
+    /**
+     *  "fnAnchorEl" Anchor para ubicar el popup y se pone como función debido a que Immer no soporta un draft de Element
+     */
+    fnAnchorEl: () => Element;
+}
+export interface PopoverFilterDataAdd extends PopoverFilterDataBase {
+    openFor: 'add';
+    /**
+     *  "field" Campo por el cual se va a filtrar
+     */
+    field: Field;
+}
+export interface PopoverFilterDataEdit extends PopoverFilterDataBase {
+    openFor: 'edit';
+    /**
+     *  "filter" filtro que se va a editar
+     */
+    filter: FilterFieldApplyed;
+}
+/**
+ *
+ * @description Tipo usado para cuado se va agregar o modificar un filtro
+ */
+export declare type PopoverFilterData = PopoverFilterDataAdd | PopoverFilterDataEdit;
+/**
+ * @interface
+ * @name OwnerState
+ * @description Interface que define la variables que se van a usar en clases del componente
+ */
+export declare type OwnerState = {
+    /**
+     *  "inEdition" se establece cuando se está en edición.
+     */
+    inEdition: boolean;
+    /**
+     *  "isDirty" cuando el comnponente tiene filtros por aplicar
+     */
+    isDirty: boolean;
+    /**
+     *  "isValid" cuando el comnponente está en un estado invalido
+     */
+    isValid: boolean;
+    /**
+     *  "isMobile" cuando el navegador está en modo celular
+     */
+    isMobile: boolean;
+};
+/**
+ * @interface DynamicFilterState
+ * @name DynamicFilterState
+ * @description Interface que define el estado del componente
+ */
+export interface DynamicFilterState {
+    /**
+     *  "fields" Campos por los que se puede filtrar
+     */
+    fields: Array<Field>;
+    /**
+     *  "withAllField" indica si permite o no filtrar por todos los campos
+     */
+    withAllField: boolean;
+    /**
+     *  "ownerState" estado a nivel de clases del componente
+     */
+    ownerState: OwnerState;
+    /**
+     *  "allField" Campo que se usa cuando se puede buscar por todos los campos
+     */
+    allField: Field;
+    /**
+     *  "automatic" Configura si el filtro se ejecuta automaticamente cuando se agrega o se modifica un filtro
+     */
+    automatic: boolean;
+    /**
+     * @description  Funcion que retorna el elemento (inputFilter) desde donde se desprende el listado de campos
+     *               Si no está definida, el menú de campos no se muestra
+     * @returns
+     */
+    fnAnchorEl?: () => Element;
+    /**
+     *  "inputData" texto en el InputFilter
+     */
+    inputData: string;
+    /**
+     * @description Campos disponibles para filtrar
+     */
+    availableFields: Array<Field>;
+    applyedFilters: Array<FilterFieldApplyed>;
+    onChangeFilters: OnChangeFilters;
+    /** popoverFilterData: para emerger el popuup de modificación campos  */
+    popoverFilterData?: PopoverFilterData;
+    classes: Classes;
+    getLabel: GetLabelType;
+}
+export interface DynamicFilterStateWithActions extends DynamicFilterState {
+    actions: {
+        /**
+         * @description inicializa el estado del componente con los filtros que provienen desde afuera
+         * @param initialFiltersApplyed Filtros iniciales
+         */
+        init: (initialFiltersApplyed: Array<InitialFilterApplyed>) => void;
+        /**
+         * @description Objetiene el Campo dado el nombre
+         * @param name
+         * @returns Field o undefined si no se encuentra
+         */
+        getFieldByName: (name: string) => Field;
+        /**
+         * @description remueve un filtro si existe, y dispara el trigger de onChangeFilters
+         * @param id //identificador unico de un filtro
+         */
+        removeFilter: (id: number) => void;
+        /**
+         *
+         * @param anchorEl Elemento de donde va emerger el popup
+         * @param field Campo por el cual se va filtrar
+         * @returns
+         */
+        showPopoverFilterForAdd: (anchorEl: Element, field: Field) => void;
+        /**
+         * @description Muestra la ventan de edición de un filtro aplicado
+         * @param anchorEl Anchor de elemento desde donde debe emerger
+         * @param filterToEdit Filtro a editar
+         * @returns
+         */
+        showPopoverFilterForEdit: (anchorEl: Element, filterToEdit: FilterFieldApplyed) => void;
+        /**
+         * @description Oculta la ventana de edición
+         * @param stayInEditon determina si continua en edicióin
+         */
+        hidePopoverFilter: (stayInEditon: boolean) => void;
+        /**
+         * @description Limpia todos los filtros aplicados menos los fixed
+         */
+        clearFilters: VoidFunction;
+        /**
+         * @description llama al onChangeFilters proporcionado en los props del componente
+         */
+        fireOnChangeFilters: VoidFunction;
+        /**
+         * @description Función encargada de encontrar un Id par un nuevo filtro
+         * @returns Id de filtro
+         */
+        getNewId: () => number;
+        /**
+         * @description Agrega un filtro setedo y correcto a los filtros aplicados (applyedFilters)
+         * @param newFilter Filtro a agregar
+         * @returns
+         */
+        addFilter: (newFilter: FilterFieldApplyed) => void;
+        /**
+         * @description Modifica un filtro que se encuentra en applyedFilters
+         * @param filterToEdit filtro a editar
+         * @returns
+         */
+        updateFilter: (filterToEdit: FilterToEditApply) => void;
+        /**
+         * @description Modifica el texto que se visuliza en el InputFilter
+         * @param text texto en el input
+         * @returns
+         */
+        setInputData: (inputData: string) => void;
+        /**
+         * @description Modifica el estado de edición del componente
+         * @param newInEdition Estado de edición
+         * @returns
+         */
+        setInEdition: (newInEdition: boolean) => void;
+        /**
+         * @description Modifica el estado de isMobile del componente
+         * @param newIsMobile
+         * @returns
+         */
+        setIsMobile: (newIsMobile: boolean) => void;
+        /**
+         * @description Establece la función de apertura del menuu de campos
+         * @param anchorEl
+         * @returns
+         */
+        openPopoverMenuFields: (anchorEl: Element) => void;
+        /**
+         * @description Limpia la función de apertura del menu de campos (por el valor anchorEl = undefined)
+         */
+        closePopoverMenuFields: (newInEdition?: boolean) => void;
+    };
+}
+declare type InitialStoreProps = Pick<DynamicFilterState, 'automatic' | 'onChangeFilters' | 'automatic' | 'fields' | 'withAllField' | 'getLabel' | 'getLabel' | 'allField' | 'ownerState'>;
+/**
+ * @description  Crea el store de zustand para el componente DynamicFilter
+ * @param initProps Variables iniciales que necesita store para poder inicializarlo
+ * @returns
+ */
+export declare const createAreaStore: (initProps: InitialStoreProps) => Omit<Omit<import("zustand").StoreApi<DynamicFilterStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: DynamicFilterStateWithActions | Partial<DynamicFilterStateWithActions> | ((state: DynamicFilterStateWithActions) => DynamicFilterStateWithActions | Partial<DynamicFilterStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: DynamicFilterStateWithActions | Partial<DynamicFilterStateWithActions> | ((state: WritableDraft<DynamicFilterStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type DynamicFilterStore = ReturnType<typeof createAreaStore>;
+export {};

package/components/DynamicFilter/contexts/DynamicFilterContext/types.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { DynamicFilterProps } from '../../types';
+export interface DynamicFilterProviderProps extends DynamicFilterProps {
+    children: ReactNode;
+}

package/components/DynamicFilter/dictionary.d.ts

@@ -1,3 +1,24 @@
 import { Dictionary } from '@m4l/core';
+export declare const DYNAMICFILTER_DICTIONARY_ID = "dynamic_filter";
 export declare function getDynamicFilterComponentsDictionary(): string[];
 export declare const defaultDynamicFilterDictionary: Dictionary;
+export declare const LABEL_FILTER_BUTTON = "filter_tooltip";
+export declare const DICCTIONARY: {
+    readonly input_placeholder: "input_placeholder";
+    readonly operand_true: "true";
+    readonly operand_false: "false";
+    readonly filter_tooltip_refresh: "filter_tooltip_refresh";
+    readonly filter_tooltip_dirty: "filter_tooltip_dirty";
+    readonly filter_tooltip_invalid: "filter_tooltip_invalid";
+    readonly operator_b: "operator_b";
+    readonly operator_e: "operator_e";
+    readonly operator_ne: "operator_ne";
+    readonly operator_gt: "operator_gt";
+    readonly operator_gte: "operator_gte";
+    readonly operator_lt: "operator_lt";
+    readonly operator_lte: "operator_lte";
+    readonly operator_c: "operator_c";
+    readonly operator_nc: "operator_nc";
+};
+export declare type TypeDictionary = typeof DICCTIONARY;
+export declare const getDynamicFilterDictionary: (key: keyof TypeDictionary) => string;