@m4l/components 9.2.17 → 9.2.19

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useMemo, useEffect, useCallback } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
+import { useFirstRender } from "@m4l/graphics";
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
@@ -114,6 +115,7 @@ function DataGridProvider(props) {
     rowKeyGetter,
     onChangeUserColumns
   } = props;
+  const isFirstRender = useFirstRender();
   const [columnsWidths, setColumnsWidths] = useState(
     /* @__PURE__ */ new Map()
   );
@@ -145,9 +147,22 @@ function DataGridProvider(props) {
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
   let timerSaveColumns;
   useEffect(() => {
-    setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
-    setColumnsConfigOptions(getColumnsConfig(id, columns, defaultUserColumns));
-  }, [columns, id, defaultUserColumns]);
+    if (isFirstRender) {
+      setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
+      setColumnsConfigOptions(getColumnsConfig(id, columns, defaultUserColumns));
+    }
+  }, [defaultUserColumns]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      const newColumns = columns.filter((column, index) => column.key !== columnsConfig[index]?.key);
+      const newColConfig = getColumnsConfig(id, newColumns).map((column, index) => {
+        const indexNewCol = index + columnsConfig.length;
+        return { ...column, index: indexNewCol, orginalIndex: indexNewCol };
+      });
+      columnsConfig.push(...newColConfig);
+      setColumnsWidths((prevColumnsWidth) => new Map([...prevColumnsWidth, ...getColumnsWidth(id, newColumns, defaultUserColumns)]));
+    }
+  }, [columns, id]);
   const onChangeColumnsConfig = useCallback(
     (newColumnsConfig) => {
       saveColumnsConfig(id, newColumnsConfig, onChangeUserColumns);

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -42,15 +42,18 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
     return !column.hidden && visible;
   }).sort(
-    (a, b) => (
-      // Sort for index
-      getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
-    )
+    (a, b) => {
+      let indexA = getColumIndex(a.key, columnsConfig);
+      indexA = indexA === -1 ? columnsConfig.length : indexA;
+      let indexB = getColumIndex(b.key, columnsConfig);
+      indexB = indexB === -1 ? columnsConfig.length : indexB;
+      return indexA - indexB;
+    }
   ).map((columnSorted) => {
     const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
     return {
       ...columnSorted,
-      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
+      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : false,
       width: typeof columnsWidths.get(columnSorted.key) === "number" ? columnsWidths.get(columnSorted.key) : columnSorted.width
     };
   }).sort((a, b) => {

package/components/DynamicFilter/DynamicFilter.d.ts

@@ -1,5 +1,9 @@
-import { DynamicFilterProps } from './types';
+import { DynamicFilterProps, DynamicFilterRef } from './types';
 /**
- * TODO: Documentar
+ * DynamicFilter: Componente que renderiza filtros dinámicos para una lista de elementos.
+ *
+ *  ### Dependecias:
+ *- **`useFlagsPresent:`** Hook que permite verificar si una lista de flags se encuentran presentes.
+ *
  */
-export declare function DynamicFilter(props: DynamicFilterProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const DynamicFilter: import('react').ForwardRefExoticComponent<DynamicFilterProps & import('react').RefAttributes<DynamicFilterRef>>;

package/components/DynamicFilter/DynamicFilter.js

@@ -1,14 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { useFlagsPresent, CommonFlags } from "@m4l/core";
+import { forwardRef } from "react";
 import { D as DynamicFilterProvider } from "./store/DynamicFilterContext.js";
 import { D as DynamicFilterBase } from "./subcomponents/DynamicFilterBase/DynamicFilterBase.js";
-function DynamicFilter(props) {
+const DynamicFilter = forwardRef((props, ref) => {
   const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
   if (!hasPresentFlags) {
     return null;
   }
-  return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
-}
+  return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
+});
 export {
   DynamicFilter as D
 };

package/components/DynamicFilter/{DynamicFIlter.styles.d.ts → DynamicFilter.styles.d.ts}

@@ -1,2 +1,2 @@
-import { DynamicFilterStyles } from '../DynamicFilter/types';
+import { DynamicFilterStyles } from './types';
 export declare const dynamicFilterStyles: DynamicFilterStyles;

package/components/DynamicFilter/{DynamicFIlter.styles.js → DynamicFilter.styles.js}

@@ -128,7 +128,7 @@ const dynamicFilterStyles = {
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
-  actions: ({ theme }) => ({
+  actions: ({ theme, ownerState }) => ({
     gridArea: "actions-filter",
     overflow: "hidden",
     display: "flex",
@@ -139,7 +139,7 @@ const dynamicFilterStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    borderLeft: theme.vars.size.borderStroke.container,
+    borderLeft: !ownerState.visibleRefresh && !ownerState.isDirty ? "none" : theme.vars.size.borderStroke.container,
     borderColor: theme.vars.palette.border?.default
   }),
   actionsClearButton: {
@@ -151,6 +151,24 @@ const dynamicFilterStyles = {
   actionsSubmitButton: ({ theme, ownerState }) => ({
     ...ownerState.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.enabled}` } : {
       visibility: "visible"
+    },
+    ...ownerState.isDirty ? {
+      animation: "changeBgColor 0.9s ease infinite",
+      "& .M4LIcon-icon": {
+        background: `${theme.vars.palette.primary.main} !important`
+      }
+    } : null,
+    //Create and apply animation with change background color red and green
+    "@keyframes changeBgColor": {
+      "0%": {
+        background: theme.vars.palette.primary.hoverOpacity
+      },
+      "50%": {
+        background: theme.vars.palette.primary.activeOpacity
+      },
+      "100%": {
+        background: theme.vars.palette.primary.hoverOpacity
+      }
     }
   }),
   /**

package/components/DynamicFilter/dictionary.d.ts

@@ -1,6 +1,7 @@
 export declare const DYNAMIC_FILTER_DICTIONARY_ID = "dynamic_filter";
 /**
- * TODO: Documentar
+ * getDynamicFilterComponentsDictionary: Devuelve un array con los ids de los componentes que
+ * componente DynamicFilter.
  */
 export declare function getDynamicFilterComponentsDictionary(): string[];
 export declare const DICCTIONARY: {
@@ -39,4 +40,8 @@ export declare const DICCTIONARY: {
     readonly error_operand_required: "error_operand_required";
 };
 export type TypeDictionary = typeof DICCTIONARY;
+/**
+ * getDynamicFilterDictionary: Devuelve el id del diccionario de un componente DynamicFilter.
+ * @param key - Clave del diccionario.
+ */
 export declare const getDynamicFilterDictionary: (key: keyof TypeDictionary) => string;

package/components/DynamicFilter/helpers/frontEndHelpers.js

@@ -208,6 +208,6 @@ function getFilterGroupFieldsByName(fields) {
   }, {});
 }
 export {
-  getFilterGroupFieldsByName as a,
-  getIsIfInDynamicFilter as g
+  getIsIfInDynamicFilter as a,
+  getFilterGroupFieldsByName as g
 };

package/components/DynamicFilter/index.d.ts

@@ -1,4 +1,4 @@
-export * from './DynamicFilter';
 export { getDynamicFilterComponentsDictionary } from './dictionary';
-export type { FilterFieldApplied as FilterFieldApply, RawFilterFieldApply, InitialFilterApplied, FilterField, } from './types';
-export { getIsIfInDynamicFilter, getFilterGroupFieldsByName } from './helpers/frontEndHelpers';
+export * from './DynamicFilter';
+export type { FilterField, FilterFieldApplied as FilterFieldApply, InitialFilterApplied, RawFilterFieldApply, } from './types';
+export { getFilterGroupFieldsByName, getIsIfInDynamicFilter } from './helpers/frontEndHelpers';

package/components/DynamicFilter/slots/dynamicFilterSlots.js

@@ -1,8 +1,8 @@
 import { styled } from "@mui/material/styles";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../constants.js";
-import { d as dynamicFilterStyles } from "../DynamicFIlter.styles.js";
+import { d as dynamicFilterStyles } from "../DynamicFilter.styles.js";
 import { D as DynamicFilterSlots } from "./SlotsEnum.js";
-import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { DynamicFilterProps } from '../types';
+import { DynamicFilterProps, DynamicFilterRef } from '../types';
 declare const DynamicFilterContext: import('react').Context<import('zustand').StoreApi<import('./types').DynamicFilterStateWithActions> | null>;
 interface DynamicFilterContextProps extends DynamicFilterProps {
     children: ReactNode;
 }
 /**
- * TODO: Documentar
+ * Proveedor de contexto para el componente DynamicFilter
  */
-declare function DynamicFilterProvider(props: DynamicFilterContextProps): import("react/jsx-runtime").JSX.Element;
-export { DynamicFilterProvider, DynamicFilterContext };
+declare const DynamicFilterProvider: import('react').ForwardRefExoticComponent<DynamicFilterContextProps & import('react').RefAttributes<DynamicFilterRef>>;
+export { DynamicFilterContext, DynamicFilterProvider };

package/components/DynamicFilter/store/DynamicFilterContext.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useRef, useEffect } from "react";
-import { useStore } from "zustand";
-import { shallow } from "zustand/shallow";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
 import { useIsMobile, useFirstRender } from "@m4l/graphics";
+import { createContext, forwardRef, useRef, useImperativeHandle, useEffect } from "react";
+import { useStore } from "zustand";
+import { shallow } from "zustand/shallow";
 import { A as ALL_FIELD } from "../constants.js";
-import { f as formatToRawFilter } from "../helpers/formatToRowFilter.js";
 import { f as formatToInitialFilters } from "../helpers/formatToInitialFilters.js";
+import { f as formatToRawFilter } from "../helpers/formatToRowFilter.js";
 import { c as createDynamicFilterStore } from "./DynamicFilterStore.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const DynamicFilterContext = createContext(null);
-function DynamicFilterProvider(props) {
+const DynamicFilterProvider = forwardRef((props, ref) => {
   const {
     automatic = true,
     withAllField = true,
@@ -21,7 +21,8 @@ function DynamicFilterProvider(props) {
     size = "medium",
     children,
     storeId,
-    storeDevtoolsEnabled = false
+    storeDevtoolsEnabled = false,
+    visibleRefresh = true
   } = props;
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
@@ -44,9 +45,10 @@ function DynamicFilterProvider(props) {
       dataTestId,
       size,
       storeId,
+      visibleRefresh,
       ownerState: {
         isSkeleton,
-        isDirty: !automatic,
+        isDirty: false,
         inEdition: false,
         isValid: true,
         isMobile: !isDesktop,
@@ -56,6 +58,14 @@ function DynamicFilterProvider(props) {
     }, storeDevtoolsEnabled);
     dynamicFilterStoreRef.current.getState().actions.init(initialAppliedFilters);
   }
+  const fireOnChangeFilters = useStore(
+    dynamicFilterStoreRef.current,
+    (state) => state.actions.fireOnChangeFilters,
+    shallow
+  );
+  useImperativeHandle(ref, () => ({
+    fireOnChangeFilter: fireOnChangeFilters
+  }));
   const countOnChangeFiltersApplied = useStore(
     dynamicFilterStoreRef.current,
     (state) => state.countOnChangeFiltersApplied,
@@ -86,10 +96,15 @@ function DynamicFilterProvider(props) {
     }
   }, []);
   useEffect(() => {
-    dynamicFilterStoreRef.current?.getState().actions.setSize(adjustedSize);
-  }, [adjustedSize]);
+    if (dynamicFilterStoreRef.current?.getState().size !== adjustedSize) {
+      dynamicFilterStoreRef.current?.getState().actions.setSize(adjustedSize);
+    }
+    if (dynamicFilterStoreRef.current?.getState().visibleRefresh !== visibleRefresh) {
+      dynamicFilterStoreRef.current?.getState().actions.setVisibleRefresh(visibleRefresh);
+    }
+  }, [adjustedSize, visibleRefresh]);
   return /* @__PURE__ */ jsx(DynamicFilterContext.Provider, { value: dynamicFilterStoreRef.current, children });
-}
+});
 export {
   DynamicFilterProvider as D,
   DynamicFilterContext as a

package/components/DynamicFilter/store/DynamicFilterStore.js

@@ -1,8 +1,8 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { g as getPurgedInitialFiltersApplied } from "../helpers/getPurgedInitialFiltersApplied.js";
 import { a as DYNAMIC_FILTER_SOTORE_ID } from "../constants.js";
+import { g as getPurgedInitialFiltersApplied } from "../helpers/getPurgedInitialFiltersApplied.js";
 function updateAvailableFields(state) {
   state.availableFields = state.fields.filter((field) => {
     if (field.multiple === void 0 || field.multiple) {
@@ -47,7 +47,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
         ...startProps,
         actions: {
           /**
-           * TODO: Documentar
+           * init: Inicializa el store, se debe llamar al iniciar el componente
            */
           init: (initialFiltersApplied) => {
             set((state) => {
@@ -70,7 +70,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             return elementRef;
           },
           /**
-           * TODO: Documentar
+           * Actualiza el listado de campos disponibles para filtrar
            */
           getFieldByName: (name) => {
             const field = (get().withAllField ? get().fields.concat(get().allField) : get().fields).find((f) => {
@@ -82,7 +82,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             throw new Error("No exist field");
           },
           /**
-           * TODO: Documentar
+           * Elimina un campo filter por su id
            */
           removeFilter: (id) => {
             set((state) => {
@@ -91,11 +91,14 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
                 state.appliedFilters.splice(indexToRemoved, 1);
                 state.ownerState.isEmpty = state.appliedFilters.length === 0;
                 updateAutomatic(state);
+                if (state.appliedFilters.length === 0) {
+                  state.ownerState.isDirty = false;
+                }
               }
             });
           },
           /**
-           * TODO: Documentar
+           * muestra el popover para agregar un nuevo filtro
            */
           showPopoverFilterForAdd: (field) => {
             set((state) => {
@@ -109,7 +112,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * muestra el popover para editar un filtro
            */
           showPopoverFilterForEdit: (filterToEdit) => {
             set((state) => {
@@ -122,7 +125,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             get().actions.setInEdition(true);
           },
           /**
-           * TODO: Documentar
+           * oculta el popover de filtros
            */
           hidePopoverFilter: (stayInEdition) => {
             set((state) => {
@@ -131,7 +134,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             get().actions.setInEdition(stayInEdition);
           },
           /**
-           * TODO: Documentar
+           * Limpia todos los filters aplicados
            */
           clearFilters: () => {
             set((state) => {
@@ -139,11 +142,12 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
               state.ownerState.isEmpty = state.appliedFilters.length === 0;
               state.popoverFilterData = void 0;
               state.ownerState.inEdition = false;
+              state.ownerState.isDirty = false;
               updateAutomatic(state);
             });
           },
           /**
-           * TODO: Documentar
+           * Acción que se ejecuta al aplicar los filtros
            */
           fireOnChangeFilters: () => {
             set((state) => {
@@ -154,7 +158,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * obtiene el id del nuevo filtro
            */
           getNewId: () => {
             return get().appliedFilters.reduce((prev, filterField) => {
@@ -162,17 +166,20 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             }, 0) + 1;
           },
           /**
-           * TODO: Documentar
+           * agrega un nuevo filtro
            */
           addFilter: (newFilter) => {
             set((state) => {
+              if (!state.automatic) {
+                state.ownerState.isDirty = true;
+              }
               state.appliedFilters.push(newFilter);
               state.ownerState.isEmpty = state.appliedFilters.length === 0;
               updateAutomatic(state);
             });
           },
           /**
-           * TODO: Documentar
+           * actualiza un filtro
            */
           updateFilter: (editFilter) => {
             set((state) => {
@@ -186,7 +193,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * actualiza el inputData
            */
           setInputData: (inputData) => {
             set((state) => {
@@ -194,7 +201,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * actualiza el editor de filtros
            */
           setInEdition: (newInEdition) => {
             set((state) => {
@@ -202,7 +209,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * actualiza el estado externo del componente
            */
           setExternalState: (newExternalState) => {
             set((state) => {
@@ -210,7 +217,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * abre el popover para seleccionar los campos a filtrar
            */
           openPopoverMenuFields: () => {
             set((state) => {
@@ -219,7 +226,7 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * cierra el popover para seleccionar los campos a filtrar
            */
           closePopoverMenuFields: (newInEdition) => {
             set((state) => {
@@ -235,6 +242,14 @@ const createDynamicFilterStore = (initProps, storeDevtoolsEnabled = false) => {
               state.size = newSize;
               state.ownerState.size = newSize;
             });
+          },
+          /**
+           * actualiza el visibleRefresh del componente
+           */
+          setVisibleRefresh: (newVisibleRefresh) => {
+            set((state) => {
+              state.visibleRefresh = newVisibleRefresh;
+            });
           }
         }
       })),

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

@@ -1,7 +1,7 @@
-import { MutableRefObject } from 'react';
 import { GetLabelType } from '@m4l/core';
 import { Sizes } from '@m4l/styles';
-import { FilterField, FilterFieldApplied, FilterToEditApply, InitialFilterApplied, OwnerState } from '../types';
+import { MutableRefObject } from 'react';
+import { DynamicFilterProps, FilterField, FilterFieldApplied, FilterToEditApply, InitialFilterApplied, OwnerState } from '../types';
 export type OpenFor = 'add' | 'edit';
 export interface PopoverFilterDataBase {
     /**
@@ -35,19 +35,7 @@ export type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
 /**
  * Interface que define el estado del componente
  */
-export interface DynamicFilterState {
-    /**
-     *  "storeId" identificador del store
-     */
-    storeId?: string;
-    /**
-     *  "fields" Campos por los que se puede filtrar
-     */
-    fields: Array<FilterField>;
-    /**
-     *  "withAllField" indica si permite o no filtrar por todos los campos
-     */
-    withAllField: boolean;
+export interface DynamicFilterState extends Pick<DynamicFilterProps, 'visibleRefresh' | 'size' | 'dataTestId' | 'automatic' | 'storeId' | 'withAllField' | 'fields'> {
     /**
      *  "ownerState" estado a nivel de clases del componente
      */
@@ -56,19 +44,10 @@ export interface DynamicFilterState {
      *  "allField" Campo que se usa cuando se puede buscar por todos los campos
      */
     allField: FilterField;
-    /**
-     *  "automatic" Configura si el filtro se ejecuta automaticamente cuando se agrega o se modifica un filtro
-     */
-    automatic: boolean;
     /**
      *  "isOpenPopoverMenuFields" determina si se debe abrir el menú de campos
      */
     isOpenPopoverMenuFields?: boolean;
-    /**
-     *  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
-     */
     /**
      *  "inputData" texto en el InputFilter
      */
@@ -90,16 +69,10 @@ export interface DynamicFilterState {
      * :popoverFilterData" para emerger el popuup de modificación campos
      */
     popoverFilterData?: PopoverFilterData;
-    getLabel: GetLabelType;
     /**
-     *  dataTestId:
-     *  Esta propiedad sirve para generar identificadores únicos.
+     * Función utilizada para el dictionary
      */
-    dataTestId: string;
-    /**
-     * size: tamaño del componente
-     */
-    size: Extract<Sizes, 'small' | 'medium'>;
+    getLabel: GetLabelType;
 }
 export interface DynamicFilterStateWithActions extends DynamicFilterState {
     actions: {
@@ -203,6 +176,10 @@ export interface DynamicFilterStateWithActions extends DynamicFilterState {
          * actualiza el tamaño del componente
          */
         setSize: (size: Extract<Sizes, 'small' | 'medium'>) => void;
+        /**
+         * actualiza el estado del componente
+         */
+        setVisibleRefresh: (newVisibleRefresh: boolean) => void;
     };
 }
-export type InitialStoreProps = Pick<DynamicFilterState, 'automatic' | 'fields' | 'withAllField' | 'getLabel' | 'allField' | 'ownerState' | 'dataTestId' | 'size' | 'storeId'>;
+export type InitialStoreProps = Pick<DynamicFilterState, 'automatic' | 'fields' | 'withAllField' | 'getLabel' | 'allField' | 'ownerState' | 'dataTestId' | 'size' | 'storeId' | 'visibleRefresh'>;

package/components/DynamicFilter/subcomponents/AppliedFilterChip/useAppliedFilterChip.js

@@ -1,6 +1,6 @@
-import { useMemo } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { useFormatter } from "@m4l/graphics";
+import { useMemo } from "react";
 import { u as useDynamicFilterStore } from "../../store/useDynamicFilterStore.js";
 import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";
 function useAppliedFilterChip(filter) {

package/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * AppliedFilters: Muestra los filtros aplicados en el InputFilter
  */
 declare function AppliedFilters(): import("react/jsx-runtime").JSX.Element;
 export default AppliedFilters;

package/components/DynamicFilter/subcomponents/AppliedFilters/useAppliedFilters.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * useAppliedFilters: Hook que permite obtener los filtros aplicados y su estado de carga.
  */
 declare function useAppliedFilters(): {
     appliedFiltersSorted: import('../..').FilterFieldApply[];

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * DynamicFilterBase: Componente base del DynamicFilter.
  */
 declare function DynamicFilterBase(): import("react/jsx-runtime").JSX.Element;
 export default DynamicFilterBase;

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
+import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
 import { I as InputFilter } from "../InputFilter/InputFilter.js";
@@ -17,12 +17,12 @@ function DynamicFilterBase() {
     {
       className: classRoot,
       ownerState: { ...ownerState },
-      ...getPropDataTestId(dataTestId, DynamicFilterSlots.root),
+      ...getPropDataTestId(DYNAMIC_FILTER_KEY_COMPONENT, DynamicFilterSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(
         InnerContainerStyled,
         {
           ownerState: { ...ownerState },
-          ...getPropDataTestId(dataTestId, DynamicFilterSlots.innerContainer),
+          ...getPropDataTestId(DYNAMIC_FILTER_KEY_COMPONENT, DynamicFilterSlots.innerContainer, dataTestId),
           children: [
             /* @__PURE__ */ jsx(InputFilter, {}),
             /* @__PURE__ */ jsx(AppliedFilters, {}),

package/components/DynamicFilter/subcomponents/DynamicFilterBase/useDynamicFilterBase.d.ts

@@ -1,8 +1,9 @@
 /**
- * TODO: Documentar
+ * Hook que hace uso del store del dynamicFilterStore
  */
 export default function useDynamicFilterBase(): {
     ownerState: import('../../types').OwnerState;
-    dataTestId: string;
-    size: "small" | "medium";
+    dataTestId: string | undefined;
+    size: "small" | "medium" | undefined;
+    visibleRefresh: boolean | undefined;
 };

package/components/DynamicFilter/subcomponents/DynamicFilterBase/useDynamicFilterBase.js

@@ -3,7 +3,8 @@ function useDynamicFilterBase() {
   const ownerState = useDynamicFilterStore((state) => state.ownerState);
   const dataTestId = useDynamicFilterStore((state) => state.dataTestId);
   const size = useDynamicFilterStore((state) => state.size);
-  return { ownerState, dataTestId, size };
+  const visibleRefresh = useDynamicFilterStore((state) => state.visibleRefresh);
+  return { ownerState, dataTestId, size, visibleRefresh };
 }
 export {
   useDynamicFilterBase as u