@m4l/components 9.2.18 → 9.2.19

package/components/DynamicSort/store/DynamicSortStore.js

@@ -45,7 +45,7 @@ const createDevtools = (immerMiddlewere, config) => {
   }
   return immerMiddlewere;
 };
-const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
+const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
   const startProps = {
     countOnChangeSortsApplyed: 0,
     appliedSorts: [],
@@ -62,7 +62,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
         ...startProps,
         actions: {
           /**
-           * TODO: Documentar
+           * init es la acción que se ejecuta al inicializar el store
            */
           init: (initialSortApplyed) => {
             set((state) => {
@@ -96,7 +96,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             throw new Error("Field does not exist");
           },
           /**
-           * TODO: Documentar
+           * Elimina un campo sort por su id
            */
           removeSort: (id) => {
             set((state) => {
@@ -104,11 +104,14 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
               if (index_to_remove > -1) {
                 state.appliedSorts.splice(index_to_remove, 1);
                 updateAutomatic(state);
+                if (state.appliedSorts.length === 0) {
+                  state.ownerState.isDirty = false;
+                }
               }
             });
           },
           /**
-           * TODO: Documentar
+           * showPopoverSortForAdd es la acción que se ejecuta al abrir el popover para agregar un nuevo sort
            */
           showPopoverSortForAdd: (field) => {
             set((state) => {
@@ -122,7 +125,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * showPopoverSortForEdit es la acción que se ejecuta al abrir el popover para editar un sort existente
            */
           showPopoverSortForEdit: (sortToEdit) => {
             set((state) => {
@@ -134,7 +137,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             get().actions.setInEdition(true);
           },
           /**
-           * TODO: Documentar
+           * hidepopoverSort oculta el popover de sort
            */
           hidePopoverSort: (stayInEditon) => {
             set((state) => {
@@ -143,16 +146,17 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             get().actions.setInEdition(stayInEditon);
           },
           /**
-           * TODO: Documentar
+           * Limpia todos los campos/atributos usados para aplicar un sort
            */
           clearSorts: () => {
             set((state) => {
+              state.ownerState.isDirty = false;
               state.appliedSorts = state.appliedSorts.filter((f) => f.fixed);
               updateAvailableFields(state);
             });
           },
           /**
-           * TODO: Documentar
+           * Acción que se ejecuta al aplicar los filtros
            */
           fireOnChangeSorts: () => {
             set((state) => {
@@ -163,7 +167,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * getNewId es la acción que se ejecuta al crear un nuevo sort
            */
           getNewId: () => {
             return get().appliedSorts.reduce((prev, n) => {
@@ -171,16 +175,19 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             }, 0) + 1;
           },
           /**
-           * TODO: Documentar
+           * Agrega un nuevo campo/atributo por el cual se va aplicar el sort
            */
           addSort: (newSort) => {
             set((state) => {
+              if (!state.automatic) {
+                state.ownerState.isDirty = true;
+              }
               state.appliedSorts.push(newSort);
               updateAutomatic(state);
             });
           },
           /**
-           * TODO: Documentar
+           * Actualiza un sort existente
            */
           updateSort: (editSort) => {
             set((state) => {
@@ -192,7 +199,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * Actualiza el valor del input de busqueda
            */
           setInputData: (inputData) => {
             set((state) => {
@@ -200,7 +207,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * Actualiza en edicion el estado del componente
            */
           setInEdition: (newInEdition) => {
             set((state) => {
@@ -208,7 +215,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * abre el popover para seleccionar los campos a filtrar
            */
           openPopoverMenuFields: () => {
             set((state) => {
@@ -217,7 +224,7 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
             });
           },
           /**
-           * TODO: Documentar
+           * cierra el popover para seleccionar los campos a filtrar
            */
           closePopoverMenuFields: (newInEdition) => {
             set((state) => {
@@ -233,6 +240,14 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
               state.size = newSize;
               state.ownerState.size = newSize;
             });
+          },
+          /**
+           * actualiza el visibleRefresh del componente
+           */
+          setVisibleRefresh: (newVisibleRefresh) => {
+            set((state) => {
+              state.visibleRefresh = newVisibleRefresh;
+            });
           }
         }
       })),
@@ -241,5 +256,5 @@ const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
   );
 };
 export {
-  createAreaStore as c
+  createDynamicSortStore as c
 };

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

@@ -1,7 +1,7 @@
 import { GetLabelType } from '@m4l/core';
 import { Sizes } from '@m4l/styles';
-import { SortField, SortFieldApplied, SortToEditApply, InitialSortApplied, OwnerState } from '../types';
 import { MutableRefObject } from 'react';
+import { DynamicSortProps, InitialSortApplied, OwnerState, SortField, SortFieldApplied, SortToEditApply } from '../types';
 export type OpenFor = 'add' | 'edit';
 export interface PopoverSortDataBase {
     /**
@@ -31,23 +31,15 @@ export type PopoverSortData = PopoverSortDataAdd | PopoverSortDataEdit;
 /**
  * Interface que define el estado del componente
  */
-export interface DynamicSortState {
+export interface DynamicSortState extends Pick<DynamicSortProps, 'fields' | 'automatic' | 'dataTestId' | 'size' | 'visibleRefresh'> {
     /**
      *  "storeId" identificador del store
      */
     storeId?: string;
-    /**
-     *  "fields" Campos por los que se puede filtrar
-     */
-    fields: Array<SortField>;
     /**
      *  "ownerState" estado a nivel de clases del componente
      */
     ownerState: OwnerState;
-    /**
-     *  "automatic" Configura si el sort se ejecuta automaticamente cuando se agrega o se modifica un sort
-     */
-    automatic: boolean;
     /**
      *  "isOpenPopoverMenuFields" determina si se debe abrir el menú de campos
      */
@@ -71,12 +63,10 @@ export interface DynamicSortState {
     countOnChangeSortsApplyed: number;
     /** popoverFilterData: para emerger el popuup de modificación campos  */
     popoverSortData?: PopoverSortData;
-    getLabel: GetLabelType;
     /**
-     *  dataTestId:
-     *  Esta propiedad sirve para generar identificadores únicos.
+     * Función utilizada para el dictionary
      */
-    dataTestId: string;
+    getLabel: GetLabelType;
     /**
      * size: tamaño del componente
      */
@@ -178,6 +168,10 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * 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<DynamicSortState, 'automatic' | 'fields' | 'getLabel' | 'ownerState' | 'dataTestId' | 'size' | 'storeId'>;
+export type InitialStoreProps = Pick<DynamicSortState, 'automatic' | 'fields' | 'getLabel' | 'ownerState' | 'dataTestId' | 'size' | 'storeId' | 'visibleRefresh'>;

package/components/DynamicSort/subcomponents/AppliedSortChip/useAppliedSortChip.js

@@ -1,6 +1,6 @@
-import { useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useFormatter } from "@m4l/graphics";
+import { useMemo } from "react";
 import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 import { S as SORT_ICONS } from "../../icons.js";
 import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";

package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as useAppliedSorts } from "./useAppliedSorts.js";
 import { A as AppliedSortsStyled, a as AppliedSortInnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { A as AppliedSortChip } from "../AppliedSortChip/AppliedSortChip.js";

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
-import { D as DYNAMICSORT_DICTIONARY_ID } from "../../dictionary.js";
-import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
 import { I as InputSort } from "../InputSort/InputSort.js";
@@ -12,7 +11,7 @@ import { S as SortActions } from "../SortActions/SortActions.js";
 import { P as PopoverSort } from "../PopoverSort/PopoverSort.js";
 function DynamicSortBase() {
   const { ownerState, dataTestId } = useDynamicSortBase();
-  const classRoot = getComponentSlotRoot(DYNAMICSORT_DICTIONARY_ID);
+  const classRoot = getComponentSlotRoot(DYNAMIC_SORT_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {

package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.d.ts

@@ -3,6 +3,7 @@
  */
 export default function useDynamicSortBase(): {
     ownerState: import('../../types').OwnerState;
-    dataTestId: string;
+    dataTestId: string | undefined;
     size: "small" | "medium";
+    visibleRefresh: boolean | undefined;
 };

package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.js

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

package/components/DynamicSort/subcomponents/FieldTypes/DataTypeComponent.d.ts

@@ -1,5 +1,5 @@
-import { FormSortFieldApplied } from '../../types';
 import { FormStatusLoad } from '../../../../contexts';
+import { FormSortFieldApplied } from '../../types';
 /**
  * Componente que renderiza el tipo de dato seleccionado
  */

package/components/DynamicSort/subcomponents/FieldTypes/FieldTypeInterface.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
-import { SortField, SortFieldApplied, DataTypeFilerLabels, SortValue, InitialSortApplied, FormSortValueBase } from '../../types';
+import { FC } from 'react';
+import { DataTypeFilerLabels, FormSortValueBase, InitialSortApplied, SortField, SortFieldApplied, SortValue } from '../../types';
 import * as Yup from 'yup';
 export type YupSchema = Yup.SchemaOf<any>;
 /**

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.d.ts

@@ -1,7 +1,7 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
+import { DataTypeFilerLabels, FormSortValueBase, InitialSortApplied, SortField, SortFieldApplied, SortValue } from '../../../types';
 import { IFieldType, YupSchema } from '../FieldTypeInterface';
-import { DataTypeFilerLabels, SortField, SortFieldApplied, SortValue, FormSortValueBase, InitialSortApplied } from '../../../types';
 import { StringSort } from './index';
 /**
  * Clase que implementa los métodos necesarios para el tipo de campo string

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.js

@@ -1,6 +1,6 @@
 import * as Yup from "yup";
-import { g as getDynamicSortDictionary } from "../../../dictionary.js";
 import { O as OPERATORS } from "../../../constants.js";
+import { g as getDynamicSortDictionary } from "../../../dictionary.js";
 import { S as StringSort } from "./index.js";
 class SortHelpers {
   getComponent() {

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useMemo } from "react";
 import { S as SORT_ICONS } from "../../../icons.js";
-import { g as getDynamicSortDictionary, a as DICCTIONARY } from "../../../dictionary.js";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../../dictionary.js";
 import { u as useDynamicSortBase } from "../../DynamicSortBase/useDynamicSortBase.js";
 import { R as RHFSelect } from "../../../../hook-form/RHFSelect/RHFSelect.js";
 import { I as Icon } from "../../../../Icon/Icon.js";

package/components/DynamicSort/subcomponents/InputSort/useInputSort.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
 import { SortField } from '../../types';
 /**
- * TODO: Documentar
+ * Hook que maneja la lógica del inputSort
  */
 declare function useInputSort(): {
     /**

package/components/DynamicSort/subcomponents/InputSort/useInputSort.js

@@ -1,8 +1,8 @@
-import { useState, useEffect } from "react";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { g as getDynamicSortDictionary, a as DICCTIONARY } from "../../dictionary.js";
-import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { useState, useEffect } from "react";
 import { A as ASSETS_URL, b as ASSETS } from "../../constants.js";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 function useInputSort() {
   const [selectedFieldIndex, setSelectedFieldIndex] = useState(-1);
   const [sortFields, setSortedFields] = useState([]);

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.d.ts

@@ -4,7 +4,7 @@ export type PopoverMenuFieldsProps = {
     fields: SortField[];
 };
 /**
- * TODO: Documentar
+ * PopoverMenuFields es un componente que permite mostrar un menú desplegable con los campos disponibles para ordenar.
  */
 declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react/jsx-runtime").JSX.Element;
 export default PopoverMenuFields;

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
 import { useRef, useEffect } from "react";
 import { c as DYNAMIC_SORT_POPOVER_CONTAINER_ID } from "../../constants.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";

package/components/DynamicSort/subcomponents/PopoverMenuFields/usePopoverMenuFields.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { SortField } from '../../types';
 /**
- * TODO: Documentar
+ * Hook que maneja la lógica del popoverMenuFields
  */
 declare function usePopoverMenuFields(): {
     elementRef: import('react').MutableRefObject<HTMLElement | null> | null;

package/components/DynamicSort/subcomponents/PopoverMenuFields/usePopoverMenuFields.js

@@ -1,6 +1,6 @@
 import { useModuleDictionary } from "@m4l/core";
-import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 import { shallow } from "zustand/shallow";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 function usePopoverMenuFields() {
   const { getLabel } = useModuleDictionary();
   const isOpenPopoverMenuFields = useDynamicSortStore((state) => state.isOpenPopoverMenuFields);

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * PopoverSort es un componente que permite mostrar un menú desplegable con los campos disponibles para ordenar.
  */
 declare function PopoverSort(): import("react/jsx-runtime").JSX.Element | null;
 export default PopoverSort;

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts

@@ -1,9 +1,9 @@
+import { Maybe } from '@m4l/core';
 import { KeyboardEvent } from 'react';
 import { FieldValues } from 'react-hook-form';
-import { Maybe } from '@m4l/core';
 import { FormSortFieldApplied, SortField } from '../../types';
 /**
- * TODO: Documentar
+ * usePopoverSort es un hook que maneja la lógica del popoverSort
  */
 declare function usePopoverSort(): {
     field: SortField;

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.js

@@ -1,8 +1,8 @@
-import { useRef, useMemo, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
+import { useRef, useMemo, useCallback } from "react";
+import { shallow } from "zustand/shallow";
 import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";
-import { shallow } from "zustand/shallow";
 function usePopoverSort() {
   let anchorEl;
   let field;

package/components/DynamicSort/subcomponents/SortActions/SortActions.d.ts

@@ -1,5 +1,7 @@
 /**
- * TODO: Documentar
+ * Acciones del sort, muestra la accion de clean
+ * para limpiar los campos y el boton refresh
+ * para aplicar el sort con los campos del input
  */
 declare function SortActions(): import("react/jsx-runtime").JSX.Element;
 export default SortActions;

package/components/DynamicSort/subcomponents/SortActions/SortActions.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { u as useSortActions } from "./useSortActions.js";
-import { g as getDynamicSortDictionary, a as DICCTIONARY } from "../../dictionary.js";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { u as useSortActions } from "./useSortActions.js";
 import { j as ActionsStyled, k as ActionsClearButtonStyled, l as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
@@ -13,8 +13,8 @@ function SortActions() {
     sortButtonDictionaryTooltip,
     ownerState
   } = useSortActions();
-  const { size } = useDynamicSortBase();
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
+  const { size, visibleRefresh, ownerState: { isDirty } } = useDynamicSortBase();
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh }, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {
@@ -25,7 +25,7 @@ function SortActions() {
         ownerState: {}
       }
     ),
-    /* @__PURE__ */ jsx(
+    visibleRefresh ? /* @__PURE__ */ jsx(
       ActionsSubmitButtonStyled,
       {
         size,
@@ -33,9 +33,9 @@ function SortActions() {
         "aria-label": "settings",
         dictionaryTooltipId: sortButtonDictionaryTooltip,
         onClick: onClickSort,
-        ownerState: { ...ownerState }
+        ownerState: { ...ownerState, isDirty }
       }
-    )
+    ) : null
   ] });
 }
 export {

package/components/DynamicSort/subcomponents/SortActions/useSortActions.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * Hook que maneja la lógica de los botones de ordenamiento
  */
 declare function useSortActions(): {
     isSkeleton: boolean;

package/components/DynamicSort/subcomponents/SortActions/useSortActions.js

@@ -1,7 +1,7 @@
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
-import { g as getDynamicSortDictionary, a as DICCTIONARY } from "../../dictionary.js";
 import { A as ASSETS_URL, b as ASSETS } from "../../constants.js";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 function useSortActions() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const automatic = useDynamicSortStore((state) => state.automatic);

package/components/DynamicSort/types.d.ts

@@ -1,7 +1,7 @@
+import { Maybe } from '@m4l/core';
+import { Sizes } from '@m4l/styles';
 import { Theme } from '@mui/material/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
-import { Sizes } from '@m4l/styles';
-import { Maybe } from '@m4l/core';
 import { DYNAMIC_SORT_KEY_COMPONENT } from './constants';
 import { DynamicSortSlots } from './slots';
 export type SortFieldType = 'string' | 'number' | 'date' | 'boolean';
@@ -120,21 +120,35 @@ export interface DynamicSortProps {
      *  @default true
      */
     automatic?: boolean;
-    /** Array con la configuración de cada campo por el que se podrá filtrar. */
+    /**
+     * Array con la configuración de cada campo por el que se podrá filtrar.
+     */
     fields: Array<SortField>;
-    /** Array con la configuración de cada campo por el que se podrá hacer  Sort.*/
+    /**
+     *  Array con la configuración de cada campo por el que se podrá hacer  Sort.
+     */
     initialAppliedSorts?: Array<InitialSortApplied>;
-    /** Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar */
+    /**
+     * Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar
+     */
     onChangeSorts?: OnChangeSorts;
-    /** Key único para necesario para las pruebas del componente. */
+    /**
+     * Key único para necesario para las pruebas del componente.
+     */
     dataTestId?: string;
-    /** Propiedad para las variantes de tamaño */
+    /**
+     * Propiedad para las variantes de tamaño
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     *  visibleRefresh: indica si el boton de refresh debe estar visible
+     */
+    visibleRefresh?: boolean;
 }
 /**
  * Interface que define la variables que se van a usar en clases del componente
  */
-export interface OwnerState {
+export interface OwnerState extends Pick<DynamicSortProps, 'automatic'> {
     /**
      *  "inEdition" se establece cuando se está en edición.
      */
@@ -160,3 +174,6 @@ export interface DynamicSortOwnerState extends DynamicSortProps, OwnerState {
 }
 export type DynamicSortSlotsType = keyof typeof DynamicSortSlots;
 export type DynamicSortStyles = M4LOverridesStyleRules<DynamicSortSlotsType, typeof DYNAMIC_SORT_KEY_COMPONENT, Theme>;
+export interface DynamicSortRef {
+    fireOnChangeSort: () => void;
+}

package/hooks/useDynamicFilterAndSort/styles.js

@@ -1,3 +1,5 @@
+import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../components/DynamicFilter/constants.js";
+import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../components/DynamicSort/constants.js";
 const dynamicFilterAndSortStyles = {
   /**
    * Estilos para los leftActions
@@ -19,12 +21,12 @@ const dynamicFilterAndSortStyles = {
     flexDirection: theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp3,
     padding: `0 ${theme.vars.size.baseSpacings.sp1}`,
-    '& [class*="M4LDynamicFilter-root"]': {
+    [`& [class*="${DYNAMIC_FILTER_KEY_COMPONENT}-root"]`]: {
       display: ownerState.showDynamicFilter ? "block" : "none",
       width: "auto",
       flexGrow: theme.generalSettings.isMobile ? 1 : 2
     },
-    '& [class*="dynamic_sort-root"]': {
+    [`& [class*="${DYNAMIC_SORT_KEY_COMPONENT}-root"]`]: {
       display: ownerState.showDynamicSort ? "block" : "none",
       width: "auto",
       flexGrow: 1

package/hooks/useDynamicFilterAndSort/types.d.ts

@@ -17,7 +17,7 @@ export interface ChangeFilterSort {
     eventFilters?: ChangeFilter;
     eventSorts?: ChangeSort;
 }
-export interface UseDynamicFilterAndSortProps extends Pick<DynamicFilterProps, 'fields' | 'withAllField'> {
+export interface UseDynamicFilterAndSortProps extends Pick<DynamicFilterProps, 'fields' | 'withAllField' | 'visibleRefresh'> {
     setCookie?: WindowToolsMF['setCookie'];
     getCookie?: WindowToolsMF['getCookie'];
     prefixCookie?: string;
@@ -27,6 +27,7 @@ export interface UseDynamicFilterAndSortProps extends Pick<DynamicFilterProps, '
     onChangeFilterSort: (params: ChangeFilterSort) => void;
     dataTestId?: string;
     sorts?: DynamicSortProps['fields'];
+    filterSortAutomatic?: boolean;
 }
 export interface DynamicFilterAndSortOwnerState {
     showDynamicFilter: boolean;