@m4l/components 9.1.142 → 9.1.144

package/components/DynamicSort/store/{type.d.ts → types.d.ts}

@@ -1,16 +1,13 @@
 import { GetLabelType } from '@m4l/core';
 import { Sizes } from '@m4l/styles';
 import { SortField, SortFieldApplied, SortToEditApply, InitialSortApplied, OwnerState } from '../types';
+import { MutableRefObject } from 'react';
 export type OpenFor = 'add' | 'edit';
 export interface PopoverSortDataBase {
     /**
      *  "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 PopoverSortDataAdd extends PopoverSortDataBase {
     openFor: 'add';
@@ -31,14 +28,14 @@ export interface PopoverSortDataEdit extends PopoverSortDataBase {
  * Tipo usado para cuado se va agregar o modificar un sort
  */
 export type PopoverSortData = PopoverSortDataAdd | PopoverSortDataEdit;
-/**
- * Estados que se actulizan por fuera del store, a través de hooks
- */
-export type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
 /**
  * Interface que define el estado del componente
  */
 export interface DynamicSortState {
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
     /**
      *  "fields" Campos por los que se puede filtrar
      */
@@ -52,11 +49,9 @@ export interface DynamicSortState {
      */
     automatic: boolean;
     /**
-     *  Funcion que retorna el elemento (InputSort) desde donde se desprende el listado de campos
-     *               Si no está definida, el menú de campos no se muestra
-     * @returns
+     *  "isOpenPopoverMenuFields" determina si se debe abrir el menú de campos
      */
-    fnAnchorEl?: () => Element;
+    isOpenPopoverMenuFields?: boolean;
     /**
      *  "inputData" texto en el InputSort
      */
@@ -94,6 +89,14 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @param initialSortApplyed sorts iniciales
          */
         init: (initialSortApplyed: Array<InitialSortApplied>) => void;
+        /**
+         *  "setElementRef" establece la referencia al elemento (inputFilter) desde donde se desprende el listado de campos
+         */
+        setElementRef: (ref: MutableRefObject<HTMLElement | null>) => void;
+        /**
+         *  "getElementRef" obtiene la referencia al elemento (inputFilter) desde donde se desprende el listado de campos
+         */
+        getElementRef: () => MutableRefObject<HTMLElement | null> | null;
         /**
          * Objetiene el Campo dado el nombre
          * @param name
@@ -111,14 +114,14 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @param field Campo por el cual se va filtrar
          * @returns
          */
-        showPopoverSortForAdd: (anchorEl: Element, field: SortField) => void;
+        showPopoverSortForAdd: (field: SortField) => void;
         /**
          * Muestra la ventan de edición de un sort aplicado
          * @param anchorEl Anchor de elemento desde donde debe emerger
          * @param sortToEdit sort a editar
          * @returns
          */
-        showPopoverSortForEdit: (anchorEl: Element, sortToEdit: SortFieldApplied) => void;
+        showPopoverSortForEdit: (sortToEdit: SortFieldApplied) => void;
         /**
          * Oculta la ventana de edición
          * @param stayInEditon determina si continua en edicióin
@@ -161,18 +164,12 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @returns
          */
         setInEdition: (newInEdition: boolean) => void;
-        /**
-         * Modifica los estados que se actualizan externamente al Store
-         * @param newIsMobile
-         * @returns
-         */
-        setExternalState: (newExternalState: ExternalOwnerState) => void;
         /**
          * Establece la función de apertura del menuu de campos
          * @param anchorEl
          * @returns
          */
-        openPopoverMenuFields: (anchorEl: Element) => void;
+        openPopoverMenuFields: () => void;
         /**
          * Limpia la función de apertura del menu de campos (por el valor anchorEl = undefined)
          */
@@ -183,4 +180,4 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
         setSize: (size: Extract<Sizes, 'small' | 'medium'>) => void;
     };
 }
-export type InitialStoreProps = Pick<DynamicSortState, 'automatic' | 'fields' | 'getLabel' | 'ownerState' | 'dataTestId' | 'size'>;
+export type InitialStoreProps = Pick<DynamicSortState, 'automatic' | 'fields' | 'getLabel' | 'ownerState' | 'dataTestId' | 'size' | 'storeId'>;

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

@@ -1,4 +1,4 @@
-import { DynamicSortStateWithActions } from './type';
+import { DynamicSortStateWithActions } from './types';
 /**
  * Hook que permite acceder al store de DynamicSort
  */

package/components/DynamicSort/store/useDynamicSortStore.js

@@ -7,7 +7,7 @@ function useDynamicSortStore(selector, equalityFn) {
   if (!store) {
     throw new Error("useDynamicSortStore context must be use inside DynamicSortContext");
   }
-  return useStore(store, selector, shallow);
+  return useStore(store, selector, equalityFn ?? shallow);
 }
 export {
   useDynamicSortStore as u

package/components/DynamicSort/subcomponents/AppliedSortChip/useAppliedSortChip.d.ts

@@ -5,7 +5,7 @@ import { SortFieldApplied } from '../../types';
  */
 declare function useAppliedSortChip(sort: SortFieldApplied): {
     onDelete: () => void;
-    onEditSort: (event: MouseEvent<HTMLButtonElement>) => void;
+    onEditSort: (_event: MouseEvent<HTMLButtonElement>) => void;
     iconFieldUrl: string;
     labels: import('../../types').DataTypeFilerLabels;
     iconSort: string;

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

@@ -13,16 +13,15 @@ function useAppliedSortChip(sort) {
   );
   const iconSort = sort.operator === "asc" ? `${host_static_assets}/${environment_assets}/${ascending}` : `${host_static_assets}/${environment_assets}/${descending}`;
   const labels = useMemo(() => {
-    return fieldFactory(sort.field.type).getLabels(sort, getLabel, formatters, sort.field);
+    return fieldFactory().getLabels(sort, getLabel, formatters, sort.field);
   }, [sort, getLabel]);
   function onDelete() {
     hidePopoverSort(false);
     removeSort(sort.id);
   }
-  function onEditSort(event) {
+  function onEditSort(_event) {
     hidePopoverSort(false);
-    const currentTarget = event.currentTarget;
-    setTimeout(() => showPopoverSortForEdit(currentTarget, sort), 10);
+    setTimeout(() => showPopoverSortForEdit(sort), 10);
   }
   return {
     onDelete,

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

@@ -18,7 +18,7 @@ function AppliedSorts() {
     {
       ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.appliedSorts, dataTestId),
       ownerState: { ...ownerState },
-      children: /* @__PURE__ */ jsx(ScrollBar, { autoHide: true, children: /* @__PURE__ */ jsx(AppliedSortInnerContainerStyled, { ownerState: {}, children: appliedSortsSorted?.map((sort) => /* @__PURE__ */ jsx(AppliedSortChip, { ...sort }, sort.id)) }) })
+      children: /* @__PURE__ */ jsx(ScrollBar, { autoHide: true, children: /* @__PURE__ */ jsx(AppliedSortInnerContainerStyled, { ownerState: {}, children: appliedSortsSorted?.reverse()?.map((sort) => /* @__PURE__ */ jsx(AppliedSortChip, { ...sort }, sort.id)) }) })
     }
   );
 }

package/components/DynamicSort/subcomponents/AppliedSorts/useAppliedSorts.d.ts

@@ -2,7 +2,7 @@
  * Hook que permite obtener los datos necesarios para mostrar los sorts aplicados
  */
 declare function useAppliedSorts(): {
-    appliedSortsSorted: import('../..').SortFieldApply[];
+    appliedSortsSorted: import('../..').SortFieldApplied[];
     isSkeleton: boolean;
 };
 export default useAppliedSorts;

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

@@ -1,7 +1,8 @@
+import { useModuleSkeleton } from "@m4l/core";
 import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 function useAppliedSorts() {
   const appliedSort = useDynamicSortStore((state) => state.appliedSorts);
-  const isSkeleton = useDynamicSortStore((state) => state.ownerState.isSkeleton);
+  const isSkeleton = useModuleSkeleton();
   const appliedSortsSorted = [...appliedSort].sort(
     (sortA, sortB) => sortA.isSet !== sortB.isSet ? Number(sortA.isSet) - Number(sortB.isSet) : sortB.id - sortA.id
   );

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

@@ -2,6 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.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";
@@ -10,9 +12,11 @@ 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);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
+      className: classRoot,
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicSort/subcomponents/FieldTypes/DataTypeComponent.js

@@ -3,9 +3,9 @@ import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import { f as fieldFactory } from "./fieldFactory.js";
 function DataTypeComponent(props) {
-  const { formSort, statusLoad } = props;
+  const { statusLoad } = props;
   const { setFocus } = useFormContext();
-  const Component = fieldFactory(formSort.field.type).getComponent();
+  const Component = fieldFactory().getComponent();
   useEffect(() => {
     setTimeout(() => setFocus("formValueOperator"), 100);
   }, [statusLoad]);

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

@@ -1,20 +1,20 @@
 import { FC } from 'react';
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
-import { SortField, SortFieldApplied, DataTypeFilerLabels, SortValue, InitialSortApplied } from '../../types';
+import { SortField, SortFieldApplied, DataTypeFilerLabels, SortValue, InitialSortApplied, FormSortValueBase } from '../../types';
 import * as Yup from 'yup';
 export type YupSchema = Yup.SchemaOf<any>;
 /**
  * Interface para crear los helpers de cada tipo de campo
  */
-export interface IFieldType<T> {
+export interface IFieldType {
     getComponent(): FC<{
         [key: string]: any;
     }>;
     getDefaultSort(field: SortField, fixed: boolean): SortFieldApplied;
     getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, formatters: Formatters, field: SortField): DataTypeFilerLabels;
     getSchema(getLabel: GetLabelType): YupSchema;
-    getFormValue(field: SortField, getLabel: GetLabelType, sortValue?: SortValue): T;
-    getSortFromFormValue(formSortValue: T): SortValue;
+    getFormValue(field: SortField, getLabel: GetLabelType, sortValue?: SortValue): FormSortValueBase;
+    getSortFromFormValue(formSortValue: FormSortValueBase): SortValue;
     verifySort(Sort: InitialSortApplied, field?: SortField): boolean;
 }

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

@@ -1,12 +1,12 @@
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import { IFieldType, YupSchema } from '../FieldTypeInterface';
-import { DataTypeFilerLabels, SortField, SortFieldApplied, SortValue, FormSortValueString, InitialSortApplied } from '../../../types';
+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
  */
-export declare class StringSortHelpers implements IFieldType<FormSortValueString> {
+export declare class SortHelpers implements IFieldType {
     getComponent(): typeof StringSort;
     /**
      * getDefaulSort obtiene el valor por defecto de un campo de tipo string
@@ -15,11 +15,11 @@ export declare class StringSortHelpers implements IFieldType<FormSortValueString
     /**
      * getSortFromFormValue obtiene el valor de un campo de tipo string
      */
-    getSortFromFormValue(formSortValue: FormSortValueString): SortValue;
+    getSortFromFormValue(formSortValue: FormSortValueBase): SortValue;
     /**
      * getFormValue obtiene el valor de un campo de tipo string
      */
-    getFormValue(field: SortField, _getLabel: GetLabelType, sortValue?: SortValue): FormSortValueString;
+    getFormValue(field: SortField, _getLabel: GetLabelType, sortValue?: SortValue): FormSortValueBase;
     /**
      * getLabels obtiene las etiquetas de un campo de tipo string
      */

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

@@ -1,8 +1,8 @@
 import * as Yup from "yup";
 import { g as getDynamicSortDictionary } from "../../../dictionary.js";
-import { S as SORT_OPERATORS } from "../../../constants.js";
+import { O as OPERATORS } from "../../../constants.js";
 import { S as StringSort } from "./index.js";
-class StringSortHelpers {
+class SortHelpers {
   getComponent() {
     return StringSort;
   }
@@ -70,12 +70,12 @@ class StringSortHelpers {
     if (typeof Sort.operator !== "string") {
       return false;
     }
-    if (SORT_OPERATORS.findIndex((f) => f === Sort.operator) === -1) {
+    if (OPERATORS.findIndex((f) => f === Sort.operator) === -1) {
       return false;
     }
     return typeof Sort.operator === "string";
   }
 }
 export {
-  StringSortHelpers as S
+  SortHelpers as S
 };

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { a as ascending, d as descending } from "../../../icons.js";
-import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../../dictionary.js";
+import { g as getDynamicSortDictionary, a 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/FieldTypes/fieldFactory.d.ts

@@ -1,6 +1,5 @@
-import { FieldType } from '../../types';
-import { StringSortHelpers } from './StringSort/helpers';
+import { SortHelpers } from './StringSort/helpers';
 /**
  * Factory que retorna el helper correspondiente al tipo de campo
  */
-export declare function fieldFactory(type: FieldType): StringSortHelpers;
+export declare function fieldFactory(): SortHelpers;

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

@@ -1,12 +1,12 @@
-import { S as StringSortHelpers } from "./StringSort/helpers.js";
+import { S as SortHelpers } from "./StringSort/helpers.js";
 const helpersStrategies = {
-  string: new StringSortHelpers(),
+  string: new SortHelpers(),
   __default__: () => {
     throw new Error("Type no defined");
   }
 };
-function fieldFactory(type) {
-  const selectedHelper = helpersStrategies?.[type];
+function fieldFactory() {
+  const selectedHelper = helpersStrategies?.["string"];
   if (!selectedHelper) {
     return helpersStrategies.__default__();
   }

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useInputSort } from "./useInputSort.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { useRef, useEffect } from "react";
 import { c as InputSortStyled, d as InputSortIconStyled, e as InputSortInputSkeletonStyled, f as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
 import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
 const InputSort = () => {
@@ -11,14 +12,22 @@ const InputSort = () => {
     inputData,
     inputHandlersProps,
     sortFields,
-    selectedFieldIndex
+    selectedFieldIndex,
+    setElementRef,
+    isOpenPopoverMenuFields,
+    isOpenPopoverSort
   } = useInputSort();
+  const elementRef = useRef(null);
+  useEffect(() => {
+    setElementRef(elementRef);
+  }, [setElementRef]);
   const { ownerState, size } = useDynamicSortBase();
-  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: { ...ownerState }, children: [
+  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: { ...ownerState }, "aria-expanded": isOpenPopoverMenuFields || isOpenPopoverSort, children: [
     /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, size, ownerState: { ...ownerState } }),
     isSkeleton ? /* @__PURE__ */ jsx(InputSortInputSkeletonStyled, { ownerState: { ...ownerState }, variant: "rounded" }) : /* @__PURE__ */ jsx(
       InputSortInputStyled,
       {
+        ref: elementRef,
         type: "text",
         value: inputData,
         placeholder: inputPlaceHolder,

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

@@ -27,7 +27,7 @@ declare function useInputSort(): {
         /**
          * Evento de foco del inputSort
          */
-        onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        onFocus: (_event: FocusEvent<HTMLInputElement>) => void;
         /**
          * Evento de cambio del inputSort
          */
@@ -45,5 +45,17 @@ declare function useInputSort(): {
      * Indice del campo seleccionado
      */
     selectedFieldIndex: number;
+    /**
+     * Actualiza la referencia del elemento (inputSort)
+     */
+    setElementRef: (ref: import('react').MutableRefObject<HTMLElement | null>) => void;
+    /**
+     * Indica si el menú de campos está abierto
+     */
+    isOpenPopoverMenuFields: boolean | undefined;
+    /**
+     * Indica si el popoverSort está abierto
+     */
+    isOpenPopoverSort: boolean;
 };
 export default useInputSort;

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

@@ -1,27 +1,28 @@
 import { useState, useEffect } from "react";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
+import { g as getDynamicSortDictionary, a as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
-import { A as ASSETS_URL, a as ASSETS } from "../../constants.js";
+import { A as ASSETS_URL, b as ASSETS } from "../../constants.js";
 function useInputSort() {
   const [selectedFieldIndex, setSelectedFieldIndex] = useState(-1);
   const [sortFields, setSortedFields] = useState([]);
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  const anchorEl = useDynamicSortStore((state) => state.fnAnchorEl);
+  const isOpenPopoverMenuFields = useDynamicSortStore((state) => state.isOpenPopoverMenuFields);
   const availableFields = useDynamicSortStore((state) => state.availableFields);
   const inputData = useDynamicSortStore((state) => state.inputData);
+  const isOpenPopoverSort = useDynamicSortStore((state) => !!state.popoverSortData);
   const {
     closePopoverMenuFields,
     hidePopoverSort,
     openPopoverMenuFields,
-    setInEdition,
     setInputData,
-    showPopoverSortForAdd
+    showPopoverSortForAdd,
+    setElementRef
   } = useDynamicSortStore((state) => state.actions);
   useEffect(() => {
-    if (!anchorEl) {
+    if (!isOpenPopoverMenuFields) {
       setSortedFields([]);
     } else {
       setSortedFields(
@@ -31,28 +32,25 @@ function useInputSort() {
       );
       setSelectedFieldIndex(-1);
     }
-  }, [anchorEl, inputData, availableFields, getLabel]);
+  }, [isOpenPopoverMenuFields, inputData, availableFields, getLabel]);
   function handleOpenPopUpClickItem(field) {
     closePopoverMenuFields();
-    if (anchorEl) {
-      showPopoverSortForAdd(anchorEl(), field);
-    }
+    showPopoverSortForAdd(field);
   }
   const inputHandlersProps = {
     /**
      * Evento de foco del inputSort
      */
-    onFocus: (event) => {
-      openPopoverMenuFields(event.currentTarget);
-      setInEdition(true);
+    onFocus: (_event) => {
+      openPopoverMenuFields();
     },
     /**
      * Evento de cambio del inputSort
      */
     onChange: (event) => {
       setInputData(event.target.value);
-      if (!anchorEl) {
-        openPopoverMenuFields(event.currentTarget);
+      if (!isOpenPopoverMenuFields) {
+        openPopoverMenuFields();
       }
       hidePopoverSort(true);
     },
@@ -124,7 +122,19 @@ function useInputSort() {
     /**
      * Indice del campo seleccionado
      */
-    selectedFieldIndex
+    selectedFieldIndex,
+    /**
+     * Actualiza la referencia del elemento (inputSort)
+     */
+    setElementRef,
+    /**
+     * Indica si el menú de campos está abierto
+     */
+    isOpenPopoverMenuFields,
+    /**
+     * Indica si el popoverSort está abierto
+     */
+    isOpenPopoverSort
   };
 }
 export {

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

@@ -4,8 +4,9 @@ import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.j
 import { P as PopoverMenuStyled, g as PopoverMenuItemStyled, h as PopoverMenuItemIconStyled } from "../../slots/DynamicSortSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
-  const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
+  const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
   const { size } = useDynamicSortBase();
+  const anchorEl = elementRef?.current;
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,
     {
@@ -14,11 +15,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,
         {
           startIcon: /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { size, src: field.urlIcon, ownerState: {} }),

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

@@ -4,7 +4,8 @@ import { SortField } from '../../types';
  * TODO: Documentar
  */
 declare function usePopoverMenuFields(): {
-    fnAnchorEl: (() => Element) | undefined;
+    elementRef: import('react').MutableRefObject<HTMLElement | null> | null;
+    isOpenPopoverMenuFields: boolean | undefined;
     getItemLabel: (field: SortField) => string;
     handleClosePopover: () => void;
     handleOpenPopUpClickItem: (_event: MouseEvent<HTMLLIElement>, field: SortField) => void;

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

@@ -1,15 +1,15 @@
 import { useModuleDictionary } from "@m4l/core";
 import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { shallow } from "zustand/shallow";
 function usePopoverMenuFields() {
   const { getLabel } = useModuleDictionary();
-  const fnAnchorEl = useDynamicSortStore((state) => state.fnAnchorEl);
+  const isOpenPopoverMenuFields = useDynamicSortStore((state) => state.isOpenPopoverMenuFields);
+  const elementRef = useDynamicSortStore((state) => state.actions.getElementRef(), shallow);
   const { showPopoverSortForAdd, closePopoverMenuFields } = useDynamicSortStore(
     (state) => state.actions
   );
   function handleOpenPopUpClickItem(_event, field) {
-    if (fnAnchorEl) {
-      showPopoverSortForAdd(fnAnchorEl(), field);
-    }
+    showPopoverSortForAdd(field);
   }
   function handleClosePopover() {
     closePopoverMenuFields(false);
@@ -18,7 +18,8 @@ function usePopoverMenuFields() {
     return field.label ?? getLabel(field.dictionaryId);
   }
   return {
-    fnAnchorEl,
+    elementRef,
+    isOpenPopoverMenuFields,
     getItemLabel,
     handleClosePopover,
     handleOpenPopUpClickItem

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

@@ -1,5 +1,6 @@
 import { KeyboardEvent } from 'react';
 import { FieldValues } from 'react-hook-form';
+import { Maybe } from '@m4l/core';
 import { FormSortFieldApplied, SortField } from '../../types';
 /**
  * TODO: Documentar
@@ -8,12 +9,12 @@ declare function usePopoverSort(): {
     field: SortField;
     labelField: string;
     canRender: boolean;
-    anchorEl: Element;
+    anchorEl: Maybe<HTMLElement>;
     handleKeyDownPopper: (event: KeyboardEvent<HTMLDivElement>) => void;
     handleClosePopover: () => void;
     onSubmit: (dataFieldValues: FieldValues) => Promise<void>;
     onClose: () => void;
-    sortFormValue: import('../../types').FormSortValueString;
+    sortFormValue: import('../../types').FormSortValueBase;
     formSort: FormSortFieldApplied;
     popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
         [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;

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

@@ -2,6 +2,7 @@ import { useRef, useMemo, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 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;
@@ -9,10 +10,11 @@ function usePopoverSort() {
   let sortFormValue;
   let popupValidationSchema;
   const { getLabel } = useModuleDictionary();
-  const popoverSortData = useDynamicSortStore((state) => state.popoverSortData);
+  const popoverSortData = useDynamicSortStore((state) => state.popoverSortData, shallow);
   const { hidePopoverSort, addSort, updateSort, getNewId } = useDynamicSortStore(
     (state) => state.actions
   );
+  const elementRef = useDynamicSortStore((state) => state.actions.getElementRef());
   const refPreviousPopoverSortData = useRef(popoverSortData);
   const statusLoad = useMemo(() => {
     let returnStatus;
@@ -27,9 +29,9 @@ function usePopoverSort() {
     return returnStatus;
   }, [popoverSortData]);
   if (popoverSortData?.openFor === "add") {
-    anchorEl = popoverSortData?.fnAnchorEl();
+    anchorEl = elementRef?.current;
     field = popoverSortData.field;
-    const helperField = fieldFactory(field.type);
+    const helperField = fieldFactory();
     popupValidationSchema = helperField.getSchema(getLabel);
     sortFormValue = helperField.getFormValue(field, getLabel);
     formSort = {
@@ -40,9 +42,9 @@ function usePopoverSort() {
       ...sortFormValue
     };
   } else if (popoverSortData) {
-    anchorEl = popoverSortData?.fnAnchorEl();
+    anchorEl = elementRef?.current;
     field = popoverSortData?.sort.field;
-    const helperField = fieldFactory(field.type);
+    const helperField = fieldFactory();
     popupValidationSchema = helperField.getSchema(getLabel);
     sortFormValue = helperField.getFormValue(field, getLabel, popoverSortData.sort);
     formSort = { ...popoverSortData?.sort, ...sortFormValue };
@@ -68,7 +70,7 @@ function usePopoverSort() {
     const newSort = {
       ...formSort,
       // todo: mejorar el tipado que se le envía a getSortFromFormValue
-      ...fieldFactory(sortField.fieldType).getSortFromFormValue(sortField),
+      ...fieldFactory().getSortFromFormValue(sortField),
       isSet: true
     };
     if (popoverSortData?.openFor === "add") {