@m4l/components 0.1.60 → 0.1.62

package/components/DynamicFilter/{index.ceabc6b6.js → index.10f901c6.js}

@@ -1,37 +1,37 @@
 import { shallow } from "zustand/shallow";
-import { S as ScrollBar } from "../ScrollBar/index.35ebe9a1.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.afa201a7.js";
+import { S as ScrollBar } from "../ScrollBar/index.b77feabd.js";
 import { useContext, useMemo, useEffect, createContext, useRef, createElement, useState, useCallback } from "react";
+import clsx from "clsx";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../vendor.925c029e.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.afa201a7.js";
+import { T as TEST_PROP_ID } from "../../vendor.29969396.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
 import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.1affe51a.js";
 import { P as Popover } from "../mui_extended/Popover/index.8ed52492.js";
 import { I as Icon } from "../Icon/index.b29ff2d9.js";
 import { R as RHFormProvider } from "../../contexts/RHFormContext/index.3dc6e2f5.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.06b651ab.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.6eb24c0b.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.56a0dcf9.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.3f75a205.js";
 import { useFormContext, useWatch } from "react-hook-form";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
-import "../../contexts/ModalContext/index.f215bf0b.js";
+import "../../contexts/ModalContext/index.b4114066.js";
 import "../../react-draggable.6471b07e.js";
-import "../ModalDialog/index.99cde79e.js";
+import "../ModalDialog/index.dc7ebe06.js";
 import "../Resizeable/index.04fa8de5.js";
-import "../modal/WindowConfirm.897eb532.js";
-import "../modal/WindowBase.d1e40422.js";
-import "../areas/components/index.37fd13b9.js";
-import "../areas/components/AreasAdmin/index.1a331d66.js";
+import "../modal/WindowConfirm.42ec4dcd.js";
+import "../modal/WindowBase.7828e042.js";
+import "../areas/components/index.9f62ca8e.js";
+import "../areas/components/AreasAdmin/index.645bd2c7.js";
 import { useStore, createStore } from "zustand";
-import "../areas/contexts/AreasContext/index.5e4e0c5d.js";
-import "../areas/components/AreasContainer/index.ff33521a.js";
+import "../areas/contexts/AreasContext/index.f3d6e728.js";
+import "../areas/components/AreasContainer/index.3e74c849.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.b620abed.js";
-import "../areas/contexts/index.065f1714.js";
+import "../areas/contexts/index.3623b460.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
 import "../mui_extended/Accordion/index.725a10af.js";
@@ -45,16 +45,16 @@ import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.b6ae791a.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.89e7963b.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.bb6cb5df.js";
 import "lodash/debounce";
 import "../hook-form/RHFCheckbox/index.6e80f572.js";
 import { styled, alpha as alpha$1 } from "@mui/material/styles";
 import "../ErrorLabel/index.e140421c.js";
 import "@mui/x-date-pickers";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.6c129ce4.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.b172f4a8.js";
-import "../hook-form/RHFPeriod/index.60c2cc90.js";
-import "../Period/index.0ffcbec1.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.d3544fa3.js";
+import "../hook-form/RHFPeriod/index.c4944f9c.js";
+import "../Period/index.796b3af4.js";
 import "lodash/isString";
 import "react-dropzone";
 import "../hook-form/RHFUpload/index.7fdff30f.js";
@@ -88,39 +88,46 @@ const DATE_TIME_OPERATORS = [
 ];
 const dynamicFilterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",
+  "filterButton",
   "containerFistRow",
   "containerInputFilter",
-  "filterButton",
   "wrapperApplyedFilters",
   "containerApplyedFilters",
   "applyedFilter",
-  "popUpMenuFields",
+  "clearFiltersButton",
+  "popoverMenuFields",
+  "popoverMenuFieldsPaper",
   "popoverMenuFieldsItem",
+  "popoverFilter",
   "popoverFilterPaper",
   "popoverFilterHeader",
   "containerBooleanFilter",
   "containerDateTimeFilter",
   "containerNumberFilter",
   "containerStringFilter",
+  "isSkeleton",
   "isMobile",
   "inEdition",
   "isDirty",
-  "isValid"
+  "isInvalid",
+  "noSetted"
 ]);
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.inEdition && "inEdition", ownerState.isDirty && "isDirty", ownerState.isValid && "isValid", ownerState.isMobile && "isMobile"],
-    filterButton: ["filterButton", ownerState.isValid && "isValid", ownerState.isDirty && "isDirty"],
+    root: ["root", ownerState.inEdition && "inEdition", ownerState.isDirty && "isDirty", !ownerState.isValid && "isInvalid", ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
+    filterButton: ["filterButton"],
     containerFistRow: ["containerFistRow"],
     containerInputFilter: ["containerInputFilter"],
     wrapperApplyedFilters: ["wrapperApplyedFilters"],
     containerApplyedFilters: ["containerApplyedFilters"],
     applyedFilter: ["applyedFilter"],
-    popUpMenuFields: ["popUpMenuFields"],
+    clearFiltersButton: ["clearFiltersButton"],
+    popoverMenuFields: ["popoverMenuFields"],
+    popoverMenuFieldsPaper: ["popoverMenuFieldsPaper"],
     popoverMenuFieldsItem: ["popoverMenuFieldsItem"],
+    popoverFilter: ["popoverFilter"],
     popoverFilterPaper: ["popoverFilterPaper"],
     popoverFilterHeader: ["popoverFilterHeader"],
-    clearFilters: ["clearFilters"],
     containerBooleanFilter: ["containerBooleanFilter"],
     containerDateTimeFilter: ["containerDateTimeFilter"],
     containerNumberFilter: ["containerNumberFilter"],
@@ -157,28 +164,6 @@ const DYNAMICFILTER_DICTIONARY_ID = "dynamic_filter";
 function getDynamicFilterComponentsDictionary() {
   return [DYNAMICFILTER_DICTIONARY_ID].concat(getCommonActionsDictionary());
 }
-const defaultDynamicFilterDictionary = {
-  dynamic_filter: {
-    filter_tooltip: "Search",
-    operator_b: "between",
-    operator_e: "=",
-    operator_ne: "!=",
-    operator_gt: ">",
-    operator_gte: ">=",
-    operator_lt: "<",
-    operator_lte: "<=",
-    operator_c: "contains",
-    operator_nc: "not contains",
-    all_fields: "all_fields",
-    operand_true: "true",
-    operand_false: "false",
-    error_operator_required: "Operator required",
-    error_operand_required: "Operand required",
-    error_invalid_date: "Invalid date",
-    error_operand_mustbe_number: "Invalid number",
-    error_filters_no_setted: "Filters not yet set"
-  }
-};
 const LABEL_FILTER_BUTTON = "filter_tooltip";
 const DICCTIONARY = {
   input_placeholder: "input_placeholder",
@@ -385,11 +370,13 @@ const getDefaultBooleanFilter = (field, fixed) => {
 };
 const getBooleanLabels = (filter, getLabel) => {
   const labelOperands = filter.operand1 ? getLabel(getDynamicFilterDictionary("operand_true")) : getLabel(getDynamicFilterDictionary("operand_false"));
-  return {
-    labelField: getLabel(filter.field.dictionaryId),
+  const ret = {
+    labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
     labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
     labelOperands
   };
+  console.log("getBooleanLabels", ret, filter.field.dictionaryId);
+  return ret;
 };
 const getBooleanSchema = (getLabel) => Yup.object({
   formValueOperator: Yup.object().nullable().required(getLabel(`error_operator_required`)),
@@ -440,7 +427,7 @@ const getDefaultStringFilter = (field, fixed) => {
 const getStringLabels = (filter, getLabel) => {
   const labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
   return {
-    labelField: getLabel(filter.field.dictionaryId),
+    labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
     labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
     labelOperands
   };
@@ -505,7 +492,7 @@ const getDateLabels = (filter, getLabel, formatters) => {
     labelOperands = filter.operand1 ? dateFormatter.formatDate(filter.operand1, dateFormatter.datetimeFormat) : "";
   }
   return {
-    labelField: getLabel(filter.field.dictionaryId),
+    labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
     labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
     labelOperands
   };
@@ -584,7 +571,7 @@ const getNumberLabels = (filter, getLabel) => {
     labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
   }
   return {
-    labelField: getLabel(filter.field.dictionaryId),
+    labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
     labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
     labelOperands
   };
@@ -917,16 +904,14 @@ const updateAutomatic = (state) => {
   if (state.ownerState.isValid) {
     if (state.automatic) {
       state.ownerState.isDirty = false;
-      state.onChangeFilters(
-        formatToInitialFilters(state.applyedFilters),
-        formatToRawFilter(state.applyedFilters)
-      );
+      state.countOnChangeFiltersApplyed++;
     }
   }
   updateOwnerStateClasses(state);
 };
 const createAreaStore = (initProps) => {
   const startProps = {
+    countOnChangeFiltersApplyed: 0,
     applyedFilters: [],
     availableFields: [],
     fnAnchorEl: void 0,
@@ -947,7 +932,7 @@ const createAreaStore = (initProps) => {
                 initialFiltersApplyed,
                 state.actions.getFieldByName
               );
-              updateAvailableFields(state);
+              updateAutomatic(state);
             });
           },
           getFieldByName: (name) => {
@@ -1008,10 +993,7 @@ const createAreaStore = (initProps) => {
             set((state) => {
               if (state.ownerState.isValid) {
                 state.ownerState.isDirty = false;
-                state.onChangeFilters(
-                  formatToInitialFilters(state.applyedFilters),
-                  formatToRawFilter(state.applyedFilters)
-                );
+                state.countOnChangeFiltersApplyed++;
                 updateOwnerStateClasses(state);
               }
             });
@@ -1049,9 +1031,9 @@ const createAreaStore = (initProps) => {
               updateOwnerStateClasses(state);
             });
           },
-          setIsMobile: (newIsMobile) => {
+          setExternalState: (newExternalState) => {
             set((state) => {
-              state.ownerState.isMobile = newIsMobile;
+              state.ownerState = { ...state.ownerState, ...newExternalState };
               updateOwnerStateClasses(state);
             });
           },
@@ -1092,7 +1074,8 @@ function DynamicFilterProvider(props) {
     environment_assets
   } = useEnvironment();
   const isDesktop = useResponsiveDesktop();
-  const isFirstRender = useFirstRender([isDesktop]);
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
   if (!dynamicFilterStoreRef.current) {
     dynamicFilterStoreRef.current = createAreaStore({
       allField: {
@@ -1102,9 +1085,9 @@ function DynamicFilterProvider(props) {
       withAllField,
       fields,
       automatic,
-      onChangeFilters,
       getLabel,
       ownerState: {
+        isSkeleton,
         isDirty: !automatic,
         inEdition: false,
         isValid: true,
@@ -1113,12 +1096,29 @@ function DynamicFilterProvider(props) {
     });
     dynamicFilterStoreRef.current.getState().actions.init(initialApplyedFilters);
   }
+  const countOnChangeFiltersApplyed = useStore(dynamicFilterStoreRef.current, (state) => state.countOnChangeFiltersApplyed, shallow);
+  useEffect(() => {
+    if (countOnChangeFiltersApplyed === 0) {
+      return;
+    }
+    const state = dynamicFilterStoreRef.current?.getState();
+    if (state) {
+      dynamicFilterStoreRef.current?.getState().actions.setExternalState({
+        isMobile: !isDesktop,
+        isSkeleton
+      });
+      onChangeFilters(formatToInitialFilters(state.applyedFilters), formatToRawFilter(state.applyedFilters));
+    }
+  }, [countOnChangeFiltersApplyed]);
   useEffect(() => {
     if (isFirstRender) {
       return;
     }
-    dynamicFilterStoreRef.current?.getState().actions.setIsMobile(!isDesktop);
-  }, [isDesktop]);
+    dynamicFilterStoreRef.current?.getState().actions.setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
   useEffect(() => {
     if (automatic) {
       dynamicFilterStoreRef.current?.getState().actions.fireOnChangeFilters();
@@ -1173,8 +1173,11 @@ const DynamicFilterRoot = styled("div", {})(({
       }
     }
   },
-  [`&.${dynamicFilterClasses.filterButton} .${dynamicFilterClasses.applyedFilter}`]: {
-    border: `1px solid ${theme.palette.error.main}`
+  [`&.${dynamicFilterClasses.isInvalid} .${dynamicFilterClasses.filterButton}`]: {
+    border: `1px dashed ${theme.palette.error.main}`
+  },
+  [`& .${dynamicFilterClasses.applyedFilter}.${dynamicFilterClasses.noSetted}`]: {
+    border: `1px dashed ${theme.palette.error.main}`
   },
   ...theme.components?.M4LDynamicFilter?.styleOverrides
 }));
@@ -1183,24 +1186,6 @@ const ContainerFistRow = styled("div")(() => ({
   display: "flex",
   justifyContent: "space-between"
 }));
-const WrapperApplyedFilters = styled("div")(({
-  theme
-}) => ({
-  width: "100%",
-  margin: theme.spacing(0, 1),
-  paddingLeft: theme.spacing(1),
-  borderLeft: `1px solid ${theme.palette.divider}`
-}));
-const ContainerApplyedFilters = styled("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  height: "auto",
-  gap: theme.spacing(1.5)
-}));
 const WrapperApplyedFilter = styled("div")(({
   theme
 }) => ({
@@ -1271,7 +1256,7 @@ function ApplyedFilter(props) {
   } = useDynamicFilter((state) => state.actions);
   const labels = useMemo(() => {
     return getLabelsFilter(props, getLabel, formatters);
-  }, [props]);
+  }, [props, getLabel]);
   const urlIcon = useMemo(() => {
     return field.urlIcon;
   }, [field]);
@@ -1285,7 +1270,7 @@ function ApplyedFilter(props) {
     setTimeout(() => showPopupForEdit(currentTarget, props), 10);
   };
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
-    className: clsx(classesApplyedFilter, !isSetted ? "noSetted" : null),
+    className: clsx(classesApplyedFilter, !isSetted ? `${COMPONENT_CLASS_NAME}-noSetted` : null),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getTestIdByClass("applyedFilter", field.name)
     } : {},
@@ -1309,11 +1294,29 @@ function ApplyedFilter(props) {
     })]
   });
 }
+const WrapperApplyedFilters = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  margin: theme.spacing(0, 1),
+  paddingLeft: theme.spacing(1),
+  borderLeft: `1px solid ${theme.palette.divider}`
+}));
+const ContainerApplyedFilters = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  height: "auto",
+  gap: theme.spacing(1.5)
+}));
 function ApplyedFilters() {
   const classesWrapperApplyedFilters = useDynamicFilter((state) => state.classes.wrapperApplyedFilters, shallow);
   const classesContainerApplyedFilters = useDynamicFilter((state) => state.classes.containerApplyedFilters, shallow);
   const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
-  const isSkeleton = useModuleSkeleton();
+  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
       className: classesWrapperApplyedFilters
@@ -1346,26 +1349,27 @@ const SKTClearFilters = styled$1("div")(({
   minWidth: theme.spacing(3.75),
   height: theme.spacing(3.75)
 }));
-const WrapperClearFilters = styled$1("div")(({
+styled$1("div")(({
   theme
 }) => ({
   paddingLeft: theme.spacing(0.5),
   borderLeft: `1px solid ${theme.palette.divider}`
 }));
-const ClearFilters = () => {
+const ClearFiltersButton = () => {
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  const isSkeleton = useModuleSkeleton();
   const {
     clearFilters,
     hidePopoverFilter: hidePopupEdit
   } = useDynamicFilter((state) => state.actions);
   const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
-  const clearFiltersClasses = useDynamicFilter((state) => state.classes.clearFilters, shallow);
+  const clearFiltersButtonClasses = useDynamicFilter((state) => state.classes.clearFiltersButton, shallow);
+  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTClearFilters, {
+      className: clearFiltersButtonClasses,
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
         width: "20px",
@@ -1378,13 +1382,11 @@ const ClearFilters = () => {
     clearFilters();
   };
   if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
-    return /* @__PURE__ */ jsx(WrapperClearFilters, {
-      className: clearFiltersClasses,
-      children: /* @__PURE__ */ jsx(IconButton, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
-        onClick: onClickClearFilters,
-        dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
-      })
+    return /* @__PURE__ */ jsx(IconButton, {
+      className: clearFiltersButtonClasses,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+      onClick: onClickClearFilters,
+      dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
     });
   }
   return null;
@@ -1406,17 +1408,18 @@ function FilterButton() {
   const automatic = useDynamicFilter((state) => state.automatic);
   const isValid = useDynamicFilter((state) => state.ownerState.isValid);
   const isDirty = useDynamicFilter((state) => state.ownerState.isDirty);
+  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton);
   const {
     fireOnChangeFilters
   } = useDynamicFilter((state) => state.actions);
   const classesFilterButton = useDynamicFilter((state) => state.classes.filterButton);
-  const isSkeleton = useModuleSkeleton();
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      className: classesFilterButton,
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
         width: 20,
@@ -1439,12 +1442,16 @@ function PopoverMenuFields(props) {
     fields
   } = props;
   const fnAnchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
-  const classesPopUpMenuFields = useDynamicFilter((state) => state.classes.popUpMenuFields, shallow);
+  const classesPopUpMenuFields = useDynamicFilter((state) => state.classes.popoverMenuFields, shallow);
+  const classesPopUpMenuFieldsPaper = useDynamicFilter((state) => state.classes.popoverMenuFieldsPaper, shallow);
   const classespopoverMenuFieldsItem = useDynamicFilter((state) => state.classes.popoverMenuFieldsItem, shallow);
   const {
     showPopoverFilterForAdd,
     closePopoverMenuFields
   } = useDynamicFilter((state) => state.actions, shallow);
+  const {
+    getLabel
+  } = useModuleDictionary();
   const handleClosePopover = () => {
     closePopoverMenuFields(false);
   };
@@ -1454,11 +1461,8 @@ function PopoverMenuFields(props) {
     }
   };
   return /* @__PURE__ */ jsx(Popover, {
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("popUpMenuFields")
-    } : {},
-    disableRestoreFocus: true,
     className: classesPopUpMenuFields,
+    disableRestoreFocus: true,
     open: Boolean(fnAnchorEl),
     anchorEl: fnAnchorEl && fnAnchorEl(),
     onClose: handleClosePopover,
@@ -1480,23 +1484,29 @@ function PopoverMenuFields(props) {
       },
       mt: "16px"
     },
+    PaperProps: {
+      className: classesPopUpMenuFieldsPaper,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsPaper")
+      } : {}
+    },
     children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ createElement(MenuItem, {
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsItem", field.name)
       } : {},
       className: classespopoverMenuFieldsItem,
-      key: `menu_action_${index}`,
+      key: `menu_action_${field.label ?? getLabel(field.dictionaryId)}`,
       dense: true,
       onClick: (event) => handleOpenPopUpClickItem(event, field),
       selected: index === selectFieldIndex
     }, /* @__PURE__ */ jsx(Icon, {
       src: field.urlIcon
     }), /* @__PURE__ */ jsx(LabelMemuItem, {
-      children: field.dictionaryId
+      children: field.label ?? getLabel(field.dictionaryId)
     })))
   });
 }
-const WrapperInputFilter = styled("div")(({
+const ContainerInputFilter = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -1530,6 +1540,7 @@ function InputFilter() {
   const inputData = useDynamicFilter((state) => state.inputData);
   const availableFields = useDynamicFilter((state) => state.availableFields, shallow);
   const classesContainerInputFilter = useDynamicFilter((state) => state.classes.containerInputFilter, shallow);
+  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
   const {
     showPopoverFilterForAdd,
     addFilter,
@@ -1541,7 +1552,6 @@ function InputFilter() {
     setInEdition,
     setInputData
   } = useDynamicFilter((state) => state.actions, shallow);
-  const isSkeleton = useModuleSkeleton();
   const {
     getLabel
   } = useModuleDictionary();
@@ -1552,9 +1562,9 @@ function InputFilter() {
       setFinalFields([]);
       return;
     }
-    setFinalFields(availableFields.filter((field) => field.dictionaryId.includes(inputData)));
+    setFinalFields(availableFields.filter((field) => (field.label ?? getLabel(field.dictionaryId)).includes(inputData)));
     setSelectFieldIndex(-1);
-  }, [anchorEl, inputData, availableFields]);
+  }, [anchorEl, inputData, availableFields, getLabel]);
   const handleOpenPopUpClickItem = (field) => {
     closePopoverMenuFields();
     if (anchorEl)
@@ -1620,7 +1630,7 @@ function InputFilter() {
     }
   };
   if (isSkeleton) {
-    return /* @__PURE__ */ jsx(WrapperInputFilter, {
+    return /* @__PURE__ */ jsx(ContainerInputFilter, {
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
         width: "100%",
@@ -1631,7 +1641,7 @@ function InputFilter() {
   if (!withAllField && availableFields.length == 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(WrapperInputFilter, {
+  return /* @__PURE__ */ jsxs(ContainerInputFilter, {
     className: classesContainerInputFilter,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getTestIdByClass("containerInputFilter")
@@ -1677,6 +1687,7 @@ const PopoverFilter = () => {
   let anchorEl;
   const popoverFilterData = useDynamicFilter((state) => state.popoverFilterData, shallow);
   const refPreviousPopoverFilterData = useRef(popoverFilterData);
+  const classesPopoverFilter = useDynamicFilter((state) => state.classes.popoverFilter, shallow);
   const classesPopoverFilterPapper = useDynamicFilter((state) => state.classes.popoverFilterPaper, shallow);
   const classesPopoverFilterHeader = useDynamicFilter((state) => state.classes.popoverFilterHeader, shallow);
   const {
@@ -1753,6 +1764,7 @@ const PopoverFilter = () => {
     hidePopoverFilter(false);
   };
   return /* @__PURE__ */ jsx(Popover, {
+    className: classesPopoverFilter,
     open: true,
     anchorEl,
     disableRestoreFocus: true,
@@ -1767,14 +1779,14 @@ const PopoverFilter = () => {
       horizontal: "left"
     },
     arrowType: "top-left",
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("popoverFilterPaper")
-    } : {},
     PaperProps: {
       className: classesPopoverFilterPapper,
       sx: {
         mt: "12px"
-      }
+      },
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getTestIdByClass("popoverFilterPaper")
+      } : {}
     },
     children: /* @__PURE__ */ jsxs(RHFormProvider, {
       onSubmit,
@@ -1786,7 +1798,7 @@ const PopoverFilter = () => {
         children: [field.urlIcon && /* @__PURE__ */ jsx(Icon, {
           src: field.urlIcon
         }), /* @__PURE__ */ jsx(TitleContainer, {
-          children: getLabel(field.dictionaryId)
+          children: field.label ?? getLabel(field.dictionaryId)
         })]
       }), /* @__PURE__ */ jsx(DataTypeComponent, {
         formFilter,
@@ -1805,17 +1817,17 @@ const InnerForHooks = () => {
   const classesContainerFistRow = useDynamicFilter((state) => state.classes.containerFistRow, shallow);
   const fields = useDynamicFilter((state) => state.fields, shallow);
   return /* @__PURE__ */ jsx(DynamicFilterRoot, {
-    "data-testid": "DynamicFilter",
     className: classesRoot,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_FIELDS]: fields
+      [TEST_PROP_FIELDS]: fields,
+      "data-testid": "DynamicFilter"
     } : {},
     children: !isMobile ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+      children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsx(ClearFiltersButton, {})]
     }) : /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
         className: classesContainerFistRow,
-        children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+        children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFiltersButton, {})]
       }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {})]
     })
   });
@@ -1836,6 +1848,5 @@ export {
   DYNAMICFILTER_DICTIONARY_ID as a,
   DICCTIONARY as b,
   getDynamicFilterDictionary as c,
-  defaultDynamicFilterDictionary as d,
   getDynamicFilterComponentsDictionary as g
 };

package/components/DynamicFilter/subcomponents/ApplyedFilters/index.d.ts

@@ -1 +1,6 @@
+/**
+ * @description Subcomponente que muestra los filtros actualmente Aplicados,
+ * Alguno(s) pueden estar en estado Invalido, debido a que puede(n) ser obligatorios y no se han establecido.
+ * @returns
+ */
 export declare function ApplyedFilters(): JSX.Element;

package/components/DynamicFilter/subcomponents/ClearFilters/index.d.ts

@@ -1 +1 @@
-export declare const ClearFilters: () => JSX.Element | null;
+export declare const ClearFiltersButton: () => JSX.Element | null;