@m4l/components 9.1.124 → 9.1.126

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

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useFormatter } from "@m4l/graphics";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";
+import { A as ASSETS_URL, a as ASSETS } from "../../constants.js";
+function useAppliedSortChip(sort) {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const formatters = useFormatter();
+  const { hidePopoverSort, removeSort, showPopoverSortForEdit } = useDynamicSortStore(
+    (state) => state.actions
+  );
+  const removeIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${ASSETS.close}`;
+  const labels = useMemo(() => {
+    return fieldFactory(sort.field.type).getLabels(sort, getLabel, formatters, sort.field);
+  }, [sort, getLabel]);
+  function onDelete() {
+    hidePopoverSort(false);
+    removeSort(sort.id);
+  }
+  function onEditSort(event) {
+    hidePopoverSort(false);
+    const currentTarget = event.currentTarget;
+    setTimeout(() => showPopoverSortForEdit(currentTarget, sort), 10);
+  }
+  return {
+    onDelete,
+    onEditSort,
+    removeIconUrl,
+    iconFieldUrl: sort.field?.urlIcon,
+    labels
+  };
+}
+export {
+  useAppliedSortChip as u
+};

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

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
+import { u as useAppliedSorts } from "./useAppliedSorts.js";
+import { f as AppliedSortsStyled, g as AppliedSortInnerContainerStyled } from "../../slots/DynamicSortSlots.js";
+import { A as AppliedSortChip } from "../AppliedSortChip/AppliedSortChip.js";
+function AppliedSorts() {
+  const { appliedSortsSorted, isSkeleton } = useAppliedSorts();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(AppliedSortsStyled, { ownerState: {} });
+  }
+  return /* @__PURE__ */ jsx(AppliedSortsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(AppliedSortInnerContainerStyled, { ownerState: {}, children: appliedSortsSorted?.map((sort) => /* @__PURE__ */ jsx(AppliedSortChip, { ...sort }, sort.id)) }) }) });
+}
+export {
+  AppliedSorts as A
+};

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

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

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

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.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";
+import { A as AppliedSorts } from "../AppliedSorts/AppliedSorts.js";
+import { S as SortActions } from "../SortActions/SortActions.js";
+import { P as PopoverSort } from "../PopoverSort/PopoverSort.js";
+function DynamicSortBase() {
+  const { ownerState, dataTestId } = useDynamicSortBase();
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState: { ...ownerState },
+      ...getPropDataTestId(dataTestId, DynamicSortSlots.root),
+      children: /* @__PURE__ */ jsxs(
+        InnerContainerStyled,
+        {
+          ownerState: { ...ownerState },
+          ...getPropDataTestId(dataTestId, DynamicSortSlots.innerContainer),
+          children: [
+            /* @__PURE__ */ jsx(InputSort, {}),
+            /* @__PURE__ */ jsx(AppliedSorts, {}),
+            /* @__PURE__ */ jsx(SortActions, {}),
+            /* @__PURE__ */ jsx(PopoverSort, {})
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  DynamicSortBase as D
+};

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

@@ -0,0 +1,9 @@
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+function useDynamicSortBase() {
+  const ownerState = useDynamicSortStore((state) => state.ownerState);
+  const dataTestId = useDynamicSortStore((state) => state.dataTestId);
+  return { ownerState, dataTestId };
+}
+export {
+  useDynamicSortBase as u
+};

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+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 { setFocus } = useFormContext();
+  const Component = fieldFactory(formSort.field.type).getComponent();
+  useEffect(() => {
+    setTimeout(() => setFocus("formValueOperator"), 100);
+  }, [statusLoad]);
+  return /* @__PURE__ */ jsx(Component, {});
+}
+export {
+  DataTypeComponent as D
+};

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 { Field, SortFieldApplied, DataTypeFilerLabels, SortValue, InitialSortApplied } from '../../types';
+import { SortField, SortFieldApplied, DataTypeFilerLabels, SortValue, InitialSortApplied } from '../../types';
 import * as Yup from 'yup';
 export type YupSchema = Yup.SchemaOf<any>;
 /**
@@ -11,10 +11,10 @@ export interface IFieldType<T> {
     getComponent(): FC<{
         [key: string]: any;
     }>;
-    getDefaultSort(field: Field, fixed: boolean): SortFieldApplied;
-    getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, formatters: Formatters, field: Field): DataTypeFilerLabels;
+    getDefaultSort(field: SortField, fixed: boolean): SortFieldApplied;
+    getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, formatters: Formatters, field: SortField): DataTypeFilerLabels;
     getSchema(getLabel: GetLabelType): YupSchema;
-    getFormValue(field: Field, getLabel: GetLabelType, sortValue?: SortValue): T;
+    getFormValue(field: SortField, getLabel: GetLabelType, sortValue?: SortValue): T;
     getSortFromFormValue(formSortValue: T): SortValue;
-    verifySort(Sort: InitialSortApplied, field?: Field): boolean;
+    verifySort(Sort: InitialSortApplied, field?: SortField): boolean;
 }

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/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, SortFieldApplied, SortValue, FormSortValueString, InitialSortApplied } from '../../../types';
+import { DataTypeFilerLabels, SortField, SortFieldApplied, SortValue, FormSortValueString, InitialSortApplied } from '../../../types';
 import { StringSort } from './index';
 /**
  * TODO: Documentar
@@ -11,7 +11,7 @@ export declare class StringSortHelpers implements IFieldType<FormSortValueString
     /**
      * TODO: Documentar
      */
-    getDefaultSort(field: Field, fixed: boolean): SortFieldApplied;
+    getDefaultSort(field: SortField, fixed: boolean): SortFieldApplied;
     /**
      * TODO: Documentar
      */
@@ -19,11 +19,11 @@ export declare class StringSortHelpers implements IFieldType<FormSortValueString
     /**
      * TODO: Documentar
      */
-    getFormValue(field: Field, getLabel: GetLabelType, sortValue?: SortValue): FormSortValueString;
+    getFormValue(field: SortField, getLabel: GetLabelType, sortValue?: SortValue): FormSortValueString;
     /**
      * TODO: Documentar
      */
-    getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, _formatters: Formatters, _field: Field): DataTypeFilerLabels;
+    getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, _formatters: Formatters, _field: SortField): DataTypeFilerLabels;
     /**
      * TODO: Documentar
      */
@@ -31,5 +31,5 @@ export declare class StringSortHelpers implements IFieldType<FormSortValueString
     /**
      * TODO: Documentar
      */
-    verifySort(Sort: InitialSortApplied, _field?: Field): boolean;
+    verifySort(Sort: InitialSortApplied, _field?: SortField): boolean;
 }

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

@@ -0,0 +1,84 @@
+import * as Yup from "yup";
+import { g as getDynamicSortDictionary } from "../../../dictionary.js";
+import { S as SORT_OPERATORS } from "../../../constants.js";
+import { S as StringSort } from "./index.js";
+class StringSortHelpers {
+  getComponent() {
+    return StringSort;
+  }
+  /**
+   * TODO: Documentar
+   */
+  getDefaultSort(field, fixed) {
+    const defaultOperator = field.defaultOperator;
+    const defaultSort = {
+      id: 0,
+      fieldType: "string",
+      field,
+      fixed,
+      isSet: true,
+      operator: "asc"
+    };
+    if (defaultOperator !== void 0 && typeof defaultOperator === "string") {
+      defaultSort.operator = defaultOperator;
+    }
+    return defaultSort;
+  }
+  /**
+   * TODO: Documentar
+   */
+  getSortFromFormValue(formSortValue) {
+    const operator = formSortValue.formValueOperator.operator;
+    return {
+      fieldType: "string",
+      operator
+    };
+  }
+  /**
+   * TODO: Documentar
+   */
+  getFormValue(field, getLabel, sortValue) {
+    const sortValueOperator = sortValue ? sortValue : void 0;
+    const operator = sortValueOperator ? sortValueOperator.operator : field.defaultOperator ?? "asc";
+    return {
+      fieldType: "string",
+      formValueOperator: {
+        operator,
+        name: getLabel(getDynamicSortDictionary(`operator_${operator}`))
+      }
+    };
+  }
+  /**
+   * TODO: Documentar
+   */
+  getLabels(Sort, getLabel, _formatters, _field) {
+    const labelOperator = Sort.operator ? getLabel(getDynamicSortDictionary(`operator_${Sort.operator}`)) : "";
+    return {
+      labelField: Sort.field.label ?? getLabel(Sort.field.dictionaryId),
+      labelOperator
+    };
+  }
+  /**
+   * TODO: Documentar
+   */
+  getSchema(getLabel) {
+    return Yup.object({
+      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_Sort.error_operator_required`))
+    });
+  }
+  /**
+   * TODO: Documentar
+   */
+  verifySort(Sort, _field) {
+    if (typeof Sort.operator !== "string") {
+      return false;
+    }
+    if (SORT_OPERATORS.findIndex((f) => f === Sort.name) === -1) {
+      return false;
+    }
+    return typeof Sort.operator === "string";
+  }
+}
+export {
+  StringSortHelpers as S
+};

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

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../../dictionary.js";
+import { R as RHFAutocomplete } from "../../../../hook-form/RHFAutocomplete/RHFAutocomplete.js";
+function StringSort() {
+  const { getLabel } = useModuleDictionary();
+  const optionsYesNo = useMemo(
+    () => [
+      {
+        operator: "asc",
+        name: getLabel(getDynamicSortDictionary(`label_ascending`))
+      },
+      {
+        operator: "desc",
+        name: getLabel(getDynamicSortDictionary(`label_descending`))
+      }
+    ],
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    RHFAutocomplete,
+    {
+      name: "formValueOperator",
+      type: "text",
+      autoComplete: "off",
+      options: optionsYesNo,
+      getOptionLabel: (option) => option.name,
+      isOptionEqualToValue: (option, value) => option.operator === value.operator,
+      label: getLabel(getDynamicSortDictionary(DICCTIONARY.input_placeholder))
+    }
+  ) });
+}
+export {
+  StringSort as S
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useInputSort } from "./useInputSort.js";
+import { I as InputFilterSkeleton } from "./InputSortSkeleton.js";
+import { h as InputSortStyled, i as InputSortIconStyled, j as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
+import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
+const InputSort = () => {
+  const {
+    iconUrl,
+    isSkeleton,
+    inputPlaceHolder,
+    inputData,
+    inputHandlersProps,
+    sortFields,
+    selectedFieldIndex
+  } = useInputSort();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(InputSortStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
+  }
+  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: {}, children: [
+    /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, ownerState: {} }),
+    /* @__PURE__ */ jsx(
+      InputSortInputStyled,
+      {
+        type: "text",
+        value: inputData,
+        placeholder: inputPlaceHolder,
+        ownerState: {},
+        ...inputHandlersProps
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverMenuFields, { fields: sortFields, selectFieldIndex: selectedFieldIndex })
+  ] });
+};
+export {
+  InputSort as I
+};

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

@@ -0,0 +1,19 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Skeleton } from "@mui/material";
+function InputFilterSkeleton() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "circular",
+        width: "16px",
+        height: "16px",
+        sx: { minWidth: "16px", minHeight: "16px" }
+      }
+    ),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "16px", sx: { minWidth: "80px" } })
+  ] });
+}
+export {
+  InputFilterSkeleton as I
+};

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
-import { Field } from '../../types';
+import { SortField } from '../../types';
 /**
  * TODO: Documentar
  */
@@ -40,7 +40,7 @@ declare function useInputSort(): {
     /**
      * Campos filtrados por el inputSort
      */
-    sortFields: Field[];
+    sortFields: SortField[];
     /**
      * Indice del campo seleccionado
      */

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

@@ -0,0 +1,132 @@
+import { useState, useEffect } from "react";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { A as ASSETS_URL, a 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 availableFields = useDynamicSortStore((state) => state.availableFields);
+  const inputData = useDynamicSortStore((state) => state.inputData);
+  const {
+    closePopoverMenuFields,
+    hidePopoverSort,
+    openPopoverMenuFields,
+    setInEdition,
+    setInputData,
+    showPopoverSortForAdd
+  } = useDynamicSortStore((state) => state.actions);
+  useEffect(() => {
+    if (!anchorEl) {
+      setSortedFields([]);
+    } else {
+      setSortedFields(
+        availableFields.filter(
+          (field) => (field.label ?? getLabel(field.dictionaryId)).includes(inputData)
+        )
+      );
+      setSelectedFieldIndex(-1);
+    }
+  }, [anchorEl, inputData, availableFields, getLabel]);
+  function handleOpenPopUpClickItem(field) {
+    closePopoverMenuFields();
+    if (anchorEl) {
+      showPopoverSortForAdd(anchorEl(), field);
+    }
+  }
+  const inputHandlersProps = {
+    /**
+     * Evento de foco del inputSort
+     */
+    onFocus: (event) => {
+      openPopoverMenuFields(event.currentTarget);
+      setInEdition(true);
+    },
+    /**
+     * Evento de cambio del inputSort
+     */
+    onChange: (event) => {
+      setInputData(event.target.value);
+      if (!anchorEl) {
+        openPopoverMenuFields(event.currentTarget);
+      }
+      hidePopoverSort(true);
+    },
+    /**
+     * Evento de teclado del inputSort
+     */
+    onKeyDown: (event) => {
+      if (event.key === "ArrowDown") {
+        let newIndex = -1;
+        if (sortFields.length > 0) {
+          if (selectedFieldIndex < sortFields.length - 1) {
+            newIndex = selectedFieldIndex + 1;
+          } else {
+            newIndex = sortFields.length - 1;
+          }
+        }
+        setSelectedFieldIndex(newIndex);
+      }
+      if (event.key === "ArrowUp") {
+        let newIndex = -1;
+        if (sortFields.length > 0) {
+          if (selectedFieldIndex > -1) {
+            newIndex = selectedFieldIndex - 1;
+          }
+        }
+        setSelectedFieldIndex(newIndex);
+      }
+      if (event.key === "Escape") {
+        closePopoverMenuFields();
+      }
+      if (event.key !== "Enter") {
+        return;
+      }
+      if (selectedFieldIndex === -1) {
+        if (inputData.trim() === "") {
+          closePopoverMenuFields();
+          return;
+        }
+      } else {
+        handleOpenPopUpClickItem(sortFields[selectedFieldIndex]);
+      }
+    }
+  };
+  return {
+    /**
+     * URL del icono del inputSort  `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${ASSETS.close}`;
+     */
+    iconUrl: `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${ASSETS.list_bulleted}`,
+    /**
+     * Si es esqueleto mostrar la versión de esqueleton
+     */
+    isSkeleton,
+    /**
+     * Texto de placeholder del inputSort
+     */
+    inputPlaceHolder: getLabel(getDynamicSortDictionary(DICCTIONARY.input_placeholder)),
+    /**
+     * Texto del inputSort
+     */
+    inputData,
+    /**
+     * Props para el handler de eventos del inputSort
+     */
+    inputHandlersProps,
+    /**
+     * Campos filtrados por el inputSort
+     */
+    sortFields,
+    /**
+     * Indice del campo seleccionado
+     */
+    selectedFieldIndex
+  };
+}
+export {
+  useInputSort as u
+};

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

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

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
+import { P as PopoverMenuStyled, k as PopoverMenuItemStyled, l as PopoverMenuItemIconStyled, m as PopoverMenuItemLabelStyled } from "../../slots/DynamicSortSlots.js";
+function PopoverMenuFields(props) {
+  const { fields, selectFieldIndex } = props;
+  const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
+  return /* @__PURE__ */ jsx(
+    PopoverMenuStyled,
+    {
+      disableAutoFocus: true,
+      disableRestoreFocus: true,
+      arrowType: "top-left",
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      open: Boolean(fnAnchorEl),
+      onClose: handleClosePopover,
+      anchorEl: fnAnchorEl?.(),
+      ownerState: {},
+      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsxs(
+        PopoverMenuItemStyled,
+        {
+          dense: true,
+          selected: index === selectFieldIndex,
+          onClick: (event) => handleOpenPopUpClickItem(event, field),
+          ownerState: {},
+          children: [
+            /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
+            /* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
+          ]
+        },
+        `menu_action_${getItemLabel(field)}`
+      ))
+    }
+  );
+}
+export {
+  PopoverMenuFields as P
+};

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

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

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

@@ -0,0 +1,29 @@
+import { useModuleDictionary } from "@m4l/core";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+function usePopoverMenuFields() {
+  const { getLabel } = useModuleDictionary();
+  const fnAnchorEl = useDynamicSortStore((state) => state.fnAnchorEl);
+  const { showPopoverSortForAdd, closePopoverMenuFields } = useDynamicSortStore(
+    (state) => state.actions
+  );
+  function handleOpenPopUpClickItem(_event, field) {
+    if (fnAnchorEl) {
+      showPopoverSortForAdd(fnAnchorEl(), field);
+    }
+  }
+  function handleClosePopover() {
+    closePopoverMenuFields(false);
+  }
+  function getItemLabel(field) {
+    return field.label ?? getLabel(field.dictionaryId);
+  }
+  return {
+    fnAnchorEl,
+    getItemLabel,
+    handleClosePopover,
+    handleOpenPopUpClickItem
+  };
+}
+export {
+  usePopoverMenuFields as u
+};