@m4l/components 9.1.125 → 9.1.127

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/helpers.js

@@ -0,0 +1,121 @@
+import * as Yup from "yup";
+import { g as getDynamicFilterDictionary } from "../../../dictionary.js";
+import { S as SelectAsyncFilter } from "./index.js";
+import { S as SELECT_OPERATORS } from "../../../constants.js";
+function filterValidOperandsArraySelectAsync(operandsArray, field) {
+  const operandsArrayFormatted = Array.isArray(operandsArray) ? operandsArray : [operandsArray];
+  const getOptionId = field?.selectAsyncOptions?.getOptionId;
+  const getOptionLabel = field?.selectAsyncOptions?.getOptionLabel;
+  return operandsArrayFormatted?.filter((operand) => {
+    return typeof operand === "object" && getOptionId?.(operand) && getOptionLabel?.(operand);
+  });
+}
+class SelectAsyncFilterHelpers {
+  getComponent() {
+    return SelectAsyncFilter;
+  }
+  /**
+   * TODO: Documentar
+   */
+  getDefaultFilter(field, fixed) {
+    const defaultOperand = field.defaultOperandsArray;
+    const defaultFilter = {
+      id: 0,
+      fieldType: "selectAsync",
+      field,
+      fixed,
+      isSet: true,
+      operator: "in",
+      operandsArray: []
+    };
+    if (defaultOperand !== void 0 && Array.isArray(defaultOperand)) {
+      const validOperandsArray = filterValidOperandsArraySelectAsync(defaultOperand, field);
+      defaultFilter.operandsArray = validOperandsArray || [];
+    }
+    return defaultFilter;
+  }
+  /**
+   * TODO: Documentar
+   */
+  getFormValue(field, getLabel, filterValueSelect) {
+    const filterValue = filterValueSelect ? filterValueSelect : void 0;
+    const isMultiple = field?.selectAsyncOptions?.multiple ?? false;
+    const formValueOperandsArray = isMultiple ? filterValueSelect?.operandsArray : filterValueSelect?.operandsArray?.[0] || filterValueSelect?.operandsArray;
+    const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "in";
+    return {
+      fieldType: "selectAsync",
+      formValueOperator: {
+        id: operator,
+        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+      },
+      formValueOperandsArray
+    };
+  }
+  /**
+   * TODO: Documentar
+   */
+  getFilterFromFormValue(formFilterValue) {
+    const operator = formFilterValue.formValueOperator.id;
+    const operandsArray = Array.isArray(formFilterValue.formValueOperandsArray) ? formFilterValue.formValueOperandsArray : [formFilterValue.formValueOperandsArray];
+    return {
+      fieldType: "selectAsync",
+      operator,
+      operandsArray
+    };
+  }
+  /**
+   * TODO: Documentar
+   */
+  getLabels(filter, getLabel, _formatters, field) {
+    const operandsArray = filter.operandsArray;
+    const labelOperands = operandsArray?.reduce?.((label, operand) => {
+      const textLabel = field.selectAsyncOptions?.getOptionLabel?.(operand) || "";
+      return label ? `${label} | ${textLabel}` : textLabel;
+    }, "")?.toString() || "";
+    return {
+      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
+      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+      labelOperands
+    };
+  }
+  /**
+   * TODO: Documentar
+   */
+  getSchema(getLabel) {
+    return Yup.object({
+      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
+      formValueOperandsArray: Yup.lazy((value) => {
+        return Array.isArray(value) ? Yup.array().min(1, getLabel(`dynamic_filter.error_operand_required`)).of(Yup.object().nullable()).required(getLabel(`dynamic_filter.error_operand_required`)) : Yup.object().nullable().required(getLabel(`dynamic_filter.error_operand_required`));
+      })
+    });
+  }
+  /**
+   * TODO: Documentar
+   */
+  verifyFilter(filter, field) {
+    if (typeof filter.operator !== "string") {
+      return false;
+    }
+    if (!field) {
+      return false;
+    }
+    if (SELECT_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+      return false;
+    }
+    if (!filter.operandsArray || typeof filter.operandsArray !== "object") {
+      return false;
+    }
+    const validOperandsArray = filterValidOperandsArraySelectAsync(
+      filter.operandsArray,
+      field
+    );
+    if (!validOperandsArray || validOperandsArray?.length === 0) {
+      return false;
+    }
+    return true;
+  }
+}
+export {
+  SelectAsyncFilterHelpers as S,
+  filterValidOperandsArraySelectAsync as f
+};

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Subcomponente encargado de los filtros con el tipo de dato "boolean"
+ * @returns
+ */
+export declare function SelectAsyncFilter(): import("react/jsx-runtime").JSX.Element;

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/index.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { S as SELECT_OPERATORS } from "../../../constants.js";
+import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../../../dictionary.js";
+import { u as useDynamicFilterStore } from "../../../store/useDynamicFilterStore.js";
+import { R as RHFAutocomplete } from "../../../../hook-form/RHFAutocomplete/RHFAutocomplete.js";
+import { R as RHFAutocompleteAsync } from "../../../../hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
+function SelectAsyncFilter() {
+  const { getLabel } = useModuleDictionary();
+  const field = useDynamicFilterStore((state) => state.popoverFilterData?.field);
+  if (!field?.selectAsyncOptions?.endPoint) {
+    throw new Error("El filtro tipo Select requiere la configuración del Endpoint");
+  }
+  const autocompleteProps = field?.selectAsyncOptions;
+  const operators = useMemo(
+    () => SELECT_OPERATORS.map((o) => ({
+      id: o,
+      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+    })),
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        type: "text",
+        name: "formValueOperator",
+        autoComplete: "off",
+        options: operators,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.id === value.id,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operator))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFAutocompleteAsync,
+      {
+        ...autocompleteProps,
+        name: "formValueOperandsArray",
+        autoComplete: "off",
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operands_array))
+      }
+    )
+  ] });
+}
+export {
+  SelectAsyncFilter as S
+};

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/helpers.d.ts

@@ -1,7 +1,7 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { IFieldType, YupSchema } from '../FieldTypeInterface';
-import { DataTypeFilerLabels, Field, FilterFieldApplied, FilterValue, InitialFilterApplied, FormFilterValueSelect, FormOperandSelect } from '../../../types';
+import { DataTypeFilerLabels, FilterField, FilterFieldApplied, FilterValue, InitialFilterApplied, FormFilterValueSelect, FormOperandSelect } from '../../../types';
 import { SelectFilter } from './index';
 /**
  * Filtra los valores de operandArray para que solo tengan valores validos
@@ -9,7 +9,7 @@ import { SelectFilter } from './index';
  * @param field Propiedades del field
  * @returns FormOperandSelect[] operandArray filtrado con valores validados
  */
-export declare function filterValidOperandsArraySelect(operandsArray: FormOperandSelect[] | FormOperandSelect, field: Field): any[];
+export declare function filterValidOperandsArraySelect(operandsArray: FormOperandSelect[] | FormOperandSelect, _field: FilterField): (string | number)[];
 /**
  * TODO: Documentar
  */
@@ -18,11 +18,11 @@ export declare class SelectFilterHelpers implements IFieldType<FormFilterValueSe
     /**
      * TODO: Documentar
      */
-    getDefaultFilter(field: Field, fixed: boolean): FilterFieldApplied;
+    getDefaultFilter(field: FilterField, fixed: boolean): FilterFieldApplied;
     /**
-     * TODO: Documentar
+     * Función para obtener el valor en terminos de HookForm desde los ids de los values.
      */
-    getFormValue(field: Field, getLabel: GetLabelType, filterValueSelect?: FilterValue): FormFilterValueSelect;
+    getFormValue(field: FilterField, getLabel: GetLabelType, filterValueSelect?: FilterValue): FormFilterValueSelect;
     /**
      * TODO: Documentar
      */
@@ -30,7 +30,7 @@ export declare class SelectFilterHelpers implements IFieldType<FormFilterValueSe
     /**
      * TODO: Documentar
      */
-    getLabels(filter: FilterFieldApplied, getLabel: GetLabelType, _formatters: Formatters, field: Field): DataTypeFilerLabels;
+    getLabels(filter: FilterFieldApplied, getLabel: GetLabelType, _formatters: Formatters, field: FilterField): DataTypeFilerLabels;
     /**
      * TODO: Documentar
      */
@@ -38,5 +38,5 @@ export declare class SelectFilterHelpers implements IFieldType<FormFilterValueSe
     /**
      * TODO: Documentar
      */
-    verifyFilter(filter: InitialFilterApplied, field?: Field): boolean;
+    verifyFilter(filter: InitialFilterApplied, field?: FilterField): boolean;
 }

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/helpers.js

@@ -2,12 +2,10 @@ import * as Yup from "yup";
 import { g as getDynamicFilterDictionary } from "../../../dictionary.js";
 import { S as SelectFilter } from "./index.js";
 import { S as SELECT_OPERATORS } from "../../../constants.js";
-function filterValidOperandsArraySelect(operandsArray, field) {
+function filterValidOperandsArraySelect(operandsArray, _field) {
   const operandsArrayFormatted = Array.isArray(operandsArray) ? operandsArray : [operandsArray];
-  const getOptionId = field?.selectOptions?.getOptionId;
-  const getOptionLabel = field?.selectOptions?.getOptionLabel;
   return operandsArrayFormatted?.filter((operand) => {
-    return typeof operand === "object" && getOptionId?.(operand) && getOptionLabel?.(operand);
+    return typeof operand === "string" || typeof operand === "number";
   });
 }
 class SelectFilterHelpers {
@@ -29,13 +27,13 @@ class SelectFilterHelpers {
       operandsArray: []
     };
     if (defaultOperand !== void 0 && Array.isArray(defaultOperand)) {
-      const validOperandsArray = filterValidOperandsArraySelect(defaultOperand, field);
+      const validOperandsArray = filterValidOperandsArraySelect(defaultOperand);
       defaultFilter.operandsArray = validOperandsArray || [];
     }
     return defaultFilter;
   }
   /**
-   * TODO: Documentar
+   * Función para obtener el valor en terminos de HookForm desde los ids de los values.
    */
   getFormValue(field, getLabel, filterValueSelect) {
     const filterValue = filterValueSelect ? filterValueSelect : void 0;
@@ -69,7 +67,7 @@ class SelectFilterHelpers {
   getLabels(filter, getLabel, _formatters, field) {
     const operandsArray = filter.operandsArray;
     const labelOperands = operandsArray?.reduce?.((label, operand) => {
-      const textLabel = field.selectOptions?.getOptionLabel?.(operand) || "";
+      const textLabel = field.selectOptions?.options.find((option) => option.id === operand)?.label || "";
       return label ? `${label} | ${textLabel}` : textLabel;
     }, "")?.toString() || "";
     return {
@@ -85,7 +83,7 @@ class SelectFilterHelpers {
     return Yup.object({
       formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
       formValueOperandsArray: Yup.lazy((value) => {
-        return Array.isArray(value) ? Yup.array().min(1, getLabel(`dynamic_filter.error_operand_required`)).of(Yup.object().nullable()).required(getLabel(`dynamic_filter.error_operand_required`)) : Yup.object().nullable().required(getLabel(`dynamic_filter.error_operand_required`));
+        return Array.isArray(value) ? Yup.array().min(1, getLabel(`dynamic_filter.error_operand_required`)).required(getLabel(`dynamic_filter.error_operand_required`)) : Yup.object().nullable().required(getLabel(`dynamic_filter.error_operand_required`));
       })
     });
   }
@@ -106,8 +104,7 @@ class SelectFilterHelpers {
       return false;
     }
     const validOperandsArray = filterValidOperandsArraySelect(
-      filter.operandsArray,
-      field
+      filter.operandsArray
     );
     if (!validOperandsArray || validOperandsArray?.length === 0) {
       return false;
@@ -116,6 +113,5 @@ class SelectFilterHelpers {
   }
 }
 export {
-  SelectFilterHelpers as S,
-  filterValidOperandsArraySelect as f
+  SelectFilterHelpers as S
 };

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/index.js

@@ -5,14 +5,11 @@ import { S as SELECT_OPERATORS } from "../../../constants.js";
 import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../../../dictionary.js";
 import { u as useDynamicFilterStore } from "../../../store/useDynamicFilterStore.js";
 import { R as RHFAutocomplete } from "../../../../hook-form/RHFAutocomplete/RHFAutocomplete.js";
-import { R as RHFAutocompleteAsync } from "../../../../hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
+import { R as RHFSelect } from "../../../../hook-form/RHFSelect/RHFSelect.js";
 function SelectFilter() {
   const { getLabel } = useModuleDictionary();
   const field = useDynamicFilterStore((state) => state.popoverFilterData?.field);
-  if (!field?.selectOptions?.endPoint) {
-    throw new Error("El filtro tipo Select requiere la configuración del Endpoint");
-  }
-  const autocompleteProps = field?.selectOptions;
+  const selectProps = field?.selectOptions;
   const operators = useMemo(
     () => SELECT_OPERATORS.map((o) => ({
       id: o,
@@ -34,11 +31,11 @@ function SelectFilter() {
       }
     ),
     /* @__PURE__ */ jsx(
-      RHFAutocompleteAsync,
+      RHFSelect,
       {
-        ...autocompleteProps,
+        ...selectProps,
+        options: field?.selectOptions?.options || [],
         name: "formValueOperandsArray",
-        autoComplete: "off",
         label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operands_array))
       }
     )

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/helpers.d.ts

@@ -1,7 +1,7 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { IFieldType, YupSchema } from '../FieldTypeInterface';
-import { FilterFieldApplied, FormFilterValueString, Field, DataTypeFilerLabels, FilterValue, InitialFilterApplied } from '../../../types';
+import { FilterFieldApplied, FormFilterValueString, FilterField, DataTypeFilerLabels, FilterValue, InitialFilterApplied } from '../../../types';
 import { StringFilter } from './index';
 /**
  * TODO: Documentar
@@ -11,7 +11,7 @@ export declare class StringFilterHelpers implements IFieldType<FormFilterValueSt
     /**
      * TODO: Documentar
      */
-    getDefaultFilter(field: Field, fixed: boolean): FilterFieldApplied;
+    getDefaultFilter(field: FilterField, fixed: boolean): FilterFieldApplied;
     /**
      * TODO: Documentar
      */
@@ -19,11 +19,11 @@ export declare class StringFilterHelpers implements IFieldType<FormFilterValueSt
     /**
      * TODO: Documentar
      */
-    getFormValue(field: Field, getLabel: GetLabelType, filterValue?: FilterValue): FormFilterValueString;
+    getFormValue(field: FilterField, getLabel: GetLabelType, filterValue?: FilterValue): FormFilterValueString;
     /**
      * TODO: Documentar
      */
-    getLabels(filter: FilterFieldApplied, getLabel: GetLabelType, _formatters: Formatters, _field: Field): DataTypeFilerLabels;
+    getLabels(filter: FilterFieldApplied, getLabel: GetLabelType, _formatters: Formatters, _field: FilterField): DataTypeFilerLabels;
     /**
      * TODO: Documentar
      */
@@ -31,5 +31,5 @@ export declare class StringFilterHelpers implements IFieldType<FormFilterValueSt
     /**
      * TODO: Documentar
      */
-    verifyFilter(filter: InitialFilterApplied, _field?: Field): boolean;
+    verifyFilter(filter: InitialFilterApplied, _field?: FilterField): boolean;
 }

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/helpers.js

@@ -1,6 +1,6 @@
 import * as Yup from "yup";
 import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../../../dictionary.js";
-import { b as STRING_OPERATORS } from "../../../constants.js";
+import { c as STRING_OPERATORS } from "../../../constants.js";
 import { S as StringFilter } from "./index.js";
 class StringFilterHelpers {
   getComponent() {

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useModuleDictionary } from "@m4l/core";
-import { b as STRING_OPERATORS } from "../../../constants.js";
+import { c as STRING_OPERATORS } from "../../../constants.js";
 import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../../../dictionary.js";
 import { R as RHFAutocomplete } from "../../../../hook-form/RHFAutocomplete/RHFAutocomplete.js";
 import { R as RHFTextField } from "../../../../hook-form/RHFTextField/RHFTextField.js";

package/components/DynamicFilter/subcomponents/FieldTypes/fieldFactory.d.ts

@@ -3,8 +3,9 @@ import { BooleanFilterHelpers } from './BooleanFilter/helpers';
 import { StringFilterHelpers } from './StringFilter/helpers';
 import { DateTimeFilterHelpers } from './DateTimeFilter/helpers';
 import { NumberFilterHelpers } from './NumberFilter/helpers';
+import { SelectAsyncFilterHelpers } from './SelectAsyncFilter/helpers';
 import { SelectFilterHelpers } from './SelectFilter/helpers';
 /**
  * TODO: Documentar
  */
-export declare function fieldFactory(type: FieldType): BooleanFilterHelpers | StringFilterHelpers | DateTimeFilterHelpers | NumberFilterHelpers | SelectFilterHelpers;
+export declare function fieldFactory(type: FieldType): BooleanFilterHelpers | StringFilterHelpers | DateTimeFilterHelpers | NumberFilterHelpers | SelectAsyncFilterHelpers | SelectFilterHelpers;

package/components/DynamicFilter/subcomponents/FieldTypes/fieldFactory.js

@@ -2,12 +2,14 @@ import { B as BooleanFilterHelpers } from "./BooleanFilter/helpers.js";
 import { S as StringFilterHelpers } from "./StringFilter/helpers.js";
 import { D as DateTimeFilterHelpers } from "./DateTimeFilter/helpers.js";
 import { N as NumberFilterHelpers } from "./NumberFilter/helpers.js";
+import { S as SelectAsyncFilterHelpers } from "./SelectAsyncFilter/helpers.js";
 import { S as SelectFilterHelpers } from "./SelectFilter/helpers.js";
 const helpersStrategies = {
   boolean: new BooleanFilterHelpers(),
   string: new StringFilterHelpers(),
   number: new NumberFilterHelpers(),
   datetime: new DateTimeFilterHelpers(),
+  selectAsync: new SelectAsyncFilterHelpers(),
   select: new SelectFilterHelpers(),
   __default__: () => {
     throw new Error("Type no defined");

package/components/DynamicFilter/subcomponents/InputFilter/InputFilter.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { u as useInputFilter } from "./useInputFilter.js";
 import { I as InputFilterSkeleton } from "./InputFilterSkeleton.js";
+import { useRef, useEffect } from "react";
 import { m as InputFilterStyled, n as InputFilterIconStyled, o as InputFilterInputStyled } from "../../slots/dynamicFilterSlots.js";
 import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
 const InputFilter = () => {
@@ -12,8 +13,13 @@ const InputFilter = () => {
     inputHandlersProps,
     canRender,
     filteredFields,
-    selectedFieldIndex
+    selectedFieldIndex,
+    setElementRef
   } = useInputFilter();
+  const elementRef = useRef(null);
+  useEffect(() => {
+    setElementRef(elementRef);
+  }, [setElementRef, elementRef]);
   if (!canRender) {
     return null;
   }
@@ -25,6 +31,7 @@ const InputFilter = () => {
     /* @__PURE__ */ jsx(
       InputFilterInputStyled,
       {
+        ref: elementRef,
         type: "text",
         value: inputData,
         placeholder: inputPlaceHolder,

package/components/DynamicFilter/subcomponents/InputFilter/useInputFilter.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
-import { Field } from '../../types';
+import { FilterField } from '../../types';
 /**
  * TODO: Documentar
  */
@@ -27,7 +27,7 @@ declare function useInputFilter(): {
         /**
          * Evento de foco del inputFilter
          */
-        onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        onFocus: (_event: FocusEvent<HTMLInputElement>) => void;
         /**
          * Evento de cambio del inputFilter
          */
@@ -44,10 +44,14 @@ declare function useInputFilter(): {
     /**
      * Campos filtrados por el inputFilter
      */
-    filteredFields: Field[];
+    filteredFields: FilterField[];
     /**
      * Indice del campo seleccionado
      */
     selectedFieldIndex: number;
+    /**
+     * Setter de la referencia del elemento (inputFilter)
+     */
+    setElementRef: (ref: import('react').MutableRefObject<HTMLElement | null>) => void;
 };
 export default useInputFilter;

package/components/DynamicFilter/subcomponents/InputFilter/useInputFilter.js

@@ -9,7 +9,7 @@ function useInputFilter() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  const anchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
+  const isOpenPopoverMenuFields = useDynamicFilterStore((state) => state.isOpenPopoverMenuFields);
   const withAllField = useDynamicFilterStore((state) => state.withAllField);
   const availableFields = useDynamicFilterStore((state) => state.availableFields);
   const inputData = useDynamicFilterStore((state) => state.inputData);
@@ -20,12 +20,12 @@ function useInputFilter() {
     getNewId,
     hidePopoverFilter,
     openPopoverMenuFields,
-    setInEdition,
     setInputData,
-    showPopoverFilterForAdd
+    showPopoverFilterForAdd,
+    setElementRef
   } = useDynamicFilterStore((state) => state.actions);
   useEffect(() => {
-    if (!anchorEl) {
+    if (!isOpenPopoverMenuFields) {
       setFilteredFields([]);
     } else {
       setFilteredFields(
@@ -35,28 +35,25 @@ function useInputFilter() {
       );
       setSelectedFieldIndex(-1);
     }
-  }, [anchorEl, inputData, availableFields, getLabel]);
+  }, [isOpenPopoverMenuFields, inputData, availableFields, getLabel]);
   function handleOpenPopUpClickItem(field) {
     closePopoverMenuFields();
-    if (anchorEl) {
-      showPopoverFilterForAdd(anchorEl(), field);
-    }
+    showPopoverFilterForAdd(field);
   }
   const inputHandlersProps = {
     /**
      * Evento de foco del inputFilter
      */
-    onFocus: (event) => {
-      openPopoverMenuFields(event.currentTarget);
-      setInEdition(true);
+    onFocus: (_event) => {
+      openPopoverMenuFields();
     },
     /**
      * Evento de cambio del inputFilter
      */
     onChange: (event) => {
       setInputData(event.target.value);
-      if (!anchorEl) {
-        openPopoverMenuFields(event.currentTarget);
+      if (!isOpenPopoverMenuFields) {
+        openPopoverMenuFields();
       }
       hidePopoverFilter(true);
     },
@@ -145,7 +142,11 @@ function useInputFilter() {
     /**
      * Indice del campo seleccionado
      */
-    selectedFieldIndex
+    selectedFieldIndex,
+    /**
+     * Setter de la referencia del elemento (inputFilter)
+     */
+    setElementRef
   };
 }
 export {

package/components/DynamicFilter/subcomponents/PopoverFilter/usePopoverFilter.d.ts

@@ -1,14 +1,15 @@
 import { KeyboardEvent } from 'react';
 import { FieldValues } from 'react-hook-form';
-import { FormFilterFieldApplied, Field, FormFilterValue } from '../../types';
+import { Maybe } from '@m4l/core';
+import { FormFilterFieldApplied, FilterField, FormFilterValue } from '../../types';
 /**
  * TODO: Documentar
  */
 declare function usePopoverFilter(): {
-    field: Field;
+    field: FilterField;
     labelField: string;
     canRender: boolean;
-    anchorEl: Element;
+    anchorEl: Maybe<HTMLElement>;
     handleKeyDownPopper: (event: KeyboardEvent<HTMLDivElement>) => void;
     handleClosePopover: () => void;
     onSubmit: (dataFieldValues: FieldValues) => Promise<void>;

package/components/DynamicFilter/subcomponents/PopoverFilter/usePopoverFilter.js

@@ -10,6 +10,7 @@ function usePopoverFilter() {
   let popupValidationSchema;
   const { getLabel } = useModuleDictionary();
   const popoverFilterData = useDynamicFilterStore((state) => state.popoverFilterData);
+  const elementRef = useDynamicFilterStore((state) => state.elementRef);
   const { hidePopoverFilter, addFilter, updateFilter, getNewId } = useDynamicFilterStore(
     (state) => state.actions
   );
@@ -27,7 +28,7 @@ function usePopoverFilter() {
     return returnStatus;
   }, [popoverFilterData]);
   if (popoverFilterData?.openFor === "add") {
-    anchorEl = popoverFilterData?.fnAnchorEl();
+    anchorEl = elementRef?.current;
     field = popoverFilterData.field;
     const helperField = fieldFactory(field.type);
     popupValidationSchema = helperField.getSchema(getLabel);
@@ -40,7 +41,7 @@ function usePopoverFilter() {
       ...filterFormValue
     };
   } else if (popoverFilterData) {
-    anchorEl = popoverFilterData?.fnAnchorEl();
+    anchorEl = elementRef?.current;
     field = popoverFilterData?.filter.field;
     const helperField = fieldFactory(field.type);
     popupValidationSchema = helperField.getSchema(getLabel);

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

@@ -1,7 +1,7 @@
-import { Field } from '../../types';
+import { FilterField } from '../../types';
 export type PopoverMenuFieldsProps = {
     selectFieldIndex: number;
-    fields: Field[];
+    fields: FilterField[];
 };
 /**
  * TODO: Documentar

package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -3,7 +3,8 @@ import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
 import { u as PopoverMenuStyled, v as PopoverMenuItemStyled } from "../../slots/dynamicFilterSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
-  const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
+  const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
+  const anchorEl = elementRef?.current;
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,
     {
@@ -12,11 +13,11 @@ function PopoverMenuFields(props) {
       arrowType: "top-left",
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
-      open: Boolean(fnAnchorEl),
+      open: !!isOpenPopoverMenuFields,
       onClose: handleClosePopover,
-      anchorEl: fnAnchorEl?.(),
+      anchorEl,
       ownerState: {},
-      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsx(
+      children: isOpenPopoverMenuFields && fields.map((field, index) => /* @__PURE__ */ jsx(
         PopoverMenuItemStyled,
         {
           dense: true,

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

@@ -1,12 +1,14 @@
 import { MouseEvent } from 'react';
-import { Field } from '../../types';
+import { FilterField } from '../../types';
 /**
  * TODO: Documentar
  */
 declare function usePopoverMenuFields(): {
-    fnAnchorEl: (() => Element) | undefined;
-    getItemLabel: (field: Field) => string;
+    elementRef: import('react').MutableRefObject<HTMLElement | null> | null;
+    openPopoverMenuFields: boolean | undefined;
+    isOpenPopoverMenuFields: boolean | undefined;
+    getItemLabel: (field: FilterField) => string;
     handleClosePopover: () => void;
-    handleOpenPopUpClickItem: (_event: MouseEvent<HTMLLIElement>, field: Field) => void;
+    handleOpenPopUpClickItem: (_event: MouseEvent<HTMLLIElement>, field: FilterField) => void;
 };
 export default usePopoverMenuFields;