@m4l/components 0.2.35 → 1.0.0

package/components/DynamicFilter/index.d9168c12.js

@@ -0,0 +1,2012 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
+import { useMemo, useContext, createContext, useRef, useEffect, useState, useCallback } from "react";
+import { useStore, createStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import * as Yup from "yup";
+import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../areas/dictionary.7e74022a.js";
+import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, b as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, c as SELECT_OPERATORS, A as ALL_FIELD, d as DYNAMIC_FILTER_KEY_COMPONENT } from "../areas/constants.5387d83e.js";
+import { R as RHFAutocomplete, a as RHFTextField, b as RHFDateTime, c as RHFAutocompleteAsync, P as Popover, T as Typography, d as Actions, e as ActionCancel, f as ActionIntro } from "../../vendor.a1ce6777.js";
+import { useFormContext, useWatch } from "react-hook-form";
+import { i as isValidDate, c as containerQuery } from "../../utils/index.9ee4c99a.js";
+import { styled } from "@mui/material/styles";
+import { Skeleton, alpha, MenuItem } from "@mui/material";
+import { I as Icon, a as IconButton } from "../Icon/index.d5fed418.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.aee44365.js";
+import { S as ScrollBar } from "../ScrollBar/index.adf0eade.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.dc955a09.js";
+function BooleanFilter() {
+  const { getLabel } = useModuleDictionary();
+  const operators = useMemo(
+    () => BOOLEAN_OPERATORS.map((o) => ({
+      id: o,
+      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+    })),
+    [getLabel]
+  );
+  const optionsYesNo = useMemo(
+    () => [
+      {
+        value: true,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.operand_true))
+      },
+      {
+        value: false,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.operand_false))
+      }
+    ],
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        name: "formValueOperator",
+        autoComplete: "off",
+        options: operators,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.id === value.id,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_boolean_operator))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        name: "formValueOperand1",
+        autoComplete: "off",
+        options: optionsYesNo,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_boolean_operand1))
+      }
+    )
+  ] });
+}
+class BooleanFilterHelpers {
+  getComponent() {
+    return BooleanFilter;
+  }
+  getDefaultFilter(field, fixed) {
+    const defaultOperand1 = field.defaultOperand1;
+    const defaultFilter = {
+      id: 0,
+      fieldType: "boolean",
+      field,
+      fixed,
+      isSet: true,
+      operator: "e",
+      operand1: true
+    };
+    if (defaultOperand1 !== void 0 && typeof defaultOperand1 === "boolean") {
+      defaultFilter.operand1 = defaultOperand1;
+    }
+    return defaultFilter;
+  }
+  getFilterFromFormValue(formFilterValue) {
+    const operator = formFilterValue.formValueOperator.id;
+    const operand1 = formFilterValue.formValueOperand1?.value || false;
+    return {
+      fieldType: "boolean",
+      operator,
+      operand1
+    };
+  }
+  getFormValue(field, getLabel, filterValue) {
+    const filterValueBoolean = filterValue ? filterValue : void 0;
+    const operator = filterValueBoolean ? filterValueBoolean.operator : field.defaultOperator ?? "e";
+    const formValueOperand1 = filterValueBoolean ? {
+      value: filterValueBoolean.operand1,
+      label: getLabel(getDynamicFilterDictionary(`operand_${filterValueBoolean.operand1}`))
+    } : null;
+    return {
+      fieldType: "boolean",
+      formValueOperator: {
+        id: operator,
+        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+      },
+      formValueOperand1
+    };
+  }
+  getLabels(filter, getLabel, _formatters, _field) {
+    const labelOperands = filter.operand1 ? getLabel(getDynamicFilterDictionary("operand_true")) : getLabel(getDynamicFilterDictionary("operand_false"));
+    return {
+      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
+      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+      labelOperands
+    };
+  }
+  getSchema(getLabel) {
+    return Yup.object({
+      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
+      formValueOperand1: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operand_required`))
+    });
+  }
+  verifyFilter(filter, _field) {
+    if (typeof filter.operator !== "string") {
+      return false;
+    }
+    if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+      return false;
+    }
+    return typeof filter.operand1 === "boolean";
+  }
+}
+function StringFilter() {
+  const { getLabel } = useModuleDictionary();
+  const operators = useMemo(
+    () => STRING_OPERATORS.map((o) => ({
+      id: o,
+      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+    })),
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        name: "formValueOperator",
+        autoComplete: "off",
+        options: operators,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.id === value.id,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_string))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "formValueOperand1",
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_string))
+      }
+    )
+  ] });
+}
+class StringFilterHelpers {
+  getComponent() {
+    return StringFilter;
+  }
+  getDefaultFilter(field, fixed) {
+    const defaultOperand1 = field.defaultOperand1;
+    const defaultFilter = {
+      id: 0,
+      fieldType: "string",
+      field,
+      fixed,
+      isSet: false,
+      operator: "c",
+      operand1: ""
+    };
+    if (defaultOperand1 !== void 0 && typeof defaultOperand1 === "string") {
+      defaultFilter.operand1 = defaultOperand1;
+    }
+    return defaultFilter;
+  }
+  getFilterFromFormValue(formFilterValue) {
+    const operator = formFilterValue.formValueOperator.id;
+    const operand1 = formFilterValue.formValueOperand1;
+    return {
+      fieldType: "string",
+      operator,
+      operand1
+    };
+  }
+  getFormValue(field, getLabel, filterValue) {
+    const filterValueString = filterValue;
+    const operator = filterValueString ? filterValueString.operator : field.defaultOperator ?? "c";
+    const formValueOperand1 = filterValueString ? filterValueString.operand1 : "";
+    return {
+      fieldType: "string",
+      formValueOperator: {
+        id: operator,
+        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+      },
+      formValueOperand1
+    };
+  }
+  getLabels(filter, getLabel, _formatters, _field) {
+    const labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
+    return {
+      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
+      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+      labelOperands
+    };
+  }
+  getSchema(getLabel) {
+    return Yup.object({
+      formValueOperator: Yup.object().nullable().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.operator_required))),
+      formValueOperand1: Yup.string().required(
+        getLabel(getDynamicFilterDictionary(DICCTIONARY.error_operand_required))
+      )
+    });
+  }
+  verifyFilter(filter, _field) {
+    if (typeof filter.operator !== "string") {
+      return false;
+    }
+    if (STRING_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+      return false;
+    }
+    if (typeof filter.operand1 !== "string") {
+      return false;
+    }
+    return true;
+  }
+}
+function DateTimeFilter() {
+  const { getLabel } = useModuleDictionary();
+  const { control } = useFormContext();
+  const operator = useWatch({
+    control,
+    name: "formValueOperator"
+  });
+  const operators = useMemo(
+    () => DATE_TIME_OPERATORS.map((o) => ({
+      id: o,
+      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+    })),
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        name: "formValueOperator",
+        autoComplete: "off",
+        options: operators,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.id === value.id,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_date_time))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFDateTime,
+      {
+        name: "formValueOperand1",
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_date_time))
+      }
+    ),
+    operator && operator.id === "b" && /* @__PURE__ */ jsx(
+      RHFDateTime,
+      {
+        name: "formValueOperand2",
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand2_date_time))
+      }
+    )
+  ] });
+}
+class DateTimeFilterHelpers {
+  getComponent() {
+    return DateTimeFilter;
+  }
+  getDefaultFilter(field, fixed) {
+    const defaultStartDate = new Date();
+    const defaultEndDate = new Date();
+    defaultStartDate.setHours(0, 0, 0, 0);
+    defaultEndDate.setHours(23, 59, 59, 999);
+    const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
+    const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
+    return {
+      id: 0,
+      fieldType: "datetime",
+      field,
+      fixed,
+      isSet: true,
+      operator: "b",
+      operand1: defaultOperand1,
+      operand2: defaultOperand2
+    };
+  }
+  getFormValue(field, getLabel, filterValueDateTime) {
+    const filterValue = filterValueDateTime;
+    const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "b";
+    const defaultStartDate = new Date();
+    const defaultEndDate = new Date();
+    const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
+    const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
+    const formValueOperand1 = filterValue ? filterValue.operand1 : defaultOperand1;
+    const formValueOperand2 = filterValue && filterValue.operator === "b" ? filterValue.operand2 : defaultOperand2;
+    return {
+      fieldType: "datetime",
+      formValueOperator: {
+        id: operator,
+        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+      },
+      formValueOperand1,
+      formValueOperand2
+    };
+  }
+  getFilterFromFormValue(formFilterValue) {
+    const operator = formFilterValue.formValueOperator.id;
+    const operand1 = formFilterValue.formValueOperand1;
+    if (operator === "b") {
+      const operand2 = formFilterValue.formValueOperand2;
+      return {
+        fieldType: "datetime",
+        operator,
+        operand1,
+        operand2
+      };
+    } else {
+      return {
+        fieldType: "datetime",
+        operator,
+        operand1
+      };
+    }
+  }
+  getLabels(filter, getLabel, formatters, _field) {
+    const { dateFormatter } = formatters;
+    let labelOperands;
+    if (filter.operator === "b") {
+      labelOperands = filter.operand1 && filter.operand2 ? `${dateFormatter.formatDate(
+        filter.operand1,
+        dateFormatter.datetimeFormat
+      )} - ${dateFormatter.formatDate(filter.operand2, dateFormatter.datetimeFormat)}` : "";
+    } else {
+      labelOperands = filter.operand1 ? dateFormatter.formatDate(filter.operand1, dateFormatter.datetimeFormat) : "";
+    }
+    return {
+      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
+      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+      labelOperands
+    };
+  }
+  getSchema(getLabel) {
+    return Yup.object({
+      formValueOperator: Yup.object().nullable().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.operator_required))),
+      formValueOperand1: Yup.date().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))).typeError(getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))),
+      formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
+        is: "b",
+        then: Yup.date().typeError(getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))).min(
+          Yup.ref("formValueOperand1"),
+          getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))
+        )
+      })
+    });
+  }
+  verifyFilter(filter, _field) {
+    if (typeof filter.operator !== "string") {
+      return false;
+    }
+    if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+      return false;
+    }
+    if (typeof filter.operand1 !== "string") {
+      return false;
+    }
+    if (!isValidDate(new Date(filter.operand1))) {
+      return false;
+    }
+    if (filter.operator === "b") {
+      if (typeof filter.operand2 !== "string") {
+        return false;
+      }
+      if (!isValidDate(new Date(filter.operand1))) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+function NumberFilter() {
+  const { getLabel } = useModuleDictionary();
+  const { control } = useFormContext();
+  const operator = useWatch({
+    control,
+    name: "formValueOperator"
+  });
+  const operators = useMemo(
+    () => NUMBER_OPERATORS.map((o) => ({
+      id: o,
+      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+    })),
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        name: "formValueOperator",
+        autoComplete: "off",
+        options: operators,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, value) => option.id === value.id,
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_number))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "formValueOperand1",
+        type: "number",
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_number))
+      }
+    ),
+    operator && operator.id === "b" && /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "formValueOperand2",
+        type: "number",
+        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand2_number))
+      }
+    )
+  ] });
+}
+class NumberFilterHelpers {
+  getComponent() {
+    return NumberFilter;
+  }
+  getDefaultFilter(fieldNumber, fixed) {
+    const field = fieldNumber;
+    const dOperator = field.defaultOperator ?? "e";
+    const defaultOperand1 = field.defaultOperand1 ?? null;
+    const defaultOperand2 = field.defaultOperand2 ?? null;
+    return {
+      id: 0,
+      fieldType: "number",
+      field,
+      fixed,
+      isSet: false,
+      operator: dOperator,
+      operand1: defaultOperand1,
+      operand2: defaultOperand2
+    };
+  }
+  getFormValue(field, getLabel, filterValue) {
+    const filterValueNumber = filterValue;
+    const operator = filterValueNumber ? filterValueNumber.operator : field.defaultOperator ?? "e";
+    const formValueOperand1 = filterValueNumber ? filterValueNumber.operand1 : null;
+    const formValueOperand2 = filterValueNumber && filterValueNumber?.operator === "b" ? filterValueNumber.operand2 : null;
+    return {
+      fieldType: "number",
+      formValueOperator: {
+        id: operator,
+        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+      },
+      formValueOperand1,
+      formValueOperand2
+    };
+  }
+  getFilterFromFormValue(formFilterValue) {
+    const operator = formFilterValue.formValueOperator.id;
+    const operand1 = formFilterValue.formValueOperand1 ? formFilterValue.formValueOperand1 : 0;
+    if (operator === "b") {
+      const operand2 = formFilterValue.formValueOperand2 ? formFilterValue.formValueOperand2 : 0;
+      return {
+        fieldType: "number",
+        operator,
+        operand1,
+        operand2
+      };
+    } else {
+      return {
+        fieldType: "number",
+        operator,
+        operand1
+      };
+    }
+  }
+  getLabels(filter, getLabel, _formatters, _field) {
+    let labelOperands;
+    if (filter.operator === "b") {
+      labelOperands = filter.operand1 && filter.operand2 ? `${filter.operand1} - ${filter.operand2}` : "";
+    } else {
+      labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
+    }
+    return {
+      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
+      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+      labelOperands
+    };
+  }
+  getSchema(getLabel) {
+    return Yup.object({
+      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
+      formValueOperand1: Yup.number().typeError(
+        getLabel(`dynamic_filter.error_operand_mustbe_number`)
+      ),
+      formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
+        is: "b",
+        then: Yup.number().typeError(getLabel(`dynamic_filter.error_operand_mustbe_number`)).min(Yup.ref("formValueOperand1"), getLabel(`dynamic_filter.error_less_than_start`))
+      })
+    });
+  }
+  verifyFilter(filter, _field) {
+    if (typeof filter.operator !== "number") {
+      return false;
+    }
+    if (NUMBER_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+      return false;
+    }
+    if (typeof filter.operand1 !== "number") {
+      return false;
+    }
+    if (filter.operator === "b" && typeof filter.operand2 !== "number") {
+      return false;
+    }
+    return true;
+  }
+}
+function useDynamicFilterStore(selector, equalityFn) {
+  const store = useContext(DynamicFilterContext);
+  if (!store)
+    throw new Error("useDynamicFilterStore context must be use inside DynamicFilterContext");
+  return useStore(store, selector, equalityFn ?? shallow);
+}
+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\xF3n del Endpoint");
+  }
+  const autocompleteProps = field?.selectOptions;
+  const operators = useMemo(
+    () => SELECT_OPERATORS.map((o) => ({
+      id: o,
+      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+    })),
+    [getLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocomplete,
+      {
+        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))
+      }
+    )
+  ] });
+}
+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);
+  });
+}
+class SelectFilterHelpers {
+  getComponent() {
+    return SelectFilter;
+  }
+  getDefaultFilter(field, fixed) {
+    const defaultOperand = field.defaultOperandsArray;
+    const defaultFilter = {
+      id: 0,
+      fieldType: "select",
+      field,
+      fixed,
+      isSet: true,
+      operator: "in",
+      operandsArray: []
+    };
+    if (defaultOperand !== void 0 && Array.isArray(defaultOperand)) {
+      const validOperandsArray = filterValidOperandsArraySelect(defaultOperand, field);
+      defaultFilter.operandsArray = validOperandsArray || [];
+    }
+    return defaultFilter;
+  }
+  getFormValue(field, getLabel, filterValueSelect) {
+    const filterValue = filterValueSelect ? filterValueSelect : void 0;
+    const isMultiple = field?.selectOptions?.multiple ?? false;
+    const formValueOperandsArray = isMultiple ? filterValueSelect?.operandsArray : filterValueSelect?.operandsArray?.[0] || filterValueSelect?.operandsArray;
+    const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "in";
+    return {
+      fieldType: "select",
+      formValueOperator: {
+        id: operator,
+        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+      },
+      formValueOperandsArray
+    };
+  }
+  getFilterFromFormValue(formFilterValue) {
+    const operator = formFilterValue.formValueOperator.id;
+    const operandsArray = Array.isArray(formFilterValue.formValueOperandsArray) ? formFilterValue.formValueOperandsArray : [formFilterValue.formValueOperandsArray];
+    return {
+      fieldType: "select",
+      operator,
+      operandsArray
+    };
+  }
+  getLabels(filter, getLabel, _formatters, field) {
+    const operandsArray = filter.operandsArray;
+    const labelOperands = operandsArray?.reduce?.((label, operand) => {
+      const textLabel = field.selectOptions?.getOptionLabel?.(operand) || "";
+      return label ? `${label} | ${textLabel}` : textLabel;
+    }, "")?.toString() || "";
+    return {
+      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
+      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+      labelOperands
+    };
+  }
+  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`));
+      })
+    });
+  }
+  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 = filterValidOperandsArraySelect(
+      filter.operandsArray,
+      field
+    );
+    if (!validOperandsArray || validOperandsArray?.length === 0) {
+      return false;
+    }
+    return true;
+  }
+}
+const helpersStrategies = {
+  boolean: new BooleanFilterHelpers(),
+  string: new StringFilterHelpers(),
+  number: new NumberFilterHelpers(),
+  datetime: new DateTimeFilterHelpers(),
+  select: new SelectFilterHelpers(),
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+function fieldFactory(type) {
+  const selectedHelper = helpersStrategies?.[type];
+  if (!selectedHelper) {
+    return helpersStrategies.__default__();
+  }
+  return selectedHelper;
+}
+function getPurgedInitialFiltersApplied(fields, initialFilters, getFieldByName) {
+  const newFilters = [];
+  const fixedFields = [];
+  for (let index = 0; index < initialFilters.length; index++) {
+    try {
+      const initialFilter = initialFilters[index];
+      const field = getFieldByName(initialFilter.name);
+      const filter = {
+        id: 0,
+        isSet: true,
+        fixed: false,
+        field,
+        fieldType: field.type,
+        operator: initialFilters[index].operator,
+        operand1: initialFilters[index].operand1,
+        operand2: initialFilters[index].operand2,
+        operandsArray: initialFilters[index].operandsArray
+      };
+      if (!field)
+        continue;
+      const canAddField = fieldFactory(field.type).verifyFilter(initialFilter, field);
+      if (canAddField) {
+        if (filter.fieldType === "datetime") {
+          filter.operand1 = new Date(filter.operand1 + "");
+          filter.operand2 = new Date(filter.operand2 + "");
+        }
+        if (field.presence === "fixed") {
+          if (fixedFields.findIndex((f) => f === field.name) === -1) {
+            filter.fixed = true;
+            fixedFields.push(field.name);
+          } else {
+            filter.fixed = false;
+          }
+        }
+        filter.isSet = true;
+        filter.id = newFilters.length + 1;
+        newFilters.push(filter);
+      }
+    } catch (error) {
+    }
+  }
+  for (let index = 0; index < fields.length; index++) {
+    const field = fields[index];
+    if (field.presence === "initialized" || field.presence === "fixed") {
+      if (!initialFilters.find((f) => f.name === field.name)) {
+        const newFilter = fieldFactory(field.type).getDefaultFilter(
+          field,
+          field.presence === "fixed"
+        );
+        newFilter.id = newFilters.length + 1;
+        newFilters.push(newFilter);
+      }
+    }
+  }
+  return newFilters;
+}
+function updateAvailableFields(state) {
+  state.availableFields = state.fields.filter((field) => {
+    if (field.multiple === void 0 || field.multiple) {
+      return true;
+    }
+    const appliedFilterNames = new Set(state.appliedFilters.map((f) => f.field.name));
+    return !appliedFilterNames.has(field.name);
+  });
+}
+function updateOwnerStateIsValid(state) {
+  state.ownerState.isValid = state.appliedFilters.every((filter) => filter.isSet);
+}
+const updateAutomatic = (state) => {
+  updateOwnerStateIsValid(state);
+  updateAvailableFields(state);
+  if (state.ownerState.isValid && state.automatic) {
+    state.ownerState.isDirty = false;
+    state.countOnChangeFiltersApplied++;
+  }
+};
+const createAreaStore = (initProps) => {
+  const startProps = {
+    countOnChangeFiltersApplied: 0,
+    appliedFilters: [],
+    availableFields: [],
+    fnAnchorEl: void 0,
+    popoverFilterData: void 0,
+    inputData: "",
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        actions: {
+          init: (initialFiltersApplied) => {
+            set((state) => {
+              state.appliedFilters = getPurgedInitialFiltersApplied(
+                state.fields,
+                initialFiltersApplied,
+                state.actions.getFieldByName
+              );
+              state.ownerState.isEmpty = state.appliedFilters.length <= 0;
+              updateAutomatic(state);
+            });
+          },
+          getFieldByName: (name) => {
+            const field = (get().withAllField ? get().fields.concat(get().allField) : get().fields).find((f) => {
+              return f.name === name;
+            });
+            if (field) {
+              return field;
+            }
+            throw new Error("No exist field");
+          },
+          removeFilter: (id) => {
+            set((state) => {
+              const indexToRemoved = state.appliedFilters.findIndex((f) => id === f.id && !f.fixed);
+              if (indexToRemoved > -1) {
+                state.appliedFilters.splice(indexToRemoved, 1);
+                state.ownerState.isEmpty = state.appliedFilters.length === 0;
+                updateAutomatic(state);
+              }
+            });
+          },
+          showPopoverFilterForAdd: (anchorEl, field) => {
+            set((state) => {
+              state.fnAnchorEl = void 0;
+              state.inputData = "";
+              state.popoverFilterData = {
+                openFor: "add",
+                fnAnchorEl: () => anchorEl,
+                field
+              };
+            });
+            get().actions.setInEdition(true);
+          },
+          showPopoverFilterForEdit: (anchorEl, filterToEdit) => {
+            set((state) => {
+              state.popoverFilterData = {
+                openFor: "edit",
+                fnAnchorEl: () => anchorEl,
+                filter: filterToEdit,
+                field: filterToEdit.field
+              };
+            });
+            get().actions.setInEdition(true);
+          },
+          hidePopoverFilter: (stayInEdition) => {
+            set((state) => {
+              state.popoverFilterData = void 0;
+            });
+            get().actions.setInEdition(stayInEdition);
+          },
+          clearFilters: () => {
+            set((state) => {
+              state.appliedFilters = state.appliedFilters.filter((f) => f.fixed);
+              state.ownerState.isEmpty = state.appliedFilters.length === 0;
+              updateAvailableFields(state);
+            });
+          },
+          fireOnChangeFilters: () => {
+            set((state) => {
+              if (state.ownerState.isValid) {
+                state.ownerState.isDirty = false;
+                state.countOnChangeFiltersApplied++;
+              }
+            });
+          },
+          getNewId: () => {
+            return get().appliedFilters.reduce((prev, filterField) => {
+              return filterField.id > prev ? filterField.id : prev;
+            }, 0) + 1;
+          },
+          addFilter: (newFilter) => {
+            set((state) => {
+              state.appliedFilters.push(newFilter);
+              state.ownerState.isEmpty = state.appliedFilters.length === 0;
+              updateAutomatic(state);
+            });
+          },
+          updateFilter: (editFilter) => {
+            set((state) => {
+              const index = state.appliedFilters.findIndex(
+                (filterField) => filterField.id === editFilter.id
+              );
+              if (index > -1) {
+                state.appliedFilters[index] = editFilter;
+              }
+              updateAutomatic(state);
+            });
+          },
+          setInputData: (inputData) => {
+            set((state) => {
+              state.inputData = inputData;
+            });
+          },
+          setInEdition: (newInEdition) => {
+            set((state) => {
+              state.ownerState.inEdition = newInEdition;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+            });
+          },
+          openPopoverMenuFields: (anchorEl) => {
+            set((state) => {
+              state.fnAnchorEl = () => anchorEl;
+            });
+          },
+          closePopoverMenuFields: (newInEdition) => {
+            set((state) => {
+              state.fnAnchorEl = void 0;
+              state.ownerState.inEdition = newInEdition || false;
+            });
+          }
+        }
+      })),
+      { name: `Dynamic filter` }
+    )
+  );
+};
+const formatToRawFilter = (appliedFilters) => {
+  return appliedFilters.map((af) => {
+    let oa = void 0;
+    if (af.field.type === "select" && af.operandsArray) {
+      oa = Array.isArray(af.operandsArray) ? af.operandsArray.map(af.field.selectOptions.getOptionId) : [af.field.selectOptions.getOptionId(af.operandsArray)];
+    }
+    return {
+      n: af.field.name,
+      o: af.operator,
+      o1: af.operand1,
+      o2: af.operator === "b" ? af.operand2 : void 0,
+      oa
+    };
+  });
+};
+function formatToInitialFilters(appliedFilters) {
+  return appliedFilters.map((appliedFilter) => {
+    const ret = {
+      name: appliedFilter.field.name,
+      operator: appliedFilter.operator,
+      operand1: appliedFilter.operand1,
+      operand2: appliedFilter.operator === "b" ? appliedFilter.operand2 : void 0
+    };
+    if (appliedFilter.fieldType === "datetime") {
+      ret.operand1 = appliedFilter.operand1.toISOString();
+      ret.operand2 = appliedFilter.operator === "b" ? appliedFilter.operand2.toISOString() : void 0;
+    }
+    if (appliedFilter.fieldType === "select") {
+      const validOperandsArray = filterValidOperandsArraySelect(
+        appliedFilter.operandsArray,
+        appliedFilter.field
+      );
+      if (validOperandsArray && validOperandsArray?.length > 0) {
+        ret.operandsArray = validOperandsArray;
+      }
+    }
+    if (ret.operand2 === void 0) {
+      delete ret.operand2;
+    }
+    return ret;
+  });
+}
+const DynamicFilterContext = createContext(null);
+function DynamicFilterProvider(props) {
+  const {
+    automatic = true,
+    withAllField = true,
+    fields,
+    initialAppliedFilters = [],
+    onChangeFilters,
+    dataTestId = "",
+    children
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const dynamicFilterStoreRef = useRef();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
+  if (!dynamicFilterStoreRef.current) {
+    dynamicFilterStoreRef.current = createAreaStore({
+      allField: {
+        ...ALL_FIELD,
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
+      },
+      withAllField,
+      fields,
+      automatic,
+      getLabel,
+      dataTestId,
+      ownerState: {
+        isSkeleton,
+        isDirty: !automatic,
+        inEdition: false,
+        isValid: true,
+        isMobile: !isDesktop,
+        isEmpty: true
+      }
+    });
+    dynamicFilterStoreRef.current.getState().actions.init(initialAppliedFilters);
+  }
+  const countOnChangeFiltersApplied = useStore(
+    dynamicFilterStoreRef.current,
+    (state) => state.countOnChangeFiltersApplied,
+    shallow
+  );
+  useEffect(() => {
+    if (countOnChangeFiltersApplied === 0) {
+      return;
+    }
+    const state = dynamicFilterStoreRef.current?.getState();
+    if (state) {
+      onChangeFilters?.(
+        formatToInitialFilters(state.appliedFilters),
+        formatToRawFilter(state.appliedFilters)
+      );
+    }
+  }, [countOnChangeFiltersApplied]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    dynamicFilterStoreRef.current?.getState().actions.setExternalState({ isMobile: !isDesktop, isSkeleton });
+  }, [isDesktop, isSkeleton]);
+  useEffect(() => {
+    if (automatic) {
+      dynamicFilterStoreRef.current?.getState().actions.fireOnChangeFilters();
+      return;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(DynamicFilterContext.Provider, { value: dynamicFilterStoreRef.current, children });
+}
+function useDynamicFilterBase() {
+  const ownerState = useDynamicFilterStore((state) => state.ownerState);
+  const dataTestId = useDynamicFilterStore((state) => state.dataTestId);
+  return { ownerState, dataTestId };
+}
+function useInputFilter() {
+  const [selectedFieldIndex, setSelectedFieldIndex] = useState(-1);
+  const [filteredFields, setFilteredFields] = useState([]);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const anchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
+  const withAllField = useDynamicFilterStore((state) => state.withAllField);
+  const availableFields = useDynamicFilterStore((state) => state.availableFields);
+  const inputData = useDynamicFilterStore((state) => state.inputData);
+  const {
+    addFilter,
+    closePopoverMenuFields,
+    getFieldByName,
+    getNewId,
+    hidePopoverFilter,
+    openPopoverMenuFields,
+    setInEdition,
+    setInputData,
+    showPopoverFilterForAdd
+  } = useDynamicFilterStore((state) => state.actions);
+  useEffect(() => {
+    if (!anchorEl) {
+      setFilteredFields([]);
+    } else {
+      setFilteredFields(
+        availableFields.filter(
+          (field) => (field.label ?? getLabel(field.dictionaryId)).includes(inputData)
+        )
+      );
+      setSelectedFieldIndex(-1);
+    }
+  }, [anchorEl, inputData, availableFields, getLabel]);
+  function handleOpenPopUpClickItem(field) {
+    closePopoverMenuFields();
+    if (anchorEl)
+      showPopoverFilterForAdd(anchorEl(), field);
+  }
+  const inputHandlersProps = {
+    onFocus: (event) => {
+      openPopoverMenuFields(event.currentTarget);
+      setInEdition(true);
+    },
+    onChange: (event) => {
+      setInputData(event.target.value);
+      if (!anchorEl) {
+        openPopoverMenuFields(event.currentTarget);
+      }
+      hidePopoverFilter(true);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "ArrowDown") {
+        let newIndex = -1;
+        if (filteredFields.length > 0) {
+          if (selectedFieldIndex < filteredFields.length - 1) {
+            newIndex = selectedFieldIndex + 1;
+          } else {
+            newIndex = filteredFields.length - 1;
+          }
+        }
+        setSelectedFieldIndex(newIndex);
+      }
+      if (event.key === "ArrowUp") {
+        let newIndex = -1;
+        if (filteredFields.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;
+        }
+        if (withAllField) {
+          addFilter({
+            id: getNewId(),
+            fieldType: "string",
+            field: getFieldByName(ALL_FIELD.name),
+            isSet: true,
+            fixed: false,
+            operator: "c",
+            operand1: inputData
+          });
+          setInputData("");
+          closePopoverMenuFields();
+        }
+      } else {
+        handleOpenPopUpClickItem(filteredFields[selectedFieldIndex]);
+      }
+    }
+  };
+  return {
+    iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/filter.svg`,
+    isSkeleton,
+    inputPlaceHolder: getLabel(getDynamicFilterDictionary(DICCTIONARY.input_placeholder)),
+    inputData,
+    inputHandlersProps,
+    canRender: !(!withAllField && availableFields.length === 0),
+    filteredFields,
+    selectedFieldIndex
+  };
+}
+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" } })
+  ] });
+}
+var DynamicFilterSlots = /* @__PURE__ */ ((DynamicFilterSlots2) => {
+  DynamicFilterSlots2["root"] = "root";
+  DynamicFilterSlots2["innerContainer"] = "innerContainer";
+  DynamicFilterSlots2["inputFilter"] = "inputFilter";
+  DynamicFilterSlots2["inputFilterInput"] = "inputFilterInput";
+  DynamicFilterSlots2["inputFilterIcon"] = "inputFilterIcon";
+  DynamicFilterSlots2["appliedFilters"] = "appliedFilters";
+  DynamicFilterSlots2["appliedFilterInnerContainer"] = "appliedFilterInnerContainer";
+  DynamicFilterSlots2["appliedFilterChip"] = "appliedFilterChip";
+  DynamicFilterSlots2["appliedFilterChipIcon"] = "appliedFilterChipIcon";
+  DynamicFilterSlots2["appliedFilterChipInfo"] = "appliedFilterChipInfo";
+  DynamicFilterSlots2["appliedFilterChipInfoFieldName"] = "appliedFilterChipInfoFieldName";
+  DynamicFilterSlots2["appliedFilterChipInfoOperator"] = "appliedFilterChipInfoOperator";
+  DynamicFilterSlots2["appliedFilterChipInfoOperands"] = "appliedFilterChipInfoOperands";
+  DynamicFilterSlots2["appliedFilterChipRemoveButton"] = "appliedFilterChipRemoveButton";
+  DynamicFilterSlots2["actions"] = "actions";
+  DynamicFilterSlots2["actionsSkeletonButton"] = "actionsSkeletonButton";
+  DynamicFilterSlots2["actionsClearButton"] = "actionsClearButton";
+  DynamicFilterSlots2["actionsSubmitButton"] = "actionsSubmitButton";
+  DynamicFilterSlots2["popoverMenu"] = "popoverMenu";
+  DynamicFilterSlots2["popoverMenuItem"] = "popoverMenuItem";
+  DynamicFilterSlots2["popoverMenuItemIcon"] = "popoverMenuItemIcon";
+  DynamicFilterSlots2["popoverMenuItemLabel"] = "popoverMenuItemLabel";
+  DynamicFilterSlots2["popoverFilter"] = "popoverFilter";
+  DynamicFilterSlots2["popoverFilterContainerFields"] = "popoverFilterContainerFields";
+  DynamicFilterSlots2["popoverFilterHeader"] = "popoverFilterHeader";
+  DynamicFilterSlots2["popoverFilterHeaderIcon"] = "popoverFilterHeaderIcon";
+  DynamicFilterSlots2["popoverFilterHeaderTitle"] = "popoverFilterHeaderTitle";
+  DynamicFilterSlots2["popoverFilterActions"] = "popoverFilterActions";
+  return DynamicFilterSlots2;
+})(DynamicFilterSlots || {});
+const CONTAINER_QUERY_NAME = "dynamic";
+const dynamicFilterStyles = {
+  root: {
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    width: "100%",
+    height: "auto",
+    padding: 0
+  },
+  innerContainer: ({ theme, ownerState }) => ({
+    display: "grid",
+    gridTemplateColumns: "auto 1fr auto",
+    gridTemplateAreas: '"input-filter applied-filters actions-filter"',
+    alignItems: "center",
+    justifyContent: "flex-start",
+    width: "100%",
+    height: "fit-content",
+    border: "1px solid",
+    borderRadius: "4px",
+    borderColor: theme.vars.palette.state?.borderPrimary,
+    background: theme.vars.palette.background.default,
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      minHeight: "auto",
+      height: "auto",
+      gridTemplateColumns: "1fr auto",
+      gridTemplateAreas: `"input-filter  actions-filter"
+                          "applied-filters applied-filters"`
+    },
+    "&:focus-within": {
+      borderColor: !ownerState.isValid ? theme.vars.palette.state.error.normal : theme.vars.palette.state?.focus
+    },
+    ...ownerState.isValid === false ? {
+      borderColor: theme.palette.state.error.normal
+    } : {}
+  }),
+  inputFilter: ({ theme }) => ({
+    gridArea: "input-filter",
+    display: "flex",
+    flexDirection: "row",
+    gap: "8px",
+    padding: "4px 6px 4px 4px",
+    height: "100%",
+    maxWidth: "135px",
+    width: "100%",
+    alignItems: "center",
+    borderTopLeftRadius: "4px",
+    borderBottomLeftRadius: "4px",
+    borderRight: "1px solid",
+    borderColor: theme.vars.palette.state?.borderPrimary,
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      height: "32px",
+      width: "100%",
+      maxWidth: "100%",
+      borderRight: "none"
+    },
+    [theme.breakpoints.down("sm")]: {
+      height: "44px",
+      justifyContent: "center"
+    }
+  }),
+  inputFilterInput: ({ theme }) => ({
+    ...theme.typography.body,
+    background: theme.vars.palette.background.default,
+    color: theme.vars.palette.text.secondary,
+    border: "1px solid",
+    borderColor: "transparent",
+    padding: "4px 8px",
+    width: "100%",
+    height: "100%",
+    "&::placeholder": {
+      color: theme.vars.palette.text.secondary
+    },
+    "&:focus-visible": {
+      color: theme.vars.palette.text.secondary,
+      border: "1px solid",
+      borderColor: theme.vars.palette.state?.active12,
+      background: theme.vars.palette.state?.active12,
+      BorderRadius: "2px",
+      outline: "none!important"
+    },
+    "&:hover": {
+      borderColor: theme.vars.palette.state?.toneOp,
+      background: theme.vars.palette.state?.hoverDefault
+    }
+  }),
+  inputFilterIcon: {},
+  appliedFilters: ({ theme }) => ({
+    gridArea: "applied-filters",
+    width: "100%",
+    height: "fit-content",
+    paddingLeft: theme.spacing(1),
+    borderLeft: "none",
+    margin: "0px",
+    padding: "0px 4px",
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      height: "auto",
+      padding: "4px",
+      display: "flex",
+      borderTop: "1px solid ",
+      borderColor: theme.vars.palette.state?.borderSecondary,
+      "&:has(div[class*=appliedFilterInnerContainer]:empty), &:empty": {
+        display: "none"
+      }
+    }
+  }),
+  appliedFilterInnerContainer: ({ theme }) => ({
+    padding: "2px",
+    gap: "4px",
+    height: "fit-content",
+    display: "flex",
+    flexWrap: "nowrap",
+    width: "100%",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      height: "32px",
+      padding: 0,
+      margin: 0,
+      border: 0
+    },
+    [theme.breakpoints.down("sm")]: {
+      padding: 0,
+      height: "44px"
+    }
+  }),
+  appliedFilterChip: ({ theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "visible",
+    width: "auto",
+    height: "24px",
+    minHeight: theme.spacing(3),
+    paddingLeft: theme.spacing(1),
+    borderColor: alpha(`${theme.palette.divider}`, 0.1),
+    border: "none",
+    borderRadius: "4px",
+    backgroundColor: theme.palette.state?.default,
+    color: theme.palette.text.secondary,
+    ...theme.typography.body,
+    [theme.breakpoints.down("sm")]: {
+      height: "fit-content"
+    }
+  }),
+  appliedFilterChipIcon: {},
+  appliedFilterChipInfo: ({ theme }) => ({
+    ...theme.typography.body2,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "auto",
+    height: "100%",
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    whiteSpace: "nowrap",
+    border: "none",
+    backgroundColor: "transparent"
+  }),
+  appliedFilterChipInfoFieldName: ({ theme }) => ({
+    ...theme.typography.subtitle2,
+    color: theme.palette.text.secondary
+  }),
+  appliedFilterChipInfoOperator: ({ theme }) => ({
+    ...theme.typography.body2,
+    marginLeft: theme.spacing(1.5),
+    fontStyle: "italic",
+    color: theme.palette.text.secondary
+  }),
+  appliedFilterChipInfoOperands: ({ theme }) => ({
+    ...theme.typography.body2,
+    marginLeft: theme.spacing(1.5),
+    color: theme.palette.text.secondary
+  }),
+  appliedFilterChipRemoveButton: {},
+  actions: ({ theme }) => ({
+    gridArea: "actions-filter",
+    display: "flex",
+    flexDirection: "row",
+    gap: "8px",
+    padding: "4px",
+    height: "100%",
+    alignItems: "center",
+    borderTopRightRadius: "4px",
+    borderBottomRightRadius: "4px",
+    borderLeft: "1px solid",
+    borderColor: theme.palette.state?.borderPrimary
+  }),
+  actionsSkeletonButton: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "24px",
+    height: "24px"
+  },
+  actionsClearButton: {},
+  actionsSubmitButton: ({ theme, ownerState }) => ({
+    ...ownerState.isValid === false ? { border: `1px dashed ${theme.palette.error.main}` } : {}
+  }),
+  popoverMenu: ({ theme }) => ({
+    "& .MuiPaper-root": {
+      display: "flex",
+      flexDirection: "column",
+      padding: "8px !important",
+      gap: "4px",
+      borderRadius: "6px",
+      [theme.breakpoints.down("md")]: {
+        gap: "4px"
+      },
+      "& .M4LPopover-arrowStyle": {
+        display: "none"
+      }
+    }
+  }),
+  popoverMenuItem: ({ theme }) => ({
+    paddingLeft: "4px",
+    paddingRight: "4px",
+    borderRadius: "4px",
+    "&:hover": {
+      ...theme.typography.body,
+      color: theme.palette.state?.hover,
+      background: theme.palette.state?.default,
+      borderRadius: "4px",
+      padding: "4px 12px 4px 8px"
+    }
+  }),
+  popoverMenuItemLabel: ({ theme }) => ({
+    ...theme.typography.body,
+    color: theme.palette.text.primary
+  }),
+  popoverMenuItemIcon: {},
+  popoverFilter: ({ theme }) => ({
+    width: "auto",
+    "& .MuiPaper-root": {
+      padding: "0 !important",
+      minWidth: "220px",
+      maxWidth: "100%",
+      minHeight: "auto",
+      boxShadow: theme.customShadows?.z3,
+      "& .M4LPopover-arrowStyle": {
+        display: "none"
+      },
+      "& .M4LRHFormProvider-root": {
+        gap: "0px",
+        width: "max-content",
+        minWidth: "220px",
+        maxWidth: "420px",
+        height: "fit-content"
+      }
+    }
+  }),
+  popoverFilterHeader: ({ theme }) => ({
+    backgroundColor: theme.palette.state?.default,
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "4px 4px 4px 8px",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px",
+    borderBottom: "0px",
+    height: "28px",
+    [theme.breakpoints.down("sm")]: {
+      height: "36px"
+    }
+  }),
+  popoverFilterHeaderIcon: {},
+  popoverFilterHeaderTitle: ({ theme }) => ({
+    ...theme.typography.paragraphDens,
+    color: theme.palette.text.primary
+  }),
+  popoverFilterContainerFields: ({ theme }) => ({
+    height: "fit-content",
+    "& > div": {
+      display: "flex",
+      height: "auto",
+      flexDirection: "column",
+      padding: "12px 12px 0 12px",
+      gap: "8px",
+      [theme.breakpoints.down("sm")]: {
+        padding: "16px 16px 0 16px",
+        gap: "12px"
+      }
+    }
+  }),
+  popoverFilterActions: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: "16px",
+    padding: "16px 12px 12px 12px !important",
+    [theme.breakpoints.down("sm")]: {
+      padding: "24px 16px 16px 16px !important"
+    },
+    "& > .M4LButton-root": {
+      height: "24px",
+      minHeight: "24px",
+      [theme.breakpoints.down("sm")]: {
+        height: "36px"
+      }
+    }
+  })
+};
+const RootStyled = styled("div", { name: DYNAMIC_FILTER_KEY_COMPONENT, slot: DynamicFilterSlots.root })(
+  dynamicFilterStyles?.root
+);
+const InnerContainerStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.innerContainer
+})(dynamicFilterStyles?.innerContainer);
+const InputFilterStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.inputFilter
+})(dynamicFilterStyles?.inputFilter);
+const InputFilterInputStyled = styled("input", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.inputFilterInput
+})(dynamicFilterStyles?.inputFilterInput);
+const InputFilterIconStyled = styled(Icon, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.inputFilterIcon
+})(dynamicFilterStyles?.inputFilterIcon);
+const AppliedFiltersStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilters
+})(dynamicFilterStyles?.appliedFilters);
+const AppliedFilterInnerContainerStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterInnerContainer
+})(dynamicFilterStyles?.appliedFilterInnerContainer);
+const AppliedFilterChipStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChip
+})(dynamicFilterStyles?.appliedFilterChip);
+const AppliedFilterChipIconStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipIcon
+})(dynamicFilterStyles?.appliedFilterChipIcon);
+const AppliedFilterChipInfoStyled = styled("button", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfo
+})(dynamicFilterStyles?.appliedFilterChipInfo);
+const AppliedFilterChipInfoFieldNameStyled = styled("span", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfoFieldName
+})(dynamicFilterStyles?.appliedFilterChipInfoFieldName);
+const AppliedFilterChipInfoOperatorStyled = styled("span", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfoOperator
+})(dynamicFilterStyles?.appliedFilterChipInfoOperator);
+const AppliedFilterChipInfoOperandsStyled = styled("span", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipInfoOperands
+})(dynamicFilterStyles?.appliedFilterChipInfoOperands);
+const AppliedFilterChipRemoveButtonStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.appliedFilterChipRemoveButton
+})(dynamicFilterStyles?.appliedFilterChipRemoveButton);
+const ActionsStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actions
+})(dynamicFilterStyles?.actions);
+const ActionsSkeletonButtonStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actionsSkeletonButton
+})(dynamicFilterStyles?.actionsSkeletonButton);
+const ActionsClearButtonStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actionsClearButton
+})(dynamicFilterStyles?.actionsClearButton);
+const ActionsSubmitButtonStyled = styled(IconButton, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.actionsSubmitButton
+})(dynamicFilterStyles?.actionsSubmitButton);
+const PopoverMenuStyled = styled(Popover, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenu
+})(dynamicFilterStyles?.popoverMenu);
+const PopoverMenuItemStyled = styled(MenuItem, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenuItem
+})(dynamicFilterStyles?.popoverMenuItem);
+const PopoverMenuItemIconStyled = styled(Icon, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenuItemIcon
+})(dynamicFilterStyles?.popoverMenuItemIcon);
+const PopoverMenuItemLabelStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverMenuItemLabel
+})(dynamicFilterStyles?.popoverMenuItemLabel);
+const PopoverStyled = styled(Popover, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilter
+})(dynamicFilterStyles?.popoverFilter);
+const PopoverContainerFieldsStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterContainerFields
+})(dynamicFilterStyles?.popoverFilterContainerFields);
+const PopoverHeaderStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeader
+})(dynamicFilterStyles?.popoverFilterHeader);
+const PopoverHeaderIconStyled = styled(Icon, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeaderIcon
+})(dynamicFilterStyles?.popoverFilterHeaderIcon);
+const PopoverHeaderTitleStyled = styled(Typography, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeaderTitle
+})(dynamicFilterStyles?.popoverFilterHeaderTitle);
+const PopoverHeaderActionsStyled = styled(Actions, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterActions
+})(dynamicFilterStyles?.popoverFilterActions);
+function usePopoverMenuFields() {
+  const { getLabel } = useModuleDictionary();
+  const fnAnchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
+  const { showPopoverFilterForAdd, closePopoverMenuFields } = useDynamicFilterStore(
+    (state) => state.actions
+  );
+  function handleOpenPopUpClickItem(_event, field) {
+    if (fnAnchorEl) {
+      showPopoverFilterForAdd(fnAnchorEl(), field);
+    }
+  }
+  function handleClosePopover() {
+    closePopoverMenuFields(false);
+  }
+  function getItemLabel(field) {
+    return field.label ?? getLabel(field.dictionaryId);
+  }
+  return {
+    fnAnchorEl,
+    getItemLabel,
+    handleClosePopover,
+    handleOpenPopUpClickItem
+  };
+}
+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)}`
+      ))
+    }
+  );
+}
+const InputFilter = () => {
+  const {
+    iconUrl,
+    isSkeleton,
+    inputPlaceHolder,
+    inputData,
+    inputHandlersProps,
+    canRender,
+    filteredFields,
+    selectedFieldIndex
+  } = useInputFilter();
+  if (!canRender)
+    return null;
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(InputFilterStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
+  }
+  return /* @__PURE__ */ jsxs(InputFilterStyled, { ownerState: {}, children: [
+    /* @__PURE__ */ jsx(InputFilterIconStyled, { src: iconUrl, ownerState: {} }),
+    /* @__PURE__ */ jsx(
+      InputFilterInputStyled,
+      {
+        type: "text",
+        value: inputData,
+        placeholder: inputPlaceHolder,
+        ownerState: {},
+        ...inputHandlersProps
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverMenuFields, { fields: filteredFields, selectFieldIndex: selectedFieldIndex })
+  ] });
+};
+const InputFilter$1 = InputFilter;
+function useAppliedFilters() {
+  const appliedFilter = useDynamicFilterStore((state) => state.appliedFilters);
+  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
+  const appliedFiltersSorted = [...appliedFilter].sort(
+    (filterA, filterB) => filterA.isSet !== filterB.isSet ? Number(filterA.isSet) - Number(filterB.isSet) : filterB.id - filterA.id
+  );
+  return {
+    appliedFiltersSorted,
+    isSkeleton
+  };
+}
+function useAppliedFilterChip(filter) {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const formatters = useFormatter();
+  const { hidePopoverFilter, removeFilter, showPopoverFilterForEdit } = useDynamicFilterStore(
+    (state) => state.actions
+  );
+  const removeIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`;
+  const labels = useMemo(() => {
+    return fieldFactory(filter.field.type).getLabels(filter, getLabel, formatters, filter.field);
+  }, [filter, getLabel]);
+  function onDelete() {
+    hidePopoverFilter(false);
+    removeFilter(filter.id);
+  }
+  function onEditFilter(event) {
+    hidePopoverFilter(false);
+    const currentTarget = event.currentTarget;
+    setTimeout(() => showPopoverFilterForEdit(currentTarget, filter), 10);
+  }
+  return {
+    onDelete,
+    onEditFilter,
+    removeIconUrl,
+    iconFieldUrl: filter.field?.urlIcon,
+    labels
+  };
+}
+function AppliedFilterChip(props) {
+  const { fixed } = props;
+  const { onEditFilter, onDelete, iconFieldUrl, removeIconUrl, labels } = useAppliedFilterChip(props);
+  return /* @__PURE__ */ jsxs(AppliedFilterChipStyled, { ownerState: {}, children: [
+    iconFieldUrl && /* @__PURE__ */ jsx(AppliedFilterChipIconStyled, { onClick: onEditFilter, src: iconFieldUrl, ownerState: {} }),
+    /* @__PURE__ */ jsxs(AppliedFilterChipInfoStyled, { onClick: onEditFilter, ownerState: {}, children: [
+      /* @__PURE__ */ jsx(AppliedFilterChipInfoFieldNameStyled, { ownerState: {}, children: labels.labelField }),
+      /* @__PURE__ */ jsx(AppliedFilterChipInfoOperatorStyled, { ownerState: {}, children: labels.labelOperator }),
+      /* @__PURE__ */ jsx(AppliedFilterChipInfoOperandsStyled, { ownerState: {}, children: labels.labelOperands })
+    ] }),
+    !fixed && /* @__PURE__ */ jsx(
+      AppliedFilterChipRemoveButtonStyled,
+      {
+        src: removeIconUrl,
+        size: "small",
+        dictionaryTooltipId: "dynamic_filter.tooltip_clear_filter",
+        onClick: onDelete,
+        ownerState: {}
+      }
+    )
+  ] });
+}
+function AppliedFilters() {
+  const { appliedFiltersSorted, isSkeleton } = useAppliedFilters();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(AppliedFiltersStyled, { ownerState: {} });
+  }
+  return /* @__PURE__ */ jsx(AppliedFiltersStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(AppliedFilterInnerContainerStyled, { ownerState: {}, children: appliedFiltersSorted?.map((filter) => /* @__PURE__ */ jsx(AppliedFilterChip, { ...filter }, filter.id)) }) }) });
+}
+const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
+const ASSETS = {
+  refresh: "restart.svg",
+  search: "search.svg"
+};
+function useFilterActions() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const automatic = useDynamicFilterStore((state) => state.automatic);
+  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
+  const isValid = useDynamicFilterStore((state) => state.ownerState.isValid);
+  const isDirty = useDynamicFilterStore((state) => state.ownerState.isDirty);
+  const appliedFilters = useDynamicFilterStore((state) => state.appliedFilters);
+  const { hidePopoverFilter, clearFilters, fireOnChangeFilters } = useDynamicFilterStore(
+    (state) => state.actions
+  );
+  function onClickClearFilters() {
+    hidePopoverFilter(false);
+    clearFilters();
+    fireOnChangeFilters();
+  }
+  const filterIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.search}`;
+  const clearIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`;
+  const canShowRemoveAction = appliedFilters.findIndex((f) => !f.fixed) > -1;
+  const filterButtonDictionaryTooltip = getDynamicFilterDictionary(
+    isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid
+  );
+  return {
+    isSkeleton,
+    filterIconUrl,
+    clearIconUrl,
+    canShowRemoveAction,
+    onClickClearFilters,
+    onClickFilter: fireOnChangeFilters,
+    filterButtonDictionaryTooltip,
+    ownerState: { isValid }
+  };
+}
+function FilterActionsSkeleton() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) }),
+    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) })
+  ] });
+}
+function FilterActions() {
+  const {
+    isSkeleton,
+    filterIconUrl,
+    clearIconUrl,
+    canShowRemoveAction,
+    onClickClearFilters,
+    onClickFilter,
+    filterButtonDictionaryTooltip,
+    ownerState
+  } = useFilterActions();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(FilterActionsSkeleton, {}) });
+  }
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
+    canShowRemoveAction && /* @__PURE__ */ jsx(
+      ActionsClearButtonStyled,
+      {
+        src: clearIconUrl,
+        onClick: onClickClearFilters,
+        dictionaryTooltipId: "dynamic_filter.tooltip_clear_filters",
+        ownerState: {}
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionsSubmitButtonStyled,
+      {
+        src: filterIconUrl,
+        "aria-label": "settings",
+        dictionaryTooltipId: filterButtonDictionaryTooltip,
+        onClick: onClickFilter,
+        ownerState: { ...ownerState }
+      }
+    )
+  ] });
+}
+function usePopoverFilter() {
+  let anchorEl;
+  let field;
+  let formFilter;
+  let filterFormValue;
+  let popupValidationSchema;
+  const { getLabel } = useModuleDictionary();
+  const popoverFilterData = useDynamicFilterStore((state) => state.popoverFilterData);
+  const { hidePopoverFilter, addFilter, updateFilter, getNewId } = useDynamicFilterStore(
+    (state) => state.actions
+  );
+  const refPreviousPopoverFilterData = useRef(popoverFilterData);
+  const statusLoad = useMemo(() => {
+    let returnStatus;
+    if (popoverFilterData && refPreviousPopoverFilterData.current === void 0) {
+      returnStatus = "ready";
+    } else if (!popoverFilterData) {
+      returnStatus = "initial";
+    } else {
+      returnStatus = "reload_values_provider";
+    }
+    refPreviousPopoverFilterData.current = popoverFilterData;
+    return returnStatus;
+  }, [popoverFilterData]);
+  if (popoverFilterData?.openFor === "add") {
+    anchorEl = popoverFilterData?.fnAnchorEl();
+    field = popoverFilterData.field;
+    const helperField = fieldFactory(field.type);
+    popupValidationSchema = helperField.getSchema(getLabel);
+    filterFormValue = helperField.getFormValue(field, getLabel);
+    formFilter = {
+      field,
+      id: getNewId(),
+      isSet: true,
+      fixed: false,
+      ...filterFormValue
+    };
+  } else if (popoverFilterData) {
+    anchorEl = popoverFilterData?.fnAnchorEl();
+    field = popoverFilterData?.filter.field;
+    const helperField = fieldFactory(field.type);
+    popupValidationSchema = helperField.getSchema(getLabel);
+    filterFormValue = helperField.getFormValue(field, getLabel, popoverFilterData.filter);
+    formFilter = { ...popoverFilterData?.filter, ...filterFormValue };
+  } else {
+    filterFormValue = {};
+    field = {};
+    formFilter = {};
+    anchorEl = {};
+  }
+  const onClose = useCallback(() => {
+    hidePopoverFilter(false);
+  }, []);
+  const handleKeyDownPopper = useCallback((event) => {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }, []);
+  function handleClosePopover() {
+    hidePopoverFilter(false);
+  }
+  async function onSubmit(dataFieldValues) {
+    const filterField = { ...filterFormValue, ...dataFieldValues };
+    const newFilter = {
+      ...formFilter,
+      ...fieldFactory(filterField.fieldType).getFilterFromFormValue(filterField),
+      isSet: true
+    };
+    if (popoverFilterData?.openFor === "add") {
+      addFilter(newFilter);
+    } else {
+      updateFilter(newFilter);
+    }
+    hidePopoverFilter(false);
+  }
+  const labelField = field?.label ?? getLabel(field?.dictionaryId ?? "");
+  return {
+    field,
+    labelField,
+    canRender: Boolean(popoverFilterData),
+    anchorEl,
+    handleKeyDownPopper,
+    handleClosePopover,
+    onSubmit,
+    onClose,
+    filterFormValue,
+    formFilter,
+    popupValidationSchema,
+    statusLoad
+  };
+}
+function DataTypeComponent(props) {
+  const { formFilter, statusLoad } = props;
+  const { setFocus } = useFormContext();
+  const Component = fieldFactory(formFilter.field.type).getComponent();
+  useEffect(() => {
+    setTimeout(() => setFocus("formValueOperand1"), 100);
+  }, [statusLoad]);
+  return /* @__PURE__ */ jsx(Component, {});
+}
+function PopoverFilter() {
+  const {
+    field,
+    labelField,
+    anchorEl,
+    handleKeyDownPopper,
+    handleClosePopover,
+    onSubmit,
+    onClose,
+    filterFormValue,
+    formFilter,
+    popupValidationSchema,
+    statusLoad,
+    canRender
+  } = usePopoverFilter();
+  if (!canRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    PopoverStyled,
+    {
+      open: true,
+      disableRestoreFocus: true,
+      transitionDuration: 0,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      arrowType: "top-left",
+      anchorEl,
+      onKeyDown: handleKeyDownPopper,
+      onClose: handleClosePopover,
+      ownerState: {},
+      children: /* @__PURE__ */ jsxs(
+        RHFormProvider,
+        {
+          onSubmit,
+          values: filterFormValue,
+          validationSchema: popupValidationSchema,
+          statusLoad,
+          children: [
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
+            ] }),
+            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
+            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
+              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
+              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function DynamicFilterBase() {
+  const { ownerState, dataTestId } = useDynamicFilterBase();
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState: { ...ownerState },
+      ...getPropDataTestId(dataTestId, DynamicFilterSlots.root),
+      children: /* @__PURE__ */ jsxs(
+        InnerContainerStyled,
+        {
+          ownerState: { ...ownerState },
+          ...getPropDataTestId(dataTestId, DynamicFilterSlots.innerContainer),
+          children: [
+            /* @__PURE__ */ jsx(InputFilter$1, {}),
+            /* @__PURE__ */ jsx(AppliedFilters, {}),
+            /* @__PURE__ */ jsx(FilterActions, {}),
+            /* @__PURE__ */ jsx(PopoverFilter, {})
+          ]
+        }
+      )
+    }
+  );
+}
+function DynamicFilter(props) {
+  const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
+  if (!hasPresentFlags) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
+}
+export {
+  DynamicFilter as D
+};